web性能優化——瀏覽器相關

簡介

優化是一個持續的過程。因此儘量的不要有人爲的參與。因此能自動化的或者能從架構、框架級別解決的就最更高級別解決。

這樣即能實現面對開發人員是透明的、不響應，又能確保全部資源都是被優化過的。

場景

1. 確保靜態資源是有緩存。
2. 確保靜態資源的大小最小。
3. 確保加載的資源最少。
4. 確保用戶以最短的時間看到頁面
5. 減小人爲因素的性能瓶頸。

解決方案

緩存

讓資源更可能快的讓用戶看到。

結合代理（nginx）來實現。給http添加緩存的時長。

# 須要緩存的靜態資源類型
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css|ico)$ {
    ....
    if (-f $request_filename) {
        expires 1d;
        break;
    }
}

說明：

html文件的緩存，要根據具體業務來判斷。由於有些是真實的Html文件。有些是僞靜態，並無真的html文件
也能夠經過cdn來緩存。

壓縮

經過自動化壓縮的工具來實現，儘可能不要有人爲的參與。這樣即能對開發是透明的，不增長複雜度，也能防止由於人爲的因素的遺忘。

建議：glup的插件（jsmin，cssmin,imgmin）

按需加載

圖片加載延遲

所謂圖片延遲加載，就是每次只加載當前屏幕可見區域的圖片，其他的圖片在用戶滾動頁面到該位置後纔開始加載。這是一項很是實用的技術，減小了併發數，不但減小了服務器的壓力，也下降了頁面的加載時間，目前不少門戶網站都使用了該技術，如騰訊微博的「看看推薦的人」頁面，在該頁面上有幾千個頭像，若是一次性加載所有的圖片，就要耗費比較多的客戶端和服務器端的資源。該功能的實現原理很簡單，就是將頁面上的src替換成其餘標記（如original），在頁面滾動到相應位置後，再將original更改成src。目前有個Jquery插件Jquery.LazyLoad.js能夠實現圖片的延遲加載，並且這個方法也能減小請求數。

異步加載

首屏爲行，重要信息爲先，次要信息異步加載。

減小沒必要要的傳輸

動靜域名分離。不傳輸cookie。有不少業務相關的cookie會經過http傳輸。好比登陸後的token等。

減小請求數

網絡請求是很費時。即增長了服務器壓力，也影響用戶使用的性能。

通常思路是經過合併來實現。

1. 合併請求。結合代理(nginx)的模塊(concat)來實現。
2. 合併資源。雪碧圖。這個也能夠經過glup插件來實現。

加快渲染

image屬性設置

有時須要在頁面加載完以前，就對頁面佈局進行定位。
若頁面中的圖片沒指定尺寸，或尺寸與實際圖片大小不符，瀏覽器會在圖片下載完成後再"回溯"該圖片並從新顯示，從而浪費時間。

# 頁面的請求過程
...

12. 渲染樹一旦有結構模型了，接着就會同步去計算渲染樹節點的佈局位置
13. 一旦計算出來渲染的座標後，又同步去開始渲染
14. 10-13步進行過程當中若是遇到圖片則跳過去渲染下面內容，等待圖片下載成功後會返回來在渲染

...

因此，若是image若是沒有width和height的話，會影響性能。

js位置

js的加載方式是阻塞式的。放在最後，等頁面都渲染完了再加載。

減小嵌套層級

嵌套越深，document的構建越慢。

高性能的規範

好比說：

1. 避免CSS表達式
2. 避免過大的cssName
3. 避免頻繁的DOM操做等。
   ...

也能夠把上面的一些對性能有響應加到規範裏，好比img標籤必須有width和height，不容許css import，嵌套不容許超過3級等等。具體仍是要看前端的規範。最好能有一些自動檢驗規範的工具。好比csshint，或者本身寫一些小工具等。

驗證方法

1. 谷歌瀏覽器的開發者工具（控制檯）
2. pagespeed
3. yslow
4. https://varvy.com/tools/css-delivery/
5. Chrome Task Manager。能查看內存泄漏

參考資源

1. 網站性能優化工具大全
2. web前端性能分析--原理篇
3. Web性能優化分析
4. Web前端，高性能優化
5. Web前端優化最佳實踐及工具集錦