本文探讨了浏览器的渲染过程，包括DOCTYPE的作用、HTML5与HTML4.01的不同模式，以及渲染树的生成步骤。浏览器解析HTML生成DOM树，结合CSS生成CSSOM，进一步构建渲染树。接着，详细解释了重排（Reflow）和重绘（Repaint）的概念，讨论了可能触发它们的各种情况。最后，简要提及了JavaScript的运行机制。
浏览器渲染
浏览器根据渲染树布局，计算css样式
什么DOCTYPE及作用
使用来声明文档类型和规范,告诉浏览器是什么文档类型。
html5写法
html4.01有两种 strict模式和loose模式
浏览器渲染过程
[外链图片转存失败(img-JOv286H0-1562553114057)(https://github.com/cc7gs/frontEnd_note/blob/master/interview/interview-case/js/render.png?raw=true)]
- 解析HTML生成DOM树
- 解析CSS生成CSSOM规则树
- 将DOM与CSSOM规则合并在一起生成渲染树
- 遍历渲染树开始布局，计算每个节点位置大小信息
- 将渲染树每个节点绘制到屏幕上
重排Reflow
DOM节点中各个元素都有自己的模型，这些都需要浏览器根据各种样式来计算结果将元素放到它该出现的位置。
触发器条件？
- 删除、添加、修改DOM节点时
- 移动DOM的位置
- 修改css样式
- 窗口发生变化或者滚动的时候
- 当修改网页的默认字体时
Repaint
当盒子位置、大小以及属性发生变化，浏览器将照各自的特性重
最低0.47元/天 解锁文章
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
