前端設計中關於外部js檔案載入的速度優化
在一般情況下，許多人都是將<script>寫在了<head>標籤中，而許多瀏覽器都是使用單一的執行緒來載入js檔案的，從上往下，從左往右。
若是載入過程出錯，那麼網頁就會阻塞，就像許多網站用Google的CDN庫，而我們在牆內訪問一樣。頁面不會出來，一直載入這個js檔案，直到瀏覽器放棄載入為止！
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head id="head"> 6 <title></title> 7 <link href="Styles/Site.css" rel="stylesheet" type="text/css" /> 8 <script src="jquery/jquery-1.4.1.js" type="text/javascript"></script> 9 <script src="js/hello.js"type="text/javascript"></script> 10 <script src="js/world.js" type="text/javascript"></script> 11 </head> 12 <body> 13 <img src="1.jpg" width="200" height="300" /> 14 </body> 15 </html>
在上面的例子中，分別載入了hello.js 和 word.js 以及jQuery。
從這張圖中可以看出，三個js檔案還有一個css樣式表是同時載入的，這是在chrome瀏覽器下測試的，現代瀏覽器IE、Firefox還有chrome中都實現了並行的js載入，這節約了不少時間，同時，可以看見之後的圖片是在js檔案載入完畢之後觸發的，這樣，就阻塞了頁面的載入速度。
開始優化
這裡，將js檔案放置於body前面，這樣就可以解決頁面空白問題。
現在可以看到js檔案已經可以和頁面元素基本上同時載入了。但是也還是能夠看到，請求時間略微的向後延遲了一點兒。
說道這裡，js檔案在載入的時候都是發起了get請求的，凡是發起了請求，都是需要請求頭的，所以這裡耗費了不少時間。
想到這裡，就有幾種解決思路了！
1、合併js檔案，減少請求次數
2、利用第三方的工具來減少請求次數，如PHP的Minify。
淘寶就用了方法二：
上圖看出一個src 分別用逗號隔開了三個js檔案的路徑，這裡就用第三方工具將其本來有的三次請求，減少到了一次請求。
好叻，說到這裡，仔細看看chrome中的載入時間，發現載入時間比起最初的載入時間已經減少了不少了。
我們進一步優化！
上面的幾種方法，不管是將<script>寫在頁尾、或者降低請求次數，頁面始終還是“阻塞模式”，也就是說鎖死了瀏覽器，現在的頁面越來越複雜，互動越來越多，js檔案相應的也越來越多，提高載入速度是必然的需求。
那麼，相對的，我們尋找一種“無阻塞模式”，也就是在頁面載入完成之後再載入互動的js檔案，這裡可以選擇使用windows.onload=function(){}的方式來載入檔案。
這裡實現無序的追加載入：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="head"> <title></title> <link href="Styles/Site.css" rel="stylesheet" type="text/css" /> </head> <body> <img src="1.jpg" width="200" height="300" /> <script src="jquery/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = function () { $("#head").append("<script src='js/hello.js' type='text/javascript'><\/script>") $("#head").append("<script src='js/world.js' type='text/javascript'><\/script>"); } </script> </body> </html>
好叻，到了這裡，看上圖，可以發現js檔案 hello.js、world.js 兩個檔案都是文件載入完成之後再載入的。
這樣計算的話，頁面的載入時間又將減去不少了。
然後再擼一個有序的：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head id="head"> 6 <title></title> 7 <link href="Styles/Site.css" rel="stylesheet" type="text/css" /> 8 </head> 9 <body> 10 <img src="1.jpg" width="200" height="300" /> 11 <script type="text/javascript"> 12 function loadScript(url, callback) { 13 var script = document.createElement("script"); 14 script.type = "text/javascript"; 15 16 //IE 17 if (script.readyState) { 18 script.onreadystatechange = function () { 19 if (script.readyState == "loaded" || script.readyState == "complete") { 20 script.onreadystatechange = null; 21 callback(); 22 } 23 } 24 } else { 25 //非IE 26 script.onload = function () { 27 callback(); 28 } 29 } 30 script.src = url; 31 document.getElementById("head").appendChild(script); 32 } 33 //第一步載入jquery類庫 34 loadScript("jquery/jquery-1.4.1.js", function () { 35 //第二步載入hello.js 36 loadScript("js/hello.js", function () { 37 //第三步載入world.js 38 loadScript("js/world.js", function () { 39 40 }); 41 }); 42 }); 43 </script> 44 </body> 45 </html>
這樣就可以實現佇列載入了，這種方式，騰訊網就是這麼實現的了！
相關內容：
轉載 一線碼農 大哥的文章