零, 什么是 DOCTYPE 及其作用?
1,DTD(document type definition): 文档类型定义, 是一系列的语法规则, 用来定义 XML 或 (X)html 的文件类型. 浏览器会使用它来判断文档类型, 决定使用何种协议来解析, 以及切换浏览器模式.
通俗易懂的说就是, DTD 告诉浏览器我是什么文档类型, 浏览器根据这来判断用什么解析和渲染它.
2,DOCTYPE 是用来申明文档类型和 DTD 规范的, 一个主要用途便是文件的合法性验证. 如果文件代码不合法, 那么浏览器解析时便会出一些差错.
通俗易懂的解释就是, DOCTYPE 通知浏览器当前文档包含的是哪个 DTD, 即何种文档类型.
3,HTML 5 的 DOCTYPE 写法:
4,HTML 4.0.1 有两种 DOCTYPE 写法, 一种严格模式 (strict), 一种传统模式 (Transitional).
严格模式 (Strict): 该 DTD 包含所有 HTML 元素和属性, 但不包括展示性的和弃用的元素, 如 font,center,big 等
传统模式 (Tranditional): 该 DTD 包含所有 HTML 元素和属性, 包括展示性的和弃用的元素, 如 font,center,big 等
一, 浏览器的渲染过程
浏览器渲染过程 (图片来源网络)
几个概念:
DOM Tree: 浏览器将 HTML 解析成树形的数据结构.
CSS Rule Tree: 浏览器将 CSS 解析成树形的数据结构.
Render Tree: DOM 和 CSSOM 合并后生成 Render Tree.
Layout: 有了 Render Tree, 浏览器已经能知道网页中有哪些节点, 各个节点的 CSS 定义以及他们的从属关系, 从而去计算出每个节点在屏幕中的位置.
Painting: 按照算出来的规则, 通过显卡, 把内容画到屏幕上.
渲染过程:
(1) 浏览器会将 HTML 解析成一个 DOM 树, DOM 树的构建过程是一个深度遍历过程: 当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点.
(2) 将 CSS 解析成 CSS Rule Tree .
(3) 根据 DOM 树和 CSSOM 来构造 Render Tree. 注意: Rendering Tree 渲染树并不等同于 DOM 树, 因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了.
(4) 有了 Render Tree, 浏览器已经能知道网页中有哪些节点, 各个节点的 CSS 定义以及他们的从属关系. 下一步操作称之为 Layout, 顾名思义就是计算出每个节点在屏幕中的位置.
(5) 再下一步就是绘制, 即遍历 render 树, 并使用 UI 后端层绘制每个节点.
二, Reflow 重排
1, 定义
DOM 结构中的各个元素都有自己的盒子 (模型), 这些都需要浏览器根据各种样式来计算, 并根据计算结果将元素放到它该出现的位置, 这个过程称之为 reflow.
2, 怎么触发 Reflow
增加, 删除或修改 DOM 节点, 会导致 Reflow 或 Repait
移动 DOM 的位置, 如写个动画
修改 CSS 样式
Resize 窗口 (移动端没有这个问题), 或者滚动
修改网页默认字体
三, Repaint 重绘
1, 定义
当各种盒子位置, 大小及其他属性, 如颜色, 字体大小等都确定下来之后, 浏览器于是把浙西元素都按照各自的特性绘制一遍, 于是页面的内容出现了, 这个过程称之为重绘 (Repaint).
通俗易懂的说就是页面要呈现的内容, 通通画在屏幕上, 就是 Repaint.
2, 怎么触发 Repaint
DOM 的改动
CSS 的改动
来源: http://www.jianshu.com/p/d3d6d1fc881e