高性能網站建設指南總結

 

 

性能黃金法則：只有10%～20%的最終用戶響應時間花在了下載HTML文檔上，其他的80%～90%時間花在了下載頁面中的全部組件。

一、  減小Http請求：減小HTML文檔中所引用的組件（圖片，腳本，樣式表，Flash等）
       主要用到的技術有：圖片地圖、Css Sprites、內聯圖片（data：URL）、圖片加載延遲lazyLoad、腳本和樣式表合併。
　    內聯圖片：ie67不支持，大小受限制，不緩存（內聯CSS圖片可緩存）。
       內聯CSS圖片PHP模板展現：http://stevesouders.com/hpws//inline-css-images-css.php
二、  內容發佈網絡(Content Delivery Network)：將靜態組件備份在CDN上，是客戶端用戶離服務器更接近，須要保證CDN的實時性
三、  添加Expires頭：控制web組件的緩存時間，要求服務器與客戶端時間同步，
　    HTTP 1.1支持Cache-Control:max-age=毫秒，可同時設置這兩個頭
　    要想瀏覽器獲取更新文件，則改變文件名
四、  壓縮組件gzip：主要是腳本和樣式表。須要在服務器那裏做配置。
五、  樣式表放在頂部(head)：在使用樣式表時，頁面逐步呈現會被阻止，瀏覽器在加載完樣式表後會重繪DOM。
六、  腳本放在底部(</body>以前)：腳本會阻塞下載，緣由是腳本可經過document.write修改頁面內容，
       瀏覽器阻塞並行下載還能夠確保腳本可以按照正確的順序執行
七、  避免CSS表達式
八、  使用外部的javascript和css：最佳方式--動態腳本加載是非阻塞下載的

　　 動態加載腳本源碼以下：　　 

/*
 *  異步加載外部腳本的方法
 *  defer屬性：只支持IE
 *  async屬性：html5
 */
function asyncLoadScript(url,callback){
    var script = document.createElement("script");
    script.type = "text/javascript";
    if(script.readyState){//ie
        script.onreadystatechange = function(){
            if(script.readyState == "loaded" || script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        }
    }else{//other
        script.onload = function(){
            callback();
        };
    }
    script.src = url;
    document.body.appendChild(script);
}

九、  減小DNS查詢：域名解析
十、精簡javascript：對javascript源代碼進行精簡
十一、避免重定向：尋找一種避免重定向的方法
十二、移出重複腳本：確保腳本只被包含一次
1三、配置或移出實體標籤(ETag)
1四、使用ajax可緩存：確保ajax請求遵照性能指導，尤爲應具備長久的Expires頭