dom渲染方面的优化浅谈

　　今天分享一个面试经验，上周面试中一位印象很深的面试官（主要长得很帅），问我了一个我至今印象很深入的问题，固然不是什么你以后的职业规划啊，你工做中遇到过哪些问题啊之类的。原起于一道面试题，小伙伴们能够想一想这题，当时我给出的答案是，li+=完了以后，一次性渲染，不要在for循环中屡次渲染。我认为我已经回答到点上了，然鹅。。。。。我要是能懂面试官，我如今也不会在写博客找工做了，当时这位面试官看到个人答案以后，可能认为我说的比较笼统，问了我为何一次渲染要比屡次渲染性能更优呢？？wtf！！这什么问题？？点在哪里？我该怎么说？这问题当时问的我，就像有人问你，1+1为何等于2同样，固然我并非说这面试官问的很差，或者故意刁难，只是当时我没有get到他问我这个点在哪里，后来查阅了资料发现，其实这位面试官，真正想让我回答的是，关于页面重排与重绘。

　　接下来就是很关键的一句话，dom操做很昂贵！正由于这句话，页面元素优化方面，基本从这个点出发。那么什么是dom重排，什么又是dom重绘呢？这就要从dom树提及了。

　　浏览器下载完页面中的全部组件——HTML标记、JavaScript、CSS、图片以后会解析生成两个内部数据结构——DOM树和渲染树。

在文档初次加载时，浏览器引擎经过解析 html文档 构建一棵DOM树，以后根据DOM元素的几何属性构建一棵用于展现渲染的渲染树。渲染树中的节点被称为“帧”或“盒",符合CSS模型的定义，可理解为（包括理解页面元素为一个具备大小，填充，边距，边框和位置的盒子）。因为隐藏元素不须要显示，渲染树中并不包含DOM树中隐藏的元素（知道这点有用）。 当渲染树构建完成，浏览器把每个元素放到正确的位置上，而后再根据每个元素的其余样式，绘制页面。

因为浏览器的流布局，对渲染树的计算一般只须要遍历一次就能够完成。但table及其内部元素除外，它可能须要屡次计算才能肯定好其在渲染树中节点的属性，一般要花3倍于同等元素的时间。这也是为何咱们要避免使用table作布局的一个缘由。

　　重绘：是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性（上面说到的其余属性）。浏览器会根据元素的新属性从新绘制，使元素呈现新的外观。重绘不会带来从新布局，并不必定伴随重排。

　　重排：当DOM的变化影响了元素的几何属性（宽或高），浏览器须要从新计算元素的几何属性，一样其余元素的几何属性和位置也会所以受到影响。浏览器会使渲染树中受到影响的部分失效，并从新构造渲染树。这个过程称为重排。重排必定伴随着重绘。