面试题之js渲染机制

浏览器根据渲染树布局&＃xff0c;计算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&＃61;true)]

• 解析HTML生成DOM树
• 解析CSS生成CSSOM规则树
• 将DOM与CSSOM规则合并在一起生成渲染树
• 遍历渲染树开始布局&＃xff0c;计算每个节点位置大小信息
• 将渲染树每个节点绘制到屏幕上

重排Reflow

DOM节点中各个元素都有自己的模型&＃xff0c;这些都需要浏览器根据各种样式来计算结果将元素放到它该出现的位置。

触发器条件&＃xff1f;

• 删除、添加、修改DOM节点时
• 移动DOM的位置
• 修改css样式
• 窗口发生变化或者滚动的时候
• 当修改网页的默认字体时

Repaint

当盒子位置、大小以及属性发生变化&＃xff0c;浏览器将照各自的特性重新绘制一遍。

触发条件?

• DOM改变
• CSS改变

推荐原文

欢迎大家关注我的前端仓库,这里有数据结构、常见面试题、框架、书籍等学习总结&＃xff0c;有问题也可以在仓库 issues 或 emil: chenorange12&＃64;gmail.com