我试图让我的网站做的事情变得相当复杂，一些需要完成的事情需要花费足够长的时间，从而导致明显的延迟。
主要是，向文档中添加内容会减慢我正在使用的 jquery 动画的速度。
我使用document.createElement("div")创建元素而不是仅仅做document.write("<div id='someId'></div>")，并且动画是使用.animation()的自定义动画；
我想知道如何才能继续按原样添加内容，但要防止浏览器在每次我想添加内容时冻结。
对于加快速度以减少延迟有什么建议吗？ 关于在 javascript 编程中避免哪些会导致延迟增加的提示将非常有帮助。
【问题讨论】：
标签： javascript performance optimization
这听起来更像是您想提高 DOM 交互性能而不是 javascript，所以在这种情况下：
就 JavaScript 性能而言，请避免使用 with 和 getter/setter 之类的瘟疫，并且在大多数现代 JS 实现中应该没问题。
【讨论】：
我知道这已经晚了几年，但总比不考虑这个问题出现在 google 的 javascript 动画优化列表顶部。
如果您需要向 DOM 添加大量元素并且不想使用 innerHTML 这样做，您可以通过先将元素添加到 documentFragment 然后一次性注入 documentFragment 来加快速度进入 DOM。我记得读过 DOM 注入是使用标准 API 创建和添加元素的最慢部分。 documentFragment 允许您一次性将其所有内容注入到 DOM 中，从而消除了因多次调用 appendChild 或其他插入方法而导致的大量开销。 appendChild 和其他插入方法在插入到 documentFragment 时与插入到 DOM 中的成本不同。我希望我能找到我读到的这篇文章，因为它有一些非常好的基准测试和解释。我相信您可以通过搜索找到更多信息。
与往常一样，应根据具体情况通过测试来确定使用哪种方法。最终，您可能会根据元素的结构、数量和用途来了解使用哪一种。
PS。样式和 documentFragment 可能存在问题，但我不记得关于它们的内容，无论哪种方式都值得一试。
【讨论】：
JQuery 非常适合操作 DOM。我会看看他们的代码以获得一些想法。或者，看我有多懒，我就用他们的东西。
在其中一个播客中，Jeff Atwood 提到你必须发疯才能编写自己的 javascript...在使用 JQuery 之后，我不得不同意他的看法。
【讨论】：
虽然我是 jQuery 的忠实粉丝，它使开发变得更加容易，但请注意，jQuery 语句（或任何 JavaScript 库中的）永远不会像其在纯 JavaScript 中的语义等价物一样快因为额外的开销。
话虽如此，当我想加快 JavaScript 速度时，这些都是我的 goto 参考。
http://home.earthlink.net/~kendrasg/info/js_opt/
http://www.miislita.com/searchito/javascript-optimization.html
【讨论】：
有文档片段功能，可以让生活更轻松。这是使用示例。
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。
【讨论】：
令大多数人惊讶的是，使用 innerHTML 实际上是操作 DOM 的最快方法。
例如，您可以查看一个基准 here。
【讨论】：
<li>...</li><li>...</li>... 如果你用 foo.innerHTML += 将 html 添加到列表的末尾// 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);
【讨论】：