高性能JavaScript:加載和執(zhí)行
在步入正題之前為大家介紹一本很好的書《高性能JavaScript》大家不妨看一下，在本文中我為大家分享我看這本書的一些收獲。
阻塞特性：
JS 有個很無語的阻塞特性，就是當瀏覽器在執(zhí)行JS 代碼時，不能同時做其他任何事情，無論其代碼是內(nèi)嵌的還是外部的。
腳本位置：
瀏覽器在碰到一個引入外部JS 文件的<script>標簽時會停下所有工作來下載并解析執(zhí)行它，在這個過程中，頁面渲染和用戶交互完全被阻塞了，為了避免頁面加載時的停頓甚至空白頁的出現(xiàn)，JS 腳本應盡量放置在頁面底部，這點很重要：
- <html>
- <head>
- <title>無標題文檔</title>
- <link rel="stylesheet" type="text/css" href="styles.css" />
- </head>
- <body>
- <p>頁面的內(nèi)容。。。</p>
- <!-- 推薦的位置，頁面底部： -->
- <script type="text/javascript" src="file1.js"></script>
- <script type="text/javascript" src="file2.js"></script>
- <script type="text/javascript" src="file3.js"></script>
- </body>
- </html>
組織腳本：
為了改善上面的阻塞情況，應盡可能的減少頁面中<script>標簽的出現(xiàn)次數(shù)，這同時也是考慮到HTTP 請求會帶來額外的性能開銷，也就是說應減少頁面中外鏈腳本的數(shù)量。
你可以手動合并你的多個JS 文件，也可采用類似Yahoo! combo handler 這樣的實時在線服務來實現(xiàn)，例如下面的這個<script>標簽實際上便載入了3個JS 文件：
- <html>
- <head>
- <title>無標題文檔</title>
- <link rel="stylesheet" type="text/css" href="styles.css" />
- </head>
- <body>
- <p>頁面的內(nèi)容。。。</p>
- <!-- 推薦的位置，頁面底部： -->
- <script type="text/javascript" src="http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js"></script>
- </body>
- </html>
無阻塞的腳本：
為了阻塞狀況，這里提供了幾個實現(xiàn)并行下載JS 腳本的方案。
1. 延遲的腳本
HTML4 為<script>標簽定義了一個defer 屬性，它能使這段代碼延遲執(zhí)行，然而該屬性只有IE4+ 和Firefox 3.5+ 支持。聲明了defer 屬性的<script>會在DOM加載完成，window.onload 事件觸發(fā)前被解析執(zhí)行：
- <script type="text/javascript" src="file1.js" defer></script>
2. 動態(tài)腳本元素
這是最通用的解決方案，通過DOM 動態(tài)地創(chuàng)建<script>元素并插入到文檔中，文件在該元素被添加到頁面時開始下載，這樣 無論在何時啟動下載，文件的下載和執(zhí)行過程不會阻塞頁面其他進程。
不過要注意使用這種方式加載的代碼會立刻執(zhí)行，這樣需清楚的了解各文件的作用以及合理的執(zhí)行順序，此時跟蹤并確保腳本下載完成并準備就緒是很有必要的，非IE瀏覽器會在<script>元素接收完成時觸發(fā)一個load 事件，而IE 下則會觸發(fā)一個readystatechange 事件并通過readyState 屬性加以判斷便可。以下是兼容地動態(tài)加載一個JS 腳本的函數(shù):了：
- function load_script(url, callback)
- { var script = document.createElement('script');
- script.type = 'text/javascript';
- if (script.readyState)
- { //IE
- script.onreadystatechange = functio()
- {
- 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);
- }
你可以將這個函數(shù)保存至一個load_script.js 文件，然后用該函數(shù)來加載其他的腳本，當要加載多個腳本時，為了確保正確的加載順序，可以將load_script() 的執(zhí)行串聯(lián)起來，最后如前面說到的放至頁面的底部，這便是一個完美的解決方案了。
- <script type="text/javascript"src="load_script.js"></script>
- <script type="text/javascript">
- load_script('file1.js', function()
- {
- load_script('file2.js', function()
- {
- load_script('file3.js', functio() {
- //全部載入后的操作...
- } );
- } );
- } );
- </script>
3.XMLHttpRequest 腳本注入
即通過AJAX 方式加載，不過這種方式無法實現(xiàn)跨域加載，不適用于大型網(wǎng)站。
推薦的無阻塞模式
我們上面做的這些工作當然也已經(jīng)被那些牛人們完成了，并寫成了一些優(yōu)秀的JS 類庫以便我們使用，它們均能很好地解決JS 腳本的阻塞問題，實現(xiàn)并行下載，例如： YUI3、LazyLoad、LABjs 等。
【編輯推薦】
