現有WEB應用為了提高客戶體驗，提高前台指令碼的複用性，常使用大量的指令碼，一個頁面在顯示時，載入幾百K的指令檔越來越常見，使用HTTPHandler類比一個需要載入較長時間的指令檔.
Scripts.ashx
public class Scripts : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "application/x-javascript";
System.Threading.Thread.Sleep(1500);
context.Response.Write("//");
}
public bool IsReusable {
get {return false; }
}
}
使用傳統的載入方式對其進行載入,
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server" id="aaa">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript" src="Scripts.ashx?a"></script>
<script type="text/javascript" language="javascript" src="Scripts.ashx?b"></script>
通過IE可以看到載入這些指令碼是順序進行的，以此類推多個大指令碼的載入的時間將成幾何倍增長,對伺服器假設再國外的網站，以及網路狀況較差的使用者來說，從開啟頁面到看到頁面將花費數十秒時間。
打破傳統的頁面載入方式，通過document.write()來對指令碼進行動態載入
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server" id="aaa">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
document.write(
'<script type="text/javascript" language="javascript"' +
' src="Scripts.ashx?a"><' + '/script>');
document.write(
'<script type="text/javascript" language="javascript"' +
' src="Scripts.ashx?b"><' + '/script>');
</script>
</head>
用這種方法載入指令碼，通過IE會發現，指令碼的載入是並行的，雖然仍然無法突破Http協議規定的一個Domain只能有兩個串連的限制，但是指令碼的載入速度已經明顯快了很多.
瀏覽器判斷網域名稱的方式比較嚴格，是以同一網域名稱下的子網域名稱，同一網域名稱下連接埠不同，都算不同，通過增加子網域名稱來增加並行載入的串連數較為常見。
在開發過程中可以通過修改Host檔案，來類比多串連並發下載的情況。
Host檔案
127.0.0.1 gms.test.91.com
127.0.0.1 gms1.test.91.com
127.0.0.1 gms2.test.91.com
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
document.write('<script type="text/javascript" language="javascript"' +
' src="http:// gms.test.91.com/Scripts.ashx?a"><' + '/script>');
document.write('<script type="text/javascript" language="javascript"' +
' src="http://gms1.test.91.com /Scripts.ashx?b"><' + '/script>');
document.write('<script type="text/javascript" language="javascript"' +
' src="http://gms2.test.91.com/Scripts.ashx?c"><' + '/script>');
</script>
通過IE可以看到，載入3個各需要1.5s完成時間的指令碼，幾乎在2s內就完成。
最後說一下defer這個屬性, <script defer="defer"></script>，曾經在使用某些第三方的指令碼控制項時，載入過程中會報錯，提示internet explorer 無法開啟網站，已終止操作，在加了defer屬性後，就不再報錯，查閱了相關資料，defer屬性的作用是告訴瀏覽器，指令碼中不存在需要立即執行的代碼，並且可以在後台對指令碼進行下載，與頁面顯示是並行的，但是defer在firefox中是不被支援的。
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
