提升html訪問速度

紋路貓發表於2012-09-29
HTML
我經常將js放置在head中，但是很多瀏覽器都是使用單一執行緒處理介面UI和js，他們必須逐一執行，此時很多元素會處於鎖死狀態。這樣自然就增加了頁面等待的時間了，這就得考驗使用者的耐心了。那麼如何優化？

優化1：既然js阻止了UI渲染，那麼我們可以考慮將js放在</body>前，這樣就可以讓<script>前的html完美的呈現，不會讓使用者看到頁面空白等待而苦惱的情況，自然就提高了友好性。

優化2：多少個js就會有多少次“Get”請求，大家都知道Get請求是需要帶http頭的， 所以說需要耗費時間，那麼我們採取的方案自然就是減少Get請求，將多個js合併到一個js裡面去。

優化3：不管是把js檔案放在腳尾，還是三個合併一個，其本質都是”阻塞模式“，就是說鎖死瀏覽器，當web頁面越來越複雜，js檔案越來越多，還是讓我們頭疼的，此時我們就提倡一種“無阻塞模式“載入js指令碼，也就是頁面全部呈現完再追加js，也就對應著window.onload事件觸發後，我們才追加js，這就是所謂的“無阻塞“，但是其中有一個非常要注意的地方就是我們對js的要求是否有嚴格的順序。

<%@ 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>

而當第三種有順序要求的時候，可以這樣做：

<%@ 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 type="text/javascript">
         function loadScript(url, callback) {
             var script = document.createElement("script");
             script.type = "text/javascript";
 
             //IE
             if (script.readyState) {
                 script.onreadystatechange = function () {
                     if (script.readyState == "loaded" || script.readyState == "complete") {
                         script.onreadystatechange = null;
                         callback();
                     }
                 }
             } else {
                 //非IE
                 script.onload = function () {
                     callback();
                 }
             }
             script.src = url;
             document.getElementById("head").appendChild(script);
         }
         //第一步載入jquery類庫
         loadScript("jquery/jquery-1.4.1.js", function () {
             //第二步載入hello.js
             loadScript("js/hello.js", function () {
                 //第三步載入world.js
                 loadScript("js/world.js", function () {
 
                 });
             });
         });
     </script>
 </body>
 </html>

據自己親身試過，確實是節省了時間，所以要感謝這位：http://www.cnblogs.com/huangxincheng

另外css如果多的話也可以合併一下。

使用CSS Sprite(合併圖片)提高載入效能和減少請求連線數，所有小圖示都放在一張圖片上面。

快取DNS查詢可以改善頁面效能。

推遲載入內容

你可以仔細看一下你的網頁，問問自己“哪些內容是頁面呈現時所必需首先載入的？哪些內容和結構可以稍後再載入？

把整個過程按照onload事件分隔成兩部分，JavaScript是一個理想的選擇。例如，如果你有用於實現拖放和動畫的JavaScript，那麼它 就以等待稍後載入，因為頁面上的拖放元素是在初始化呈現之後才發生的。其它的例如隱藏部分的內容（使用者操作之後才顯現的內容）和處於摺疊部分的影象也可以推遲載入。

工具可以節省你的工作量：YUI Image Loader可以幫你推遲載入摺疊部分的圖片，YUI Get utility是包含JS和 CSS的便捷方法。比如你可以開啟Firebug的Net選項卡看一下Yahoo的首頁。

當效能目標和其它網站開發實踐一致時就會相得益彰。這種情況下，通過程式提高網站效能的方法告訴我們，在支援JavaScript的情況下，可以先去除用 戶體驗，不過這要保證你的網站在沒有JavaScript也可以正常執行。在確定頁面執行正常後，再載入指令碼來實現如拖放和動畫等更加花哨的效果。

配置ETag 

Entity tags（ETags）（實體標籤）是web伺服器和瀏覽器用於判斷瀏覽器快取中的內容和伺服器中的原始內容是否匹配的一種機制（“實體”就是所說的“內 容”，包括圖片、指令碼、樣式表等）。增加ETag為實體的驗證提供了一個比使用“last-modified date（上次編輯時間）”更加靈活的機制。Etag是一個識別內容版本號的唯一字串。唯一的格式限制就是它必須包含在雙引號內。原始伺服器通過含有 ETag檔案頭的響應指定頁面內容的ETag。 


不知道這樣算不算優化，可能是鑽個空子吧，我把消耗時間很長，而也不急著獲取的方法，用Settimeout延遲一下執行，也可以讓網頁快一點呈現出來。





解決

相關文章