Question

我试图让我的网站做的事情变得相当复杂，需要做的一些事情需要花费足够长的时间才能显着延迟。

主要是，向文档中添加内容会减慢速度以及我正在使用的jquery动画。

我使用document.createElement("div")创建元素而不是仅仅执行document.write("<div id='someId'></div>")，动画是使用.animation()的自定义动画;

我想知道如何继续像我一样继续添加内容，但是每次我想添加内容时都会阻止浏览器冻结。

有任何关于加快速度的建议，以减少延迟吗？关于javascript编程中应该避免哪些因素会增加延迟的提示会非常有用。

Answer 1

这听起来更像是你想要提高DOM交互性能而不是javascript，所以就这样：

是的，document.write很糟糕，它阻止了额外的加载（在页面加载完成之前执行的任何JS基本上都需要停止所有其他处理 - 现代浏览器，如Safari（和代理Chrome）和Firefox做一定程度的内容预加载以防止加载阻塞但后续样式解析等在很大程度上被阻止。
document.createElement通常是最好的解决方案，尽管它们在某些情况下只是在一个元素上操作innerHTML可能会更快 - 但这还没有跨浏览器兼容（我认为innerHTML在Firefox 3.5之前不存在）并且表演特征很棘手。
减少最初加载的内容量 - 例如。如果您有大量内容（或需要大型脚本的内容），请尝试延迟加载，直到初始页面加载完成为止。
哦，对于动画，你应该看看CSS动画，它们比任何JS实现都要好得多，但它们只出现在Safari（以及代理Chrome）和Firefox 3.5中 - 绝对不在IE中： - （< / LI>

在JavaScript性能方面，避免使用with和getter / setter，就像瘟疫一样，在大多数现代JS实现中你应该没问题。

Answer 2

我知道这已经晚了几年，但迟迟没有考虑过这个问题出现在google的javascript动画优化列表的顶部。

如果你需要向DOM添加大量元素并且不想使用innerHTML这样做，你可以加快速度，我相信首先将元素添加到documentFragment然后立即注入documentFragment进入DOM。我记得读过DOM注入是使用标准API创建和添加元素的最慢的部分。 documentFragment允许您一次性将所有内容注入DOM，从而消除因多次调用appendChild或其他插入方法而导致的大量开销。在插入与插入DOM相反的documentFragment时，appendChild和其他插入方法可能不会产生相同的成本。我希望我能找到我读过的文章，因为它有一些非常好的基准测试和解释。我相信你可以通过搜索找到更多信息。

一如既往地使用哪种方法应通过逐案测试来确定。最终你可能会根据元素，数量和用途的结构来学习使用哪一个。

PS。样式和documentFragment可能存在问题，但我不记得对它们说了什么，无论哪种方式都值得一试。

Answer 3

JQuery非常适合操纵DOM。我会看看他们的代码，以获得一些想法。或者，看看我是多么懒惰，我只是使用他们的东西。

在其中一个播客中，Jeff Atwood提到你必须疯狂编写自己的javascript ...在使用JQuery之后，我不得不同意他的看法。

Answer 4

虽然我是jQuery的忠实粉丝，并且它使开发变得更加容易，但请注意，jQuery语句（或任何JavaScript库）永远不会与纯JavaScript中的语义等价物一样快因为额外的开销。

话虽如此，每当我想加速我的JavaScript时，这些都是我的goto引用。

http://home.earthlink.net/~kendrasg/info/js_opt/

http://www.miislita.com/searchito/javascript-optimization.html

Answer 5

有文件片段功能，可以让生活更轻松。以下是使用示例。

function appendDivs(element){
    var fragment = document.createDocumentFragment();
    for(var i=0;i<10;i++){
        var div = document.createElement("div");
        fragment.appendChild(div);           
    }
    element.appendChild(fragment);
}

要获得完整参考，您可以在我的博客上看到此post。

Answer 6

大多数人都感到惊讶的是，使用innerHTML实际上是操纵DOM的最快方法。

例如，您可以看到一个基准here。

Answer 7

// Some functions for easier coding in DOM

function createEl(el){
  return document.createElement(el);
}
function addElBody(el){
  return document.body.appendChild(el);
}

function addElChild(el, child){ //el- parent
  return el.appendChild(child);
}
// Example : 
var container=createEl('div');
container.setAttribute('id', 'container');
addElBody(container);

var item=createEl('ul');
item.setAttribute('id', 'list');
addElBody(item);
addElChild(container, item);

优化javascript的提示

7 个答案: