1前端性能優化概覽
用戶打開網頁的時候，主要經歷了5個過程：
- DNS解析
- TCP連接
- HTTP請求
- 服務端處理請求，HTTP響應返回
- 瀏覽器解析響應，開始渲染
網站的性能優化，要從這5個方面來展開，其中DNS解析、TCP連接需要服務端提供支持才能進行優化，前端能夠做的事是有限的。
前端在http請求，頁面渲染上可以優化的地方非常多。
2網絡篇
- http優化
優化方向：減少請求次數、減少單次請求所花費時間。
優化點：webpack優化，babel-loader處理更少的文件，從文件路徑、文件名上剔除大量不需要優化的文件；使用Happypack將loader由單進程轉爲多進程；拆分壓縮的js，刪除冗餘代碼，按需加載；開啓gzip壓縮
- 圖片優化
圖片佔用網站大量的網絡資源，合理的使用圖片是非常必要的。
Jpeg/jpg圖片：有損壓縮、體積小、加載快、不支持透明。Jpg經常作爲大的背景圖、輪播圖和banner圖出現；
Png-8/png-24圖片：無損壓縮、質量高、體積大、支持透明。8位和24位的png圖片分別支持256種和1600萬種顏色。在要求線條和顏色的對比度時，適合使用png，一般在logo上使用。
Svg：文件體積小，可壓縮性更強。但是需要編程、渲染的成本高（渲染svg節點）
Base64：文本文件、依賴編碼、小圖標解決方案。使用base64，將圖片編碼在html裏，減少圖片的請求數量。但是base64編碼後圖片的大小會變成原來的4/3。是雪碧圖的替代方案。
Webp：大小比png小，還支持透明。但是隻有chrome瀏覽器支持。
3存儲篇
- 瀏覽器緩存和緩存策略
瀏覽器緩存機制有四個方面，它們按照獲取資源時請求的優先級依次排列如下：
- Memory Cache
- Service Worker Cache
- HTTP Cache
- Push Cache
強緩存：expires、cache-control。瀏覽器根據expires和cache-control判斷目標資源是否“命中”緩存。cache-control優先於expires，當cache-control沒有設置時，纔會讀取expires。現在expires一般用於做緩存的向下兼容。
Public和private，public表示瀏覽器和代理服務器都可以緩存，private表示只有瀏覽器可以緩存。
No-store與no-cache：no-store不允許任何類型的緩存，no-cache每次要向服務器確認緩存是否過期。
協商緩存：last-modified、etag。Last-modified表示文件上一次修改事件，但是無法確定文件是否改變。Etag會提供一個標識，標識是基於文件編碼的。但是etag會需要額外的開銷。會影響服務器的性能。
- 瀏覽器本地存儲
都遵從於同源政策。Cookie、localstorage可以在不同的窗口共享數據。Session Storage 特別的一點在於，即便是相同域名下的兩個頁面，只要它們不在同一個瀏覽器窗口中打開，那麼它們的 Session Storage 內容便無法共享。
Cookie：大小通常在4kB，會跟隨在每次的http請求上，會消耗性能。只能以鍵值對的形式存儲，只能存爲字符串。
Web Storage 的特性：Web Storage 根據瀏覽器的不同，存儲容量可以達到 5-10M 之間。僅位於瀏覽器端，不與服務端發生通信。
Localstorage：是持久化的本地存儲，存儲在其中的數據是永遠不會過期的，使其消失的唯一辦法是手動刪除。
SessionStorage：而 Session Storage 是臨時性的本地存儲，它是會話級別的存儲，當會話結束（頁面被關閉）時，存儲內容也隨之被釋放。
IndexDb是一個運行在瀏覽器上的非關係型數據庫。IndexDB 可以看做是 LocalStorage 的一個升級，當數據的複雜度和規模上升到了 LocalStorage 無法解決的程度。
4渲染篇
- 服務端渲染
優點：網頁直接到達用戶的時候，就可以開始渲染。能夠被搜索引擎搜索到。
缺點：首屏加載慢，當用戶過多的時候，會給服務器造成很大的壓力
- 瀏覽器運行
Css渲染的時候，按照從右到左的順序匹配。避免使用通配符，只對需要用到的元素進行選擇；關注可以通過繼承實現的屬性，避免重複匹配重複定義；少用標籤選擇器；標籤選擇器後不要跟着id或class選擇器；減少嵌套
CSS 是阻塞渲染的資源。需要將它儘早、儘快地下載到客戶端，以便縮短首次渲染的時間。
Js會阻塞dom的渲染，我們的 JS 代碼在文檔的何處插入，就在何處執行。當 HTML 解析器遇到一個 script 標籤時，它會暫停渲染過程，將控制權交給 JS 引擎。JS 引擎對內聯的 JS 代碼會直接執行，對外部 JS 文件還要先獲取到腳本、再進行執行。等 JS 引擎運行完畢，瀏覽器又會把控制權還給渲染引擎，繼續 CSSOM 和 DOM 的構建。
- Dom優化原理
減少dom 的操作，如果插入10000個dom節點，最好是存在一起插入。不過目前有優秀的前端視圖框架，比如vue、react、angular，基於這些框架上的開發，就可以避免直接操作dom，同時框架會幫助我們更好的實現業務。
- 迴流與重繪
迴流：當元素的幾何屬性發生變化的時候，就會觸發重新渲染元素。
重繪：當修改了樣式，卻未影響其幾何屬性的情況下，瀏覽器只需爲其繪製新的樣式。
迴流一定會引起重繪，重繪不一定會引起迴流。避免多次迴流的操作。
5常見性能優化應用
- 懶加載（lazy-load）
- 節流與防抖
以上只是提及了前端優化的點，爲的是提高前端仔的思想。最後，感謝阿里的修言大佬。前端優化看過很多了，包括雅虎軍規，還有各種博客，但是雅虎軍規偏向於傳統的前端，對現在使用node構建的前端幫助並不大了。博客裏寫的文章，又不夠系統，有些因爲作者的理解可能不太深入，寫的也是一知半解。各位想仔細看看的，建議購買修言大佬的掘金小冊。《前端性能優化原理與實踐》