渲染机制
2020-07-09 本文已影响0人
vavid
一、什么是DOCTYPE及作用
DTD(document type definition，文档类型定义)是一系列的语法规则，用来定义XML或XHTML的文档类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式
DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错
<!DOCTYPE html> // HTML5
二、浏览器渲染过程
image.png
三、重排Reflow
定义：DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow
触发Reflow
- 当增加、删除、修改DOM结点时，会导致Reflow或Repaint
- 当移动DOM的位置，或是设置动画时
- 当修改CSS样式时
- 当Resize窗口的时候（移动端没有这个问题），或是滚动时
- 当修改网页的默认字体时
四、重绘Repaint
定义：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程称为repaint
触发Repaint
- DOM改动
- CSS改动
