前端性能優化這件事情上， 我認爲他是20%的理論， 加上至少80%的實踐， 甚至很多理論本身也都是我們具體的業務場景中實踐出來的。前端技術日新月異， 性能方案永遠都在更迭， 所以一定要形成自己的學習思路。
從一道面試題說起
從輸入URL到頁面加載完成， 發生了什麼？
我們站在性能優化的角度， 一起簡單的複習一遍這個經典的過程：首先我們需要通過dns域名解析系統， 將url解析爲對應的ip地址， 然後與這個ip地址確定的那臺服務器簡歷起tcp網絡連接， 隨後我們向服務端拋出我們的http請求，服務端處理完我們的請求之後， 把目標數據放在http響應裏返回給客戶端， 拿到響應數據的瀏覽器可以開始走一個渲染的流程。渲染完畢，頁面便呈現給了用戶，並時刻等待響應用戶的操作
我們將這個過程切分爲如下的過程片段：
- dns解析
- tcp連接
- http請求拋出
- 服務端處理請求 http響應返回
- 瀏覽器拿到響應數據， 解析響應內容 把解析的結果展示給用戶
我們任何一個用戶端的產品， 都需要把這5個過程滴水不漏的考慮到自己的性能優化方案內，反覆權衡，從而打磨出用戶滿意的速度
從原理到實踐：各個擊破
接下來要做的事件， 就是正對這五個過程進行分解， 各個提問， 各個擊破。
具體來說， dns解析花時間， 能不能儘量減少解析次數或者把解析前置？
能——瀏覽器dns緩存和dns prefetch
tcp每次的三次握手都急死人，有沒有解決方案？
有——長連接、與連接、接入spdy協議
如果說這兩個過程的優化往往需要我們的團隊和服務器工程師寫作完成， 前端單方面可以做的努力有限，那麼http請求呢？在減少請求次數和減小請求體積方面， 我們應該是專家， 再者， 服務器越遠， 一次請求就越慢， 那部署時就把靜態資源放在離我們更近的cdn上是不是就能快一些
以上提到的都是網絡層面的性能優化， 再往下走就是瀏覽器端的性能優化——這部分涉及資源加載優先化、服務端渲染、瀏覽器緩存機制的利用、dom樹的構建、網頁排版和渲染過程、迴流與重繪的考量、dom操作的合理規避等等——這正是前端工程師可以真正一展拳腳的地方， 學習這些知識， 不僅可以幫助我們從更根本上提升頁面性能， 更能夠大大加深個人對瀏覽器底層原理， 運行機制的理解
總的來說
我們將從網絡層面和渲染層面兩個大的維度來逐個點亮前端性能優化的技能樹。
這兩個維度的知識面貌各有千秋， 在網絡層面，我們需要學習一些必須的理論基礎作爲前置知識。這部分的學習或許不需要寫特別多的代碼， 但需要對每一個知識點理解透徹， 進而應用到自己日常優化的決策中去。網絡層面結束後， 由本地儲存開始， 漸漸過度到瀏覽器這一端的優化。