經驗分享-延緩執行 JavaScript 提升網頁載入速度

在我們的web開發當中，我們會涉及到大量的外部JS代碼，眾所周知，載入這些外部的JS代碼是一件非常耗時的事情，因為他影響到使用者體驗，載入不好的話會影響我們做的效果，因此延緩執行 JavaScript 是一個能有效提高網頁載入速度以及提升使用者閱讀體驗品質的途徑。

通過我把要執行的JS代碼這樣一調用，頁面載入速度確實提高了50%多，你可以用Google工具測試一下確實很快

我們先來設想一下：在頁面載入過程當中發生了什麼事情，首頁是載入HTML 和 CSS 。等這些在瀏覽器裡能夠正確地（被渲染出來之後，在開始執行JS代碼。假設有個別的JS檔案突然中止，只要這個JS檔案沒有語法錯誤，那麼網頁最終一定會被正確的載入；因此延遲JS載入可以採用2種方法執行：

 

一種情況是頁面dom元素全部載入完成之後，在執行頁面內部的JS代碼

第二種情況就是動態載入javascript檔案，如果多個JS檔案之間存在依賴，確保主要的JS檔案寫在底部以便最後載入：下面就說說具體的實現代碼：

看我的部落格頂部的導航，

每當頁面開啟的時候他載入的速度是很快的，我就是採用第二種方法動態載入javascript檔案來實現的，主要的程式碼片段

 

<script type="text/javascript">// <![CDATA[        _lazyLoadScripts = new Array();        _lazyExecutedCallbacks = new Array();// ]]></script><script type="text/javascript" src="/scripts/jquery-1.4.4.min.js"></script><script type="text/javascript" src="/scripts/website-load.js"></script>

 

解釋一下上面代碼的意思：“_lazyLoadScripts” 和 “_lazyExecutedCallbacks” 是兩個用來存變數的數組，你要載入的變數都需要寫在這裡面；可能這樣看你看不懂，我用我部落格的例子說明；看實際的代碼：

 

<!--載入元素--><script type="text/javascript">// <![CDATA[        _lazyLoadScripts = new Array();//外部要執行的JS代碼需要定義到這個數組，_lazyLoadScripts.push("http://files.cnblogs.com/58top/jquery.lazyload.mini.js","http://files.cnblogs.com/magetu/jquery.scripts-13501165562.js");_lazyExecutedCallbacks = new Array();//定義一個變數數組，_lazyExecutedCallbacks.push(function ()//然後吧需要執行的JS代碼寫在裡面，也就是入棧操作    {    $("head").append('<!--[if IE 6]><link rel="stylesheet" type="text/css" href="http://files.cnblogs.com/58top/iehacks.css" /><script  src="http://files.cnblogs.com/58top/ie6pngfix.js"><\/script><script  src="http://files.cnblogs.com/58top/zh_CN.js"><\/script><![endif]-->');                $("#header").after('<div id="mainnav-sticky-wrapper" class="sticky-wrapper is-sticky" style="height: 48px;"><div id="mainnav" style="" >'+    '<div class="rapidxwpr">'+ '<div id="topmenu">'+        '<ul class="sf-menu sf-js-enabled sf-shadow">'+          '<li ><a href="http://www.cnblogs.com"><span>部落格園</span></a></li>'+          '<li ><a href="http://www.cnblogs.com/58top"><span>首頁</span></a></li>'+          '<li class="" ><a href="http://www.cnblogs.com/58top/admin/EditPosts.aspx"><span>管理</span></a></li>'+          '<li class="" ><a href="http://www.cnblogs.com/58top/category/399677.html"><span>前端開發</span></a></li>'+          '<li class="" ><a href="http://www.cnblogs.com/58top/category/331530.html"><span>CSS</span></a></li>'+          '<li class="" ><a href="http://www.cnblogs.com/58top/category/330174.html"><span>jQuery</span></a></li>'+          '<li class="" ><a href="http://www.cnblogs.com/58top/category/330797.html"><span>HTML5</span></a></li>'+          '<li class="" ><a href="http://www.cnblogs.com/58top/category/330308.html"><span>Photography</span></a></li>'+          '<li class="" ><a href="http://www.cnblogs.com/58top/category/332697.html"><span>創意設計</span></a></li>'+                           '<li class="" ><a href="http://www.cnblogs.com/58top/category/402990.html"><span>字型設計</span></a></li>'+                              '<li class="" ><a href="http://www.cnblogs.com/58top/rss"><span>訂閱</span></a></li>'+                    '</div>'+               '<div class="navsocial">'+        '<ul>'+          '<li class="twitter"><a target="_blank" rel="external nofollow" href="http://list.qq.com/cgi-bin/qf_invite?id=a17d3955b24fb6a3208154a6ef7aa86bd47a549d90b4253e">Twitter</a></li>'+          '<li class="facebook"><a target="_blank" rel="external nofollow" href="https://pinterest.com/58top/">Facebook</a></li>'+          '<li class="rss"><a target="_blank" rel="external nofollow" href="">RSS</a></li>'+          '<li class="pinterest"><a target="_blank" rel="external nofollow" ">Pinterest</a></li>'+        '</ul>'+      '</div>'+          '</div>'+  '</div></div>');    });// ]]></script><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script><script type="text/javascript" src="http://files.cnblogs.com/58top/website-lazy-load1.js"></script>//這個是要執行動態載入的函數，最終所有的變數都在這個函數裡面執行

這些被壓入（push）到 “_lazyExecutedCallbacks” 裡的 JS 代碼和被插入到 “_lazyLoadScripts” 裡的外部 JS 檔案全部都會在 “website-lazy.js” 裡被執行，執行的程式碼片段如下

 1  2 // 執行關聯的外部JS代碼，通過for迴圈讀取每個JS檔案 3 function loadScriptsAfterDocumentReady() 4 { 5     if (_lazyLoadScripts && _lazyLoadScripts != null) 6     { 7         for (var i = 0; i < _lazyLoadScripts.length; i++) 8         { 9             var scriptTag = document.createElement('script');10             scriptTag.type = 'text/javascript';11             scriptTag.src = _lazyLoadScripts[i];12             var firstScriptTag = document.getElementsByTagName('script')[0];13             firstScriptTag.parentNode.insertBefore(scriptTag, firstScriptTag);14         }15     }16 }17  18 // 執行回調的JS代碼.同樣的通過for迴圈讀取JS代碼了19 function invokeLazyExecutedCallbacks()20 {21     if (_lazyExecutedCallbacks && _lazyExecutedCallbacks.length > 0)22         for(var i=0; i<_lazyExecutedCallbacks.length; i++)23             _lazyExecutedCallbacks[i]();24 }25  26 // 執行最終的方法當頁面載入完成之後.27 jQuery(document).ready(function ()28 {29     loadScriptsAfterDocumentReady();30     invokeLazyExecutedCallbacks();31 });

 

 

如果你的網站需要廣泛地載入外部 JS 檔案，那麼將它們寫在 “website-load.js” 裡動態載入進來，這樣能最大程度的提高使用者體驗

通過我把要執行的JS代碼這樣一調用，頁面載入速度確實提高了50%多，因此非常推薦這樣方法，你也可以實際的用一下這個方法，非常棒，歡迎留下你的使用心得，一起交流