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';

巴特西

DOM渲染

最新文章

热门文章