前端面试8：渲染机制

这里有一份简洁的前端知识体系等待你查收，看看吧，会有惊喜哦~若是以为不错，恳求star哈~

课程思惟导图

Q：DTD是什么？

文档类型定义，浏览器会使用它来判断文档类型，从而决定使用何种协议来解析

Q：DOCTYPE是什么？

文档类型声明，通知浏览器当前文档用的是哪一个DTD

Q：经常使用的DOCTYPE的类型有哪些？

1. HTML5：
2. HTML4.01 Strict ：严格模式，包括全部的HTML元素和属性，但不包括展现性和弃用的元素，如font
3. HTML4.01 Transitional：传统模式，包含全部HTML元素和属性，包括展现性的和已弃用的

Q：浏览器渲染过程是怎样的？

1. HTML被解析成DOM Tree，CSS被解析成CSS Rule Tree
2. 在布局阶段，把DOM Tree和CSS Rule Tree通过整合生成Render Tree
3. 元素按照算出来的规则，把元素放到它该出现的位置，经过显卡画到屏幕上

Q：重排（Reflow）是什么？

1. 定义：DOM中各个元素都有本身的盒子模型，须要浏览器根据样式进行计算，并根据计算结果将元素放到特定位置，这就是Reflow
2. 触发Reflow的条件
   • 增、删、改、移DOM
   • 修改CSS样式
   • Resize窗口
   • 页面滚动
   • 修改网页的默认字体

Q：重绘（Repaint）是什么？

1. 定义：当各类盒子的位置、大小以及其余属性改变时，浏览器须要把这些元素都按照各自的特性绘制一遍，这个过程称为Repaint。
2. 触发Repaint的条件：
   • DOM改动
   • CSS改动

Q：如何减小重绘、避免重排？

本质上，就是合并修改。具体的措施有：

1. DOM层面：DocumentFragment本质上是一个占位符，真正插入页面的是它的全部子孙节点，因此，将须要变更的DOM节点先汇总到DocumentFragment，而后一次性插入，能够减小DOM操做的次数。
2. CSS层面：操做多个样式时，能够先汇总到一个类中，而后一次性修改