浏览器是如何呈现一张页面的？什么情况下浏览器会进行layout？

一个浏览器有很多个模块，其中负责呈现页面的是渲染引擎模块，呈现页面的过程是这样的：

1、解析HTML，并生成一颗DOM tree；

2、解析各种样式并结合DOM tree生成一颗Render tree；

3、对Render tree的各个节点计算布局信息，比如box的位置与尺寸；

4、根据Render tree 并利用浏览器的UI层进行绘制；

什么情况下浏览器会进行layout？如下操作会打破常规，并触发浏览器执行layout：

1、通过js获取需要计算的DOM属性；

2、添加或删除DOM元素；

3、resize浏览器窗口大小；

4、改变字体；

5、css伪类的激活，比如:hover;

6、通过js修改DOM元素样式并且该样式涉及到尺寸的改变；