效能是前端開發乙個非常重要的組成部分，與應用不同，網頁的所有資源初始都需要通過網路傳輸，因此如何進行更好地進行網路傳輸對前端效能影響很大，此外還有瀏覽器渲染部分的優化。不管怎麼說如何進行前端效能優化是乙個永恆的話題。本文是閱讀小冊前端效能優化原理與實踐後加上部分自己以前的理解整理而成的，更詳細的原理請看小冊。
概覽檔案：前端效能優化.xmind.zip
效能優化需要從哪幾個方面入手？我們要先了解瀏覽器開啟網頁的過程。
瀏覽器對url進行dns解析
瀏覽器與伺服器進行tcp連線
瀏覽器發出http請求
伺服器返回http響應
瀏覽器進行頁面渲染
下面我們分別對這幾個階段進行優化。
提前解析dns需要用到dns prefetch技術。可以在html中使用
ref="dns-prefetch"
href="">
複製**
另外還可以使用x-dns-prefetch-control: on/off響應頭來控制預解析的開關。可以在html中使用
複製**來實現該效果或直接讓伺服器返回該響應頭。
tcp全稱transmission control protocol。是一種面向連線的，可靠的傳輸協議，它位於osi模型的傳輸層。
快取service worker cache
memory cache & disk cache
他們是配合http快取的。 memory cache命中最快，但是它週期較短，base64的，較小的js和css能夠有較大機率被寫進記憶體，這沒有確定的定論。 其他較大的js、css和等會被直接寫進硬碟，進行快取。
儲存（詳細解釋）
選用正確的格式（詳細解釋）
css會阻塞html進行渲染，但是為了介面沒有任何樣式的展現在使用者面前，因此我們需要將css提前
前端效能優化總結
多使用記憶體，快取或者其他方法 減少cpu計算，減少網路請求 減少io操作 硬碟讀寫 靜態資源的合併和壓縮。靜態資源快取 瀏覽器快取策略 使用cdn讓靜態資源載入更快。css放head中，js放body後 懶載入減少dom操作，對dom操作做快取 減少dom操作，多個操作盡量合併在一起執行 事件節流...
前端效能優化總結
多使用記憶體，快取或者其他方法 減少cpu計算，減少網路請求 減少io操作 硬碟讀寫 靜態資源的合併和壓縮。靜態資源快取 瀏覽器快取策略 使用cdn讓靜態資源載入更快。css放head中，js放body後 懶載入減少dom操作，對dom操作做快取 減少dom操作，多個操作盡量合併在一起執行 事件節流...
前端效能優化總結
從使用者的角度而言，當開啟乙個網頁，往往關心的是從輸入完網頁位址後到最後展現完整頁面這個過程需要的時間，這個時間越短，使用者體驗越好。所以作為網頁的開發者，就從輸入url到頁面渲染呈現這個過程中去提公升網頁的效能。所以輸入url後發生了什麼呢？在瀏覽器中輸入url會經歷網域名稱解析 建立tcp連線 ...