網站性能優化

網站性能優化

                     laiqun@msn.cn

 

1.  緩存

1. 條件GET—默認自帶
   • →If-modified-since:wed,22,2006,4:15pm
   • ←Last-modified:
2. Expires:wed,22,2006,4:15pm—須要設置
   • 缺點：要求服務器與客戶端的時鐘嚴格同步，過時後發送新的過來
3. Expires改進 cache-control:max-age —須要設置
   • 要求：HTTP1.1
   • 改進：再也不像Expires那樣須要時鐘同步，只需在max-age中設置好倒計時。
   • 使Expires像cache-control:max-age可使用Apache的mod_expires插件。
4. ETag 設置爲禁止—須要設置
   • 服務器惟一標識在分佈式集羣服務器下很難命中緩存

代理緩存

• 緩存響應的各個版本，例若有壓縮的，無壓縮的 Vary:Accept-Encoding,useragent
• 禁用緩存 Vary:* 或者 Cache-control:Private

問題：

• 緩存以後，你更新了那個文件，而這時候客戶端還會使用緩存的舊文件。怎麼處理這種狀況？

  答:在書寫html的時候，在上面加上版本號，服務器更新文件後，更新html中引用文件的版本號，這樣客戶端的緩存就沒法命中了，強制從服務器下載更新後的文件。

2. 其它優化

1. 減小HTTP請求：使用圖像拼合技術、文件合併
2. 使用CDN：自動尋找最佳網絡線路，加快請求響應速度
3. css放在head裏：能夠防止FOUC(無樣式內容閃爍)
   • 原理：瀏覽器用DOM樹和樣式表進行渲染(rending)，樣式表放在底部，會引發從新渲染
4. script放在底部：防止阻塞並行下載
   • 原理：javascript肯能使用document.write來生成頁面，例如兩個js中都用了document.write()並行下載並執行的時候會產生衝突。
   • 備選方法1—分次下載:設置cookie後，等第二次再下載
   • 備選方法2—ajax注入下載
5. 不使用CSS表達式
   • 原理：css 表達式的計算過於頻繁，每次鼠標移動都會產生成千上萬的表達式計算
6. 使用外部的css和javascript
   • 原理：使他們能夠被緩存
7. 用去空白、混淆來精簡javascript
   • 壓縮：去掉空格、tab縮進等無心義的字符 要求：javascript書寫式不能省略";"，不然會出現語法錯誤
   • 混淆：用長單詞代替短單詞，這樣文件的體積會減少，且很是不利於閱讀，好處是能夠防止別人破解你的代碼
8. 去重javascript
   • 若是是多人協做開發的話，極可能一個庫引用了兩份
9. 使用gzip來壓縮傳輸
10. 避免重定向
    • 跟蹤技術—知道用戶離開你的網站以後去了哪裏
    • url參數 假設咱們的網站是www.yahoo.com url爲www.yahoo.com/**http%3a//en.wikipedia.org/咱們服務器放回一個302重定向，並獲取到後面的url地址，就知道用戶離開www.yahoo.com以後去了哪裏
    • 空白的img標籤-beacon信標 <a> 單機後觸發一個函數 函數中有一個空的get請求，裏面有url參數 <a href="www.wiki.com" onClick="result Beacon(this)" >Performance wiki</a><script>var beacon; function resultBeacon(anchor){beacon = new Image(); beacon.src="www.yahoo.com/?"++escape(anchor.href)}</script>
11. 避免過分DNS查找

3. 進階

1. 線程長時間運行致使的界面響應卡頓
   • 使用Work線程或者Gear插件來實現多線程
   • 使用定時器，有間斷的執行腳本或者掛起腳本
2. 腳本分爲初始化和非初始化兩部分，非初始化部分能夠延遲加載
   • script標籤的defer屬性
3. 無阻塞腳本
   • ajax(XHR) 注入下載 eval 或者修改script標籤的src屬性
4. 腳本合併
   • 這樣能夠減小HTTP請求數目
5. javascript的執行效率
   • 二分查找
   • 避免使用字符串+運算，使用字符串數組後join的方法
   • 使用事件委託:利用事件冒泡機制，減小重複代碼
6. 圖像優化
   • 壓縮 裁剪 下降分辨率

4. 參考書籍

1. 《高性能網站建設指南》—Steve Souders      俗稱:狗書
2. 《高性能網站建設進階指南》—Steve Souders  俗稱：鹿書

5. 工具

YSlow 圖片滾動加載、漸進渲染

chrome profle  timeline 

使用字體圖標和CSS--不過度依賴圖片

來自爲知筆記(Wiz)