初探浏览器渲染原理

Posted 2020-10-31 逆水行舟，心如止水。

对于提升页面性能这个老生常谈的话题，其实仔细研究起来，或多或少还是能充实自己的知识储备。

这里主要说的是浏览器渲染这块，其他的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