JS重排和重绘

浏览器的主要构成部分为用户界面、浏览器引擎(负责窗口管理、Tab进程管理等)、渲染引擎(又叫内核，负责HTML解析、页面渲染)、JS引擎(JS解释器，如Chrome和Nodejs采用的V8)

一、渲染机制

（1） 什么是DOCTYPE及作用

DTD（文本类型定义）是一系列的语法规则，用来定义XML和HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。

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

通俗点说就是DOCTYPE告诉浏览器什么是DTD的，告诉浏览器文档类型。

（2） 浏览器的渲染过程

（3） 重排Reflow

DOM结构中的各个元素都有自己的盒子，这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称为Reflow.

触发Reflow:

当你增加、删除、修改DOM节点的时候，会导致Reflow或者Replain

当你移动DOM的位置，或者是搞个动画的时候

当你修改CSS样式的时候

当你修改网页默认字体的时候

当你Resize窗口的时候，或是滚动的时候

（4） 重绘Repaint

当各种盒子的大小、位置以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是把这些元素都按照各自的特性都绘制一遍，于是页面出现了，这个过程称为Repaint.

触发Repaint:

DOM改变、CSS改变

Repaint是无法避免的，但是可以最大程度降低Repaint

（5） 布局Layout