首頁 > 開發者 > JavaScript
這裡將介紹如何在JavaScript代碼和檔案上下功夫，來提升網站和應用程式的效能。
最佳化頁面載入時間
在修改JavaScript代碼以改進應用程式的效能之前，我們首先要瞭解瀏覽器與JavaScript代碼之間的互動處理。JavaScript代碼是通過HTML<script>標籤進行引用來實現載入的。在這個階段，我們所做的變化處理將確保代碼會快速、高效地載入，及代碼可以更快的準備就緒來執行，從而提升應用程式的可感知響應能力。
1.HTML標籤順序
當瀏覽器遇到<script>標籤時，在大多數情況下，它會停止渲染頁面，直到完成對該指令碼的讀取和解析。這是為了防止指令碼中包含document.write()方法的調用，這意味著在這一時刻會對當前所渲染的頁面進行改變。出於這個原因，把所有能夠移動的<script>標籤挪移至HTML的<body>標籤前。這樣整個頁面將會在各項指令碼載入和解析之前進行渲染，從而提升了頁面的可感知響應能力。
2.JavaScript檔案的GZip編碼傳輸
在JavaScript等檔案發送之前，可以進行壓縮，當資料到達瀏覽器之後，進行解壓縮，這樣一來，通過線路傳輸的資料更少，檔案到達瀏覽器的時間更快。這項設定稱作gzip編碼。
在每個請求發生時進行即時的gzip編碼處理會消耗伺服器上額外的資源和CPU處理時間。
3.縮編、混淆和編譯
JavaScript檔案檔案越小，通過線路把檔案下載至瀏覽器的時間越快，瀏覽器對檔案的讀取和解析也就更快。因此，我們要想方設法讓代碼的體積儘可能的小。這可以通過縮編、混淆和編譯。
（1）使用JSMin進行代碼縮編
（2）使用UglifyJS進行代碼混淆
（3）使用Google Closure Compiler進行代碼編譯
（4）避免全域變數的使用以實現更優壓縮
4.請求時才消極式載入JavaScript檔案
動態使用JavaScript建立一個新的<script>標籤，設定其src標籤特性指向目標檔案以實現非同步載入，從而建立一個非阻塞請求來下載JavaScript檔案。通過關聯一個函數至該新標籤的onload方法，我們可以執行那些依賴於這個指令碼（非同步下載的JavaScript檔案）載入後才能啟動並執行指定代碼。
代碼清單1-1 請求時才載入JavaScript檔案，從而不阻塞瀏覽器
//src為要載入的檔案的位置，load為檔案成功載入後所執行的函數function loadScript(src,load){var scriptTag = document.createElement("script");scriptTag.src = src;if(typeof onload === "function"){scriptTag.load = load;scriptTag.onreadystatechange = function(){if(scriptTag.readyState ===4){onload();}}}document.body.appendChild(scriptTag);}
//載入-script.js檔案，當完成時，彈出提示框loadScript("my-script.js",function(){alert("script loaded and available!");});//載入-script.js檔案，所需功能包含在檔案內部，一旦該檔案完成載入後並不需要執行額外的代碼//因此，不需要傳入第二個參數loadScript("my-script.js");ps:可以使用RequireJS庫來實現JavaScript檔案的延時載入，以及利用標準化的格式來實現代碼檔案依賴的簡單管理。
有關提升頁面渲染效能的更多內容http://www.smashingmagazine.com/2013/06/10/pinterest-paint-performance-case-study/
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
