简单+浅谈前端页面渲染机制。参考教程
每天接触最多的某过于浏览器了。常见的浏览器chrome firefox opear safari等。
其中chrome所占比例对多 可以参考这个网址 浏览器市场份额
qq 20170506110835
主要谈谈chrome浏览器的渲染机制
1. 构建Dom树
-
DOM，即文档对象模型（Document Object Model）,即文档内所有节点构成一个属性结构
qq 20170506110916
2. 构建cssom树
- CSSOM ,即css对象模型，与DOM结构类型。只是为每一个结构关联了样式信息。
qq 20170506110925
3. 执行脚本(javascript)
- 脚本放置的前后的位置很有研究。一般建议放在body体内最下面。
4. 构建渲染树（render tree）
- 通过对前面的操作的组合会组成一个render tree
- 每一个渲染对象都对应着DOM节点
qq 20170506110934
5. 回流/布局（render tree）
- 创建完渲染树之后，就是布局也成为回流。就是对每一个渲染对象属性的计算将其精确放置在浏览器窗口上。按照从上往下，从左到右渲染。可能还会触发重绘。
最后就是投射到屏幕上了。此外还有很多很多细节，多到头疼。
网友评论