前端性能優化

行文結構

1. Chrome瀏覽器架構
2. Chrome瀏覽器運行
3. 網頁如何渲染生成
4. 性能優化思考方向
5. 性能優化ToDoList
   
   

Chrome瀏覽器架構

渲染引擎Rendering Engine使用的是WebKit
XML Parser： libXML解析XML，libXSLT處理XSLT
JS解釋器使用C++實現的V8引擎

常見的幾個概念區分： V8是js解釋器，webkit是渲染引擎，choromium開源瀏覽器框架，chrome是瀏覽器。

Chrome瀏覽器運行

  重點說下其中的 Renderer Process
  若是咱們的代碼優質，那麼其中的HTML解析器、CSS解析器、V8引擎的解析工做會更高效，性能就會更好。
  若是不理解Process（進程）的概念，能夠參見 這篇文章

網頁如何渲染生成
1.HTML代碼轉化成DOM
2.CSS代碼轉化成CSSOM（CSS Object Model）
3.結合DOM和CSSOM，生成一棵渲染樹（包含每一個節點的視覺信息）
4.生成佈局（layout），即將全部渲染樹的全部節點進行平面合成
5.將佈局繪製（paint）在屏幕上

性能優化思考方向：

1. 資源及代碼壓縮
2. 合理的減小請求
3. 異步加載阻塞資源
4. 減小回流和重繪

To Do List：

1. 精簡DOM結構，減小布局計算量
2. 少操做dom，儘可能使用documentFragment再appendChild或者cloneNode再replace
3. js讀寫dom屬性時，採用讀寫分離，避免強制迴流
4. 減小對象的遍歷深度和遍歷次數
5. 用IIFE包裹全部js，強化內部的垃圾回收
6. 提升css選擇器的精準度
7. GPU加速 transform:translate3d(0, 0, 0)
8. 動畫脫離標準文檔流，少用定時器、延時器，多用requestAnimationFrame
9. 堅持使用 transform 和 opacity 屬性更改來實現動畫，只觸發合成器，不觸發迴流和重繪

（每一點均可以展開不少，具體參考如下連接
1.www.ruanyifeng.com/blog/2015/0…
2.sylvanassun.github.io/2017/10/03/…
3.juejin.im/post/59da45…
4.juejin.im/post/5a9923…
5.blog.csdn.net/qq_36368586…
6.developers.google.com/web/fundame…
7.segmentfault.com/a/119000001…
8.blog.csdn.net/steward2011…
9.mp.weixin.qq.com/s/vIKDUrbux…
10.juejin.im/entry/5a9e9…
11.juejin.im/post/5b61d8…
）