渲染机制

1. 什么是DOCTYPE及其作用
2. 浏览器渲染过程
3. 重排Reflow
4. 重绘Repaint
5. 布局Layout

一、什么是DOCTYPE及其作用

DTD（document type defiition，文档类型定义）是一系列的语法规则，用来定义XML或者Html的文件类型。浏览器会使用它来判断文档类型，决定使用什么协议来解析。以及切换浏览器模式。

DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是合法性验证，如果代码不合法，那么浏览器解析是便会出一些差错。

比如：

• HTML5
• HTML4.01 strict 严格模式 不包含展示和弃用的yauns
• HTML4.01 transitional 该DTD包含展示型和弃用的元素如font

二、浏览器渲染过程

顺序执行，并发加载一个cdn达到浏览器的并发限制，5到6个，多进行几个cdn

• 词法分析从上到下
• 并发加载
• 并发上限

是否阻塞

css阻塞

• css head中阻塞页面的渲染
• css 阻塞js的执行
• css 不阻塞外部脚本的加载
  js阻塞
• 直接进入js会阻塞html渲染，不会阻塞外部资源的加载
• defer
• asyns
• js是顺序执行，会阻塞后面逻辑单线程

三、重排Reflow

定义：DOM结构中各个元素都有自己的盒子（模型）那些都需要浏览器根据各种样式来计算并根据计算结果将元素放到他该出现的位置。那个过程称之为reflow

触发Reflow

1. 当你增加、删除、修改DOM结点时，会导致Reflow或Repaint
2. 当你移动DOM的位置或者搞个动画
3. 当你修改css样式的时候
4. 当你Resize窗口的时候，（移动端没有那个问题）或是滚动时
5. 当你修改网页的默认字体时
6. 盒子模型相关属性触发重新布局
7. 定位属性及浮动也会触发
8. 改变节点内部文字结构

避免触发Reflow

将频繁重绘重排的DOM元素单独作为一个独立图层，那么这个DOM元素重绘和重排影响之后再这个图层中。

如何在DOM中创建图层

• 3d或透视变换css属性（transform：translateZ(0)）
• 使用加速视屏或反解码的video节点
• 拥有3D(webGL)上下文加速的2d上下文的canvas节点
• flash
• 对自己的opacity做得动画或使用一个动画，webkit变换的元素
• 拥有加速css过滤器的元素
• 一个元素拥有一个元素，该子元素在自己的层里
• 元素有一个z-index较低且包含一个复合层的兄弟元素

四、重绘Repaint

定义：当各种盒子的位置、大小及其属性。例如颜色、字体大小等都确定下来后。浏览器于是便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了

触发Repaint

DOM的改动
CSS的改动

如何最小程度的Repaint

一次性的向页面中插入节点，不要做一次啊操作从新一次。使用performance看性能和Layers看图层。rending看重绘

优化

• 用translate替代top改变
• opacity替代visibing
• 不要一条一条第修改DOM的样式，预先定义好class，然后修改DOM的class
• 把DOM离线后修改（display：none后修改，改好在展示）
• 不要把dom节点的属性放在一个循环里当成循环里的变量，比如offsetHeight
• 不要使用table布局，可能很小的一个小改动会造成整个table的重新布局
• 动画实现的速度的选择，选择适合的时间不要太快
• 对于动画新建图层
• 启动gpu硬件加速，也不是什么都使用加速，cpu到gpu有传输的代价