首頁 > 開發者 > JavaScript
JavaScript的載入和運行，對網頁的效能有至關重要的作用。通常我們會採取以下方式來最佳化指令碼：
1、將指令碼放在頁面底部。
JavaScript有阻塞的特徵，當JavaScript運行時其他的事情不能被瀏覽器處理。大部分老版本瀏覽器是不允許JavaScript並行下載的。雖然IE8，Firefox3.5，Safari4，Chrome2允許並行下載JavaScript檔案，但仍然要阻塞其他資源的下載過程，例片。即使指令碼之間的下載過程互不阻塞，頁面仍然要等待所有JavaScript代碼下載並執行完成後才能繼續渲染。因此，將<script>標籤放在儘可能接近<body>標籤底部的位置，可以減少對整個頁面下載的影響。
2、減少<script>標籤數。
每當頁面解析碰到一個<script>標籤時，緊接著有一段時間用於代碼執行。最小這些延遲時間可以改善頁面的整體效能。
3、盡量減少引用外部指令檔的數量和體積。
可以將多個JavaScript指令碼壓縮合并，以減少HTTP請求數。
以上只是提高效能的第一步，當我們的JavaScript變得很大，產生一次HTTP請求，也有可能會鎖定瀏覽器一大段時間。為了避開這種情況，我們可以逐步向頁面添加JavaScript。這意味著等頁面載入完之後，再下載源碼。以下方法可以解決：
1、延期指令碼Deferred Scripts(defer屬性只被IE4+、Firefox3.5+支援，不是一個很理想的跨瀏覽器解決方案)。一個帶有defer屬性的<script>標籤可以放在文檔的任何位置。對應的檔案將在<script>被解析時啟動下載，但代碼不會被執行，直到DOM載入完(在onload事件之前執行)
例如：<script type="text/javascript" src="util.js" defer></script>
2、動態指令碼元素,DOM允許使用JavaScript動態建立HTML的幾乎全部文檔內容。因此，<script>元素也可以非常容易地通過標準的DOM函數來建立。這樣做的好處是，無論在何處啟動下載，檔案的下載和運行都不會阻塞其他頁面處理過程。
<script type="text/javascript"> var JsLoader = { load: function (url, callback) { var script = document.createElement("script"); script.setAttribute("charset", "utf-8"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); if (Browser.ie) { script.onreadystatechange = function () { if (this.readyState == "loaded" || this.readyState == "complete") { script.onreadystatechange = null; callback(); } }; } else if (Browser.mozilla) { script.onload = function () { callback(); }; } else { callback(); } } }; JsLoader.load("http://weyoo.cn/js/util.js", function () { JsLoader.load("http://weyoo.cn/js/jquery-1.7.1.min.js", function () { JsLoader.load("http://weyoo.cn/js/baseModel.js", function () { JsLoader.load("http://weyoo.cn/js/commonToolFn.js", function () { alert("串聯保證載入順序哦"); }); }); }); });</script>
3、XMLHttpRequest Script Injection XHR指令碼注入
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
