前端性能優化瀏覽器+服務器篇

1、性能優化之瀏覽器篇

一、把CSS放在head中加載

• 能讓頁面更早的開始渲染，避免閃屏
• 最好能包含關鍵渲染路徑的樣式：首屏
• 會讓頁面顯得加載速度更快，由於這樣作可使瀏覽器逐步加載已經下載的網頁內容，這對內容比多的網頁尤爲重要，用戶不用一直等待在一個白屏上，而是能夠先看到已經下載的內容。
• 若是樣式表放在底部，瀏覽器會拒絕渲染已經下載的網頁，由於大多數瀏覽器在實現時都努力避免重繪，樣式表中的內容是繪製網頁的關鍵信息，沒有下載下來以前只好對不起觀衆了。

二、把JS放在body未尾

• 由於JS阻塞HTML解析和CSS渲染

三、不使用CSS表達式

• 看似強大，實際性能開銷很大，可能致使頁面卡頓

 四、用外鏈方式引用CSS和JS

• 有效減小HTML的體積
• 可合理利用瀏覽器緩存

五、壓縮JS和CSS

• 生產環境刪除沒必要要的註釋、空白
• JS中變量名壓縮，混淆壓縮

六、不重複加載JS

• 在IE中仍是會多個請求，不能發揮緩存優點
• 意味着更長的JS執行時間

七、讓Ajax請求可緩存

• GZIP、內容壓縮均可適用

八、用GET方式發起Ajax請求

• GET方式能夠緩存
• 若是是獲取信息，GET更語義化
• 若是是提交數據，POST更語義化

九、組件延遲加載

• 保障關鍵頁面資源優先加載：由於併發數限制
• 延遲加載的典型手段：Lazyload（對於圖片比較多的頁面）

十、減小DOM節點數

• 天貓：更多節點數覺得瀏覽器佈局、渲染時計算量更大
• 會加大頁面加載和腳本執行的效率

十一、避免使用iframe

• 會阻塞父文檔的onload
• 即便是空白也比較耗時

十二、減小COOKIE體積

• 由於COOKIE每次請求都會所有帶上

1三、使用無COOKIE域名加載靜態資源

• 減小靜態資源加載時的網絡傳輸量
• 靜態資源加載一般是不須要COOKIE的
• 阿里：精簡COOKIE後，每一年節省的流量TB記

1四、減小JS中的DOM訪問 

• 對於查找到的元素，緩存在變量中
• 節點增長是合理利用DocumentFragment
• 不要用JS去頻繁修改樣式

1五、使用更智能的事件監聽機制

• 基於事件冒泡的委託機制，有效減小綁定的數量
• $("selector").delegate("li","click",function(){});

1六、使用常見的圖片優化手段

• 相比代碼，圖片體積很大
• 常見的壓縮工具：PNGCrush、JPEGTRAN、PNGQUANT
• 漸進式編碼：JPG 

1七、不要在HTML中縮放圖片

• 徒增渲染開銷，提供適當尺寸便可(用到多大的就用多大的，好比使用100*100的不要設置爲500*500)

1八、不要把圖片src置空

• IE、Chrome、FireFox會發起額外的主文檔請求
• 空的圖片src仍然會使瀏覽器發送請求到服務器，這樣徹底是浪費時間，並且浪費服務器的資源。尤爲是你的網站媒體被不少人訪問的時候，這種空請求形成的傷害不容忽略。

1九、任何資源儘可能在25K之內

• iphone沒法緩存25K以上的資源

2、性能優化之服務器篇

一、減小網絡請求

• 合併請求：包括JS、CSS（將多個CSS合併在一塊兒）
• 使用雪碧圖：CSS Sprite
• 使用地圖：HTML Map
• 內聯小圖片：Base64Encode

二、使用內容分發網絡CDN

• 地理上離用戶更近
• 專業的公司提供服務

三、適當的使用緩存

• 爲靜態資源添加Expires響應頭
• 爲靜態資源添加Cache-Control資源
• 配置Apache、Nginx、Express

四、啓用GZIP壓縮

• 大幅度減小網絡傳輸體積，壓縮率高達：60%~90%
• 多種文件類型：HTML、JS、CSS、Image

五、減小DNS查找

• 單個站點不要使用太多域名
• 單次DNS查找約消耗20~120ms

六、避免重定向3XX(30一、302)

• 重定向對瀏覽器意味着重頭再來
• 每次重定向至少多花費50ms

七、配置有效的ETAG

• 跟瀏覽器說明過時規則

　　

八、讓Ajax請求可緩存

• GZIP、內容壓縮均可適用

 九、儘快輸出第一個字節

• 儘快輸出頁面頭部，瀏覽器能儘快幹活
• 並行下載外鏈的CSS
• 風靡一時的BigPipe也是基於此

十、使用無COOKIE域名加載靜態資源

• 減小靜態資源加載時的網絡傳輸量
• 靜態資源加載一般是不須要COOKIE的
• 阿里：精簡COOKIE後，每一年節省的費用百萬級