1.DOCTYPE
- DTD(document type definition,文档类型定义)是一系列的语法规则,用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型,决定使用何种协议来解析,以及切换浏览器模式。
解读:DTD就是告诉浏览器我是什么文档类型,那么浏览器根据这个来判断用什么引擎来解析渲染他。
- DOCTYPE是用来声明文档类型和DTD规范的,一个主要的用途便是文件的合法性验证。如果文件代码不合法,那么浏览器解析时便会出一些差错。
解读:DOCTYPE通知浏览器当前文档的DTD。
- 常见的DOCTYPE
- 1.HTML 5,!DOCTYPE html
- 2.HTML 4.01 Strict,严格模式,该DTD包含所有HTML元素和属性,但不包括展示型的和弃用的元素(比如font)。
- 3.HTML 4.01 Transitional,传统模式(宽松模式),该DTD包含所有HTML元素和属性,包括展示型的和弃用的元素(比如font)。
2.浏览器渲染过程
3.重排Reflow
定义:DOM结构中的各个元素都有自己的盒子(模型),这些都需要浏览器根据各种样式来计算,并根据计算结果将元素放到它该出现的位置,这个过程称为reflow。
- 触发Reflow:(一般触发Reflow时都会需要Repaint)
- 1.当你增加、删除、修改DOM节点时,会导致Reflow或Repaint;
- 2.当你移动DOM的位置,或是搞个动画的时候;
- 3.当你修改CSS样式的时候;(css改变宽高、display:none;)
- 4.当你Resize窗口的时候(移动端没有这个问题),或是滚动的时候;
- 5.当你修改网页的默认字体时;在页面加载完后避免这样做,会影响性能
如何尽量避免Reflow
4.重绘Repaint
定义:当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为Repaint。(解读:页面要呈现的内容,统统画在屏幕上)
- 触发Repaint:
- 1.DOM改动;
- 2.CSS改动;
如何尽量减少Repaint频率,将需要追加的多个DOM节点先存放在一个片段(createDocumentFragment())中,最后一次性放到页面中。
5.布局Layout
Layout作用是计算每一个DOM的位置,宽高。