《高性能javascript》读书笔记——DOM编程3

1、使用innerHTML和纯DOM方法创建的html表，在老浏览器中，innerHTML更快，在新浏览器中差距不大，

     甚至在最新的基于webkit的浏览器上，DOM方法更快

2、如果在一个性能苛刻的操作中更新一大块 HTML 页面， innerHTML 在大多数浏览器中执行更快。但对
于大多数日常操作而言，其差异并不大，所以你应当根据代码可读性，可维护性，团队习惯，代码风格来
综合决定采用哪种方法。

3、一般来说，对于任何类型的 DOM 访问，如果同一个 DOM 属性或方法被访问一次以上，最好使用一个
局部变量缓存此 DOM 成员。当遍历一个集合时，第一个优化是将集合引用存储于局部变量，并在循环之
外缓存 length 属性。然后，如果在循环体中多次访问同一个集合元素，那么使用局部变量缓存它。

4、元素节点和节点不一样，在许多情况下，只有元素节点需要被访问

5、选择器API querySelectorAll()比getElement的选择更快，query选择符选出来的元素及元素数组是静态的，

而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变．

6.offsetTop, offsetLeft, offsetWidth, offsetHeight，
scrollTop, scrollLeft, scrollWidth, scrollHeight，
clientTop, clientLeft, clientWidth, clientHeight的应用，布局信息由这些属性和方法返回最新的数据，

所以浏览器不得不运行渲染队列中待改变的项目并重新排版以返回正确的值，降低响应速度。

7.使用cssText 属性可以将所有改变合在一起执行，达到同样的效果而效率更高

var el = document.getElementById('mydiv');

el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';
这个例子中的代码修改 cssText 属性，覆盖已存在的风格信息。如果你打算保持当前的风格，你可以将
它附加在 cssText 字符串的后面。el.style.cssText += '; border-left: 1px;';
8.另一个一次性改变风格的办法是修改 CSS 的类名称，而不是修改内联风格代码。这种方法适用于那些
风格不依赖于运行逻辑，不需要计算的情况。改变 CSS 类名称更清晰，更易于维护；它有助于保持脚本免
除显示代码，虽然它可能带来轻微的性能冲击，因为改变类时需要检查级联表。
var el = document.getElementById('mydiv');
el.className = 'active';
9.当你需要对 DOM 元素进行多次修改时，你可以通过以下步骤减少重绘和重排版的次数：
从文档流中摘除该元素，对其应用多重改变，将元素带回文档中。有三种基本方法可以将 DOM 从文档中摘除：
隐藏元素，进行修改，然后再显示它。
使用一个文档片断在已存 DOM 之外创建一个子树，然后将它拷贝到文档中。

var fragment = document.createDocumentFragment();
appendDataToElement(fragment, data);
document.getElementById('mylist').appendChild(fragment);

将原始元素拷贝到一个脱离文档的节点中，修改副本，然后覆盖原始元素。

var old = document.getElementById('mylist');
var clone = old.cloneNode(true);
appendDataToElement(clone, data);
old.parentNode.replaceChild(clone, old);
推荐尽可能使用文档片断（第二种解决方案）因为它涉及最少数量的 DOM 操作和重排版。

唯一潜在的缺点是，当前文档片断还没有得到充分利用，开发者可能不熟悉此技术。

10.如果大量的元素使用了 :hover 那么会降低反应速度。此问题在 IE8 中更显著。