摘要：
浏览器下载完页面中所有的组件 HTML标记，css,js,图片面性 之后，会解析生成两个内部数据结构DOM树 表示页面结构渲染树 表示DOM节点如何显示DOM树中每一个需要显示的节点在渲染树中都有一个对应的节点（隐藏的DOM元素没有）。这样的节点被称为frames 或boxes，一旦DOM树和渲染树构建完成，浏览器就开始显示页面元素。重绘 完成重排后，浏览器会重新绘制受影响的部分到屏幕中，叫重绘。-重排 而DOM的变化影响到了元素的几何属性（宽和高）浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效，并重新构造渲染树重绘和重排代价非常昂贵，会导致Web应用程序的UI响应缓慢重排.. 阅读全文
摘要：
为了得到需要的元素列表，我们会组合使用DOM API来得到，这种繁密的过程效率低下。新版本浏览器提供了querySelectorAll css选择器将会快2至6倍document.querySelectorAll('#menu a');API document.getElementById('menu').getElementsByTagName('a');两者区别 css选择器获得是nodeList 包含着匹配节点的类数组对象，非html集合,不会对应实时的文档对象，为静态列表后者为html集合，会有性能问题 toArrayfunction t 阅读全文
摘要：
Walking the DOMDOM提供很多API，在相应操作中，选择最高效的API.一、用childNodes获得元素集合，再遍历二、用nextSibling来获取每个相邻元素， firstChild + nextSibling 加do while 写法var el = document.getElementById('mydiv'), ch = el.firstChild, name = '';do{ name = ch.nodeName;} while( ch = ch.nextSibling); while ch = ch.nextSibling nex 阅读全文