初探瀏覽器渲染原理

對於提高頁面性能這個老生常談的話題，其實仔細研究起來，或多或少仍是能充實本身的知識儲備。

這裏主要說的是瀏覽器渲染這塊，其餘的http請求傳輸這塊又是另一個提高性能方向了。

從瀏覽器獲得頁面開始：
　　不一樣的瀏覽器內核，對渲染執行可能不一樣
　　 1.解析html，生成dom tree
　　2.解析css,生成style rules樣式規則
　　3.js文件操做dom api和css api來操做dom tree和css rule tree
　　4.css rule tree 映射dom tree來生成render tree，render tree是由包含有顏色和大小等屬性的矩形組成
　　5.計算各個座標，而後使用gui開始畫

　　當dom尺寸發生變化時，會發生reflow。也就是下圖中的layout階段，會從新計算座標，繪製render tree
　　reflow 和repaint的區別（能夠參考https://coolshell.cn/articles/9666.html#more-9666）

 

下圖是Webkit的主流程：

 

 

下圖是 Geoko 的主流程：

 

 

對比二者，發現主流程基本相同，不一樣的是webkit中dom tree和css rules 映射生成render tree的過程
爲attachment。
在Geoko中則是Frame Constructor 而且稱呼爲Frame Tree

 

我的理解的大體流程就是如上所述的，對於更深刻的如何解析，如何映射，如何生成渲染樹。能夠參考（http://taligarsiel.com/Projects/howbrowserswork1.htm）

參考連接：

　　http://blog.cssforest.org/2012/02/08/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86%E6%B5%85%E6%9E%90.html

　　 https://blog.csdn.net/zzzaquarius/article/details/6532299

　　https://coolshell.cn/articles/9666.html#more-9666