浏览器渲染原理

什么是DOCTYPE及作用
DTD是一系列的语法规则，用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
DOCTYPE是用来声明文档类型和DTD规范的，一个主要的作用是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。
浏览器的工作流程

• 解析HTML，生成DOM树，解析CSS生产CSSOM
• 根据生成的DOM和CSSOM构建渲染树Render tree
• 根据渲染树，计算每个节点在屏幕上的位置，尺寸等信息。
• 将渲染树绘制到屏幕上

注意：渲染对象和Dom元素相对应，但这种对应关系不是一对一的，不可见的Dom元素不会被插入渲染树，例如head元素。另外，display属性为none的元素也不会在渲染树中出现（visibility属性为hidden的元素将出现在渲染树中）。
重排(reflow)和重绘(repaint)
当页面元素的几何属性发生改变时会发生重排，当元素的属性的该变没有影响到几何属性时发生重绘。重排一定会发生重绘，但重绘不一定会引起重排。
什么时候发生重排

• 添加或删除可见的DOM元素
• 元素位置发生该变
• 元素的尺寸发生该变（包括：外边距，内边距，边框厚度，宽度，高度等属性）
• 内容改变，例如文本内容该变，或图片被另外一张不同尺寸的图片代替
• 页面渲染器初始化

由于每次重排都会产生计算消耗，大多数浏览器通过队列化修改并批量执行来优化重排过程，获取布局信息的操作会导致队列刷新，如下面的这些属性和方法需要返回最新的布局信息，所以浏览器会刷新渲染队列并引发重排，应尽量避免使用。

• clientWidth、clientHeight、clientTop、clientLeft
• offsetWidth、offsetHeight、offsetTop、offsetLeft
• scrollWidth、scrollHeight、scrollTop、scrollLeft
• scrollIntoView()、scrollIntoViewIfNeeded()
• getComputedStyle()
• getBoundingClientRect()
• scrollTo()

什么时候发生重绘
当页面中元素样式的该变不影响布局时，发生重绘。比如：该变color,background,visibility等
思考下面两段代码：
代码一：

var foo = document.getElementById('fooBar');
foo.style.color = 'blue';
foo.style.marginTop = '30px';

代码二：

var foo = document.getElementById('fooBar');
foo.style.color = 'blue';
var margin = parseInt(foo.style.marginTop);
foo.style.marginTop = (margin + 10) + 'px';

上面两端代码分别发生多少次重排和重绘？
代码一：一次重排和重绘；代码二：一次重排和一次重排和重绘
为什么会这样呢？
当修改一个DOM节点时，修改的操作会先缓存到队列，队列中的修改会在下次UI线程执行时批量更新。修改过的节点会被标记为‘脏’（Dirty），获取脏节点的属性会导致队列中的更新操作立刻执行。所以第二段代码的不同之处在于var margin = parseInt(foo.style.marginTop);引发了一次重排。
如何减少重排和重绘的次数

• 避免对同一个DOM节点进行读和写操作的交叉进行。
• 使用display:none临时从文档中移除，添加完元素后在显示它
• 使用document fragment
• 为需要修改的节点创建一个备份，然后对副本进行操作，修改完后用其代替旧节点（cloneNode）
• 使用position为absolute或fixed的元素创建动画
• window.requestAnimation()
• 虚拟DOM库

参考资料：
How browsers work
《高性能JavaScript》