1. 简介
- 什么是
DOCTYPE及作用
- 浏览器渲染过程
- 重排
Reflow
- 重绘
Repaint
- 浏览器
Layout
2. 浏览器渲染机制
1. 什么是DOCTYPE及作用。
- DTD用来定义XML或(X)HTML的文件类型。浏览器据此判断文档类型，决定用何种协议来解析以及切换浏览器模式。
DOCTYPE用来申明文档类型以及DTD规范，主要的作用就是文件的合法性校验，不合法的文件浏览器解析时会出一些差错。- 常见的
DOCTYPE类型
HTML5
<!DOCTYPE html>
HTML4.0版本
1. Strict,严格模式： 包含所有html元素和属性，但不包含展示性和弃用的元素。
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
2. Transitional，传统模式： 包含所有html元素和属性，且包含展示性和弃用的元素。
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
2. 浏览器渲染过程。
- 解析HTML和CSS，形成
DOM树和CSS树
- 整合DOM树和CSS树，形成
渲染树(Render Tree)
Render()渲染Render Tree（生成Layout，用于计算dom的宽高,生成布局） // 此时浏览器并不知道如何展示DOM- 解析DOM树
- display展示内容
3. 重排Reflow
- 概念：浏览器根据DOM模型的样式并根据计算结果将DOM放到它该出现的位置的过程。
- 触发
Reflow的条件
(1) 增、删、改DOM节点
(2) 移动DOM的位置，或者添加动画。
(3) 修改CSS样式
(4) 改变窗口大小，或者滚动
(5) 修改网页的默认字体
4. 重绘Repaint
- 概念：当盒子的位置大小、颜色、属性、字体等都确定下来后，浏览器把这些元素都按照各自的特性绘制了一遍。于是页面的内容出现了，这个过程就是
Repaint
- 触发
Reflow的条件
(1) DOM节点改动
(2) CSS改动
(3) 只要页面的显示内容改变了就会触发Repaint
Repaint是无法避免的，但可以最大程度的降低Repaint
(1) 减少DOM改动的次数
(2) 一次性添加一个代码片段，而不是多次添加DOM节点；
(3) 增加class而不是逐个添加属性等
3. 总结
- 本文主要介绍了浏览器是如何将HTML渲染呈现在页面的原理。
