568
如何最快的加載外部JavaScript文件
當<script>標簽位於html文檔流中的時候,位於<script>後麵的html會被阻止渲染，必須等到該script加載完以後才會後麵的html才會渲染，通過JavaScript動態的生成一個script標簽，可以避免上麵你的這個問題，因為這個會是外部加載的script的文件位於html文檔流以外。因此動態的加載外部的JavaScript文件可以提高頁麵的渲染速度，提高用戶體驗。
最佳實踐
Steve Souders關於外部的JavaScript文件不阻礙html文檔的渲染這個問題，在他的書中和博客中公布了集中方法，通過我的思考和實驗，我得出了一下三點結論：
1. 創建兩個JavaScript文件。第一個JavaScript文件包含動態加載外部JavaScript文件的代碼；第二個JavaScript文件包含所有的外部JavaScript代碼.
2. 把第一個JavaScript文件放在頁麵的地步，</body>結束標簽的前麵。
3. 創建第二個JavaScript標簽通過調用函數來加載外部JavaScript文件。
下麵可以具體的如何實現：
第一個JavaScript文件要足夠的小，一般包含如下的代碼：first.js
function loadScript(url, callback){ var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function(){ callback(); }; }script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}然後在我們的頁麵中可以這樣使用<script type="text/javascript" src="https://your.cdn.com/first.js"></script><script type="text/javascript">loadScript("https://your.cdn.com/second.js", function(){ //initialization code});</script> 參考：https://developer.yahoo.com/yui/3/yui/https://www.nczonline.net/blog/2009/06/23/loading-javascript-without-blocking/
最後更新：2017-04-02 03:42:38