浏览器渲染机制
2019-02-17 本文已影响0人
Zero_R
1. DOCTYPE:
DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。
HTML5声明方式：
<!DOCTYPE html>
HTML4声明方式：
HTML4分为Strict（严格模式）和Transitional（宽松模式）
严格模式
包含所有HTML元素和属性，但不包含展示性和弃用的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
宽松模式
包含所有HTML元素和属性，包含展示性和弃用的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loosse.dtd">
2. 浏览器渲染过程：
Webkit渲染引擎工作流程
image
- 解析HTML生成DOM树。
- 解析CSS生成CSSOM规则树。
- 将DOM树与CSSOM规则树合并在一起生成渲染树。
- 遍历渲染树开始布局，计算每个节点的位置大小信息。
- 将渲染树每个节点绘制到屏幕。
重排Reflow：
定义：
DOM结构中各个元素都有自己的盒模型，这些都需要浏览器根据各种样式来计算并根据结果将元素放到该出现的位置，这个过程称之为reflow
触发条件：
- 增加、删除、修改DOM节点时，会触发Reflow或Repaint。
- 移动DOM位置、动画。
- 修改CSS样式。
- Resize窗口（移动端除外）、滚动。
- 修改网页默认字体。
重绘Repaint：
定义：
当各种盒子的位置、大小及其他属性都确定后，浏览器把这些元素按照各自的属性绘制一遍，于是页面出现，这个过程称之为repaint
触发条件：
- DOM改动。
- CSS改动。
- 只要页面内容显示有变化则触发repaint 。
如何减少repaint频率：
改变多个DOM节点时使用DocumentFragment文档片段节点，将需要改变的多个节点全部放到DocumentFragment中一次改变DOM，这样只会触发一次repaint，优化性能。
