DOM渲染
浏览器通常要求DOM 实现和JavaScript 实现保持相互独立。例如,在Internet Explorer 中,被称为JScript
的JavaScript 实现位于库文件jscript.dll 中,而DOM 实现位于另一个库mshtml.dll(内部代号Trident)。
这种分离技术允许其他技术和语言,如VBScript,受益于Trident 所提供的DOM 功能和渲染功能。Safari
使用WebKit 的WebCore 处理DOM 和渲染,具有一个分离的JavaScriptCore 引擎(最新版本中的绰号是
SquirrelFish)。Google Chrome 也使用WebKit 的WebCore 库渲染页面,但实现了自己的JavaScript 引擎
V8。在Firefox 中,JavaScript 实现采用Spider-Monkey(最新版中称作TraceMonkey),与其Gecko 渲染
引擎相分离。
function innerHTMLLoop() { for (var count = 0; count < 150; count++) { document.getElementById('here').innerHTML += 'a'; } } function innerHTMLLoop2() { var content = ''; for (var count = 0; count < 15000; count++) { content += 'a'; } document.getElementById('here').innerHTML += content; }
减少DOM操作次数
var alldivs = document.getElementsByTagName('div'); var le = alldivs.length; for (var i = 0; i < alldivs.length; i++) {//死循环 document.body.appendChild(document.createElement('div')) }
这段代码看上去只是简单地倍增了页面中div 元素的数量。它遍历现有div,每次创建一个新的div 并附
加到body 上面。但实际上这是个死循环,因为循环终止条件alldivs.length 在每次迭代中都会增加,它反
映出底层文档的当前状态。
var el = document.getElementById('mydiv'); el.style.borderLeft = '1px'; el.style.borderRight = '2px'; el.style.padding = '5px';
这里改变了三个风格属性,每次改变都影响到元素的几何属性。在这个糟糕的例子中,它导致浏览器重
排版了三次。大多数现代浏览器优化了这种情况只进行一次重排版,但是在老式浏览器中,或者同时有一
个分离的同步进程(例如使用了一个定时器),效率将十分低下。如果其他代码在这段代码运行时查询布
局信息,将导致三次重布局发生。而且,此代码访问DOM 四次,可以被优化。
var el = document.getElementById('mydiv'); el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';
这个例子中的代码修改cssText 属性,覆盖已存在的风格信息。如果你打算保持当前的风格,你可以将
它附加在cssText 字符串的后面。
el.style.cssText += '; border-left: 1px;';
另一个一次性改变风格的办法是修改CSS 的类名称,而不是修改内联风格代码。这种方法适用于那些
风格不依赖于运行逻辑,不需要计算的情况。改变CSS 类名称更清晰,更易于维护;它有助于保持脚本免
除显示代码,虽然它可能带来轻微的性能冲击,因为改变类时需要检查级联表。
var el = document.getElementById('mydiv'); el.className = 'active';