什么是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、clientLeftoffsetWidth、offsetHeight、offsetTop、offsetLeftscrollWidth、scrollHeight、scrollTop、scrollLeftscrollIntoView()、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》