前端性能優化清單

這已經不是一個新鮮的話題了。在前端框架層出不窮，理念翻天覆地的狀況下，總有針對的優化手段，可是優化的同時咱們要清楚，究竟是爲了什麼而優化。

優化的目的

首先咱們最應該關注的是用戶體驗，這是能爲公司帶來直接效益的方面，不光是界面流程要設計得足夠精巧，若是頁面加載時長過長，操做卡頓，都會影響用戶瀏覽下去的興致。用戶頗有多是在一臺性能欠佳的電腦而且是在網絡很差的狀況下去瀏覽的，所以咱們不只要在開發機上擁護良好的體驗，更要模擬條件很差的狀況下網站運行的狀況。對於一些大致量用戶量極大的公司來講，能爭取多一部分用戶，甚至每一秒的提高，均可能帶來可觀的收益。

因此，咱們應該從兩個方面入手優化。

1. 頁面加載
2. 代碼的執行

頁面加載的優化

從使用的資源入手

• 並非全部的網站都須要bootstrap來構建用戶界面，對UI的抽象會增長瀏覽器必須下載的CSS，而CSS是阻塞渲染的資源，因此小項目引入CSS框架帶來的開銷會顯著延遲渲染。
• 並不是全部的網站都須要成爲單頁面應用，javascript資源不只須要下載，並且還須要通過解析編譯和執行，是最昂貴的資源。

關注發送資源的方式

• 將靜態資源部署到CDN上，突破瀏覽器單個域名的請求併發數
• 關注資源發送的優先級，用於首屏渲染的資源應儘快加載，對於立馬要用的資源，應在頭部聲明preload，script的加載聲明async，對於用戶即將要用的資源，用prefetch在空閒的時候加載。
• 分割代碼，按需加載（webpack）
• 將資源遷移至HTTP/2，以並行的方式加載。同時，HTTP/2支持頭部壓縮而且以二進制的格式傳輸，減少了發送資源的大小。

留意發送數據的大小

• 壓縮文本資源，替換較長的變量名，經過webpack.optimize.UglifyJsPlugin對資源進行壓縮，對於一些特定的資源好比CSS，webpack在導入的時候文件會被編譯成一個字符串，所以壓縮要在特定的loader中開啓，好比css-loader的minimize.
• 服務器開啓gzip對資源進行壓縮，須要注意的是一些文件格式是已經壓縮過的（JPEG,PNG,GIF,WOFF等），所以不會對壓縮作出相應。
• 對於圖形內容，除非是要用到透明度的狀況下使用PNG格式，通常條件首選有損的jpg格式。使用工具刪除圖片的元數據，儘可能使用較低質量的圖片。
• 瀏覽器每次發出的請求都會帶上cookie，因此cookie不該存放太多的數據，須要持久化的數據應該存儲在localstorage上。

關注請求耗時

• 對於靜態資源，應該經過設置http緩存保存在本地，經過cache-control設置有效時長，瀏覽器會判斷是否須要請求，減小請求來回消耗的時間。
• 使用service worker配合cache api對資源進行緩存。在網絡條件很差的狀況下優先使用離線資源。
• 避免重定向

頁面執行的優化

工廠生產的效率高不高，一方面不只僅要關注原材料是否及時送達，另外一方面也要關注生產過程當中各個環節是否相互制約，那個環節出現瓶頸。這種狀況一樣出如今瀏覽器的頁面產出。

• 對於CSS而言，用於計算某元素計算樣式的時間中大約有50%用來匹配選擇器，而另外一半時間用於從匹配的規則中構建 RenderStyle（計算樣式的表示），咱們要儘可能用類名的方式去替代複雜過長的選擇器，儘管對於代碼而言不太優雅，可是這能節省css用來匹配的時間。
• 用requestAnimationFrame替代setTimeout和setInterval執行動畫。
• 使用transform 實現 幾何屬性的動畫。
• 對CSS合成合理分層。使用will-change 屬性開啓分層繪製。
• 使用web worker 開啓新線程處理複雜計算。