今天看到一篇文章 Nicholas C. Zakas(professional javascript 作者) 的 Speed up your JavaScript, Part 4
,恍然想起以前好像也碰到过上述现象 ，只是没加深究，找到解决方法后就完事大吉了，当时的代码抽象如下：
方法1 :
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<title>dom测试</title>
</head>
<body>
<div>
<ul id='ul_test'><li>t</li></ul>
</div>
<script type='text/javascript'>
window.onload=function () {
//return;
setInterval(function(){
document.getElementById('ul_test').innerHTML='';
for(var i=0;i<100;i++) {
for(var j=0;j<100;j++) {
var tli=document.createElement('li');
tli.innerHTML=i+'-'+j;
document.getElementById('ul_test').appendChild(tli);
}
}
},1000);
}
</script>
</body>
</html>
运行时 cpu 暴涨 ，长时间 90以上
后来经过多方查看 ，确定了是
多次读写 dom 操作太费cpu ，dom 并没有缓存的操作
，修改后变为;
方法2 :
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<title>dom测试</title>
</head>
<body>
<div>
<ul id='ul_test'><li>t2</li></ul>
</div>
<script type='text/javascript'>
window.onload=function () {
var ilt= document.getElementById('ul_test');
setInterval(function(){
var fragment = [];
for(var i=0;i<100;i++) {
for(var j=0;j<100;j++) {
fragment.push('<li>'+i+'-'+j+'</li>');
}
}
ilt.innerHTML=(fragment.join(''));
},1000);
}
</script>
</body>
</html>
这样的话 ，cpu 最高在50且就一瞬间，
后看了
JavaScript教程--如何提升JavaScript的运行速度（DOM篇）
又实现了一遍：
方法3 :
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<title>dom测试</title>
</head>
<body>
<div>
<ul id='ul_test'><li>t2</li></ul>
</div>
<script type='text/javascript'>
window.onload=function () {
var ilt= document.getElementById('ul_test');
setInterval(function(){
ilt.innerHTML='';
var fragment = document.createDocumentFragment();
for(var i=0;i<100;i++) {
for(var j=0;j<100;j++) {
var tli=document.createElement('li');
tli.appendChild(document.createTextNode(i+'-'+j));
fragment.appendChild(tli);
}
}
ilt.appendChild(fragment);
},1000);
}
</script>
</body>
</html>
方法3 cpu最高 90 ，且也是只有一瞬间 ，比方法1好，但是还有没方法2好
,
说明dom操作还是不如 innerHTML 的 ，innerHTML 只有最后加入 ul 的话才需要结构化 ，而dom的话即使采用节点碎片，新create node 也是挺费资源的，fragment用来加快dom操作还是作用很明显的
。
- 大小: 22.9 KB
分享到：
相关推荐
- 优化性能，避免不必要的DOM操作，如在循环中频繁访问DOM。 在提供的`Dom经验文档.rar`中，可能包含了一些实践经验、技巧和常见问题的解决方案，建议详细阅读以加深理解。`TestDomWebsite`可能是一个测试网站，你...
### Java对DOM的三种操作方式 在Java编程领域中，处理XML文档是一项常见的任务。XML（可扩展标记语言）作为一种标准的数据交换格式，在多种应用场景中扮演着重要角色。为了简化XML文档的操作，Java提供了多种库和...
5. **性能优化**：在大量操作DOM时，应注意性能问题，避免频繁的DOM操作，可以使用文档片段（DocumentFragment）或批处理更新来提高效率。 综上所述，易语言超文本浏览框全套DOM操作源码提供了在易语言环境中处理和...
Ractive.js是一个强大的JavaScript库，被誉为“下一代DOM操作框架”。它设计的核心理念是提供一种更加简单、高效且灵活的方式来处理用户界面，特别是在构建复杂的单页应用程序（SPA）时。Ractive.js通过数据绑定、...
8. **优化性能**：由于频繁的DOM操作可能导致性能下降，可以考虑使用`innerHTML`一次性更新整个表格，或者使用`createDocumentFragment()`来批量处理DOM操作，以减少重绘和回流。 9. **响应式设计**：为了确保表格...
8. **DOM更新优化**：由于DOM操作可能导致浏览器重新渲染，频繁操作会降低页面性能。因此，可以使用`createDocumentFragment`在内存中构建新结构，再一次性插入，或者利用`requestAnimationFrame`在下一次重绘前进行...
DOM（文档对象模型）是一种与...需要注意的是，实际应用中，对DOM的操作往往需要考虑执行的性能，尤其是在处理大量节点或在频繁触发的事件回调中进行DOM操作时。因此，合理的节点选择和操作方法的选择是很重要的。
尽管DOM操作强大且灵活，但频繁的操作会带来性能开销，尤其是在大型文档中。因此，建议批量操作DOM，利用`innerHTML`一次性更改多个元素，或者使用文档片段（DocumentFragment）来减少重绘和回流。 7. **DOM库与...
在实际应用中，如果你需要频繁地进行XML操作，DOM4j通常会是更好的选择。而DOM更适合于那些需要一次性加载整个XML文档并进行全面处理的情况。不论选择哪种方法，理解XML解析的基本原理和不同库的优缺点对于提高代码...
`domdiff` 库提供了一种智能且快速的方法，来对比并应用DOM树中的变化，从而减少不必要的DOM操作，提升页面性能。 ### DOM diff算法 `domdiff` 的核心是DOM diff算法，它借鉴了React等虚拟DOM库的思想，通过对比...
DOM4J则是基于DOM的一种轻量级API，它弥补了DOM的一些不足，比如性能问题和内存消耗。DOM4J通过提供SAX（Simple API for XML）和DOM的接口，使开发者可以选择更适合他们应用场景的方法来处理XML。 在DOM4J 1.6.1中...
jQuery中的DOM操作主要简化了JavaScript原生DOM操作的复杂性，提供了一套更简洁、易用的API。jQuery库使得开发者能够更...在实际项目中，使用jQuery进行DOM操作是高效且直观的，尤其对于那些需要频繁操作DOM的场景。
通过以上这些DOM操作，开发者可以构建动态交互的网页应用。了解并熟练运用这些方法，将有助于提升JavaScript编程能力，特别是在需要频繁与DOM交互的项目中。这份资料中的例子将帮助你更好地理解和应用这些知识点。
3) 是否需要频繁修改XML结构，DOM提供了直接修改XML的能力；4) 是否熟悉特定API，JDOM和DOM4J对于Java开发者可能更具吸引力。 总的来说，DOM适合小到中型的XML文档，提供了完整的文档视图和易于操作的接口；SAX适合...
8. **性能考虑**：虽然DOM操作非常强大，但频繁操作DOM会带来性能问题，因为每次更改都会导致浏览器重新渲染。因此，通常建议使用DOM操作的最佳实践，如批量操作、使用文档碎片（DocumentFragment）或使用CSS类代替...
**DOM操作** DOM，全称为Document Object Model，是HTML和XML文档的一种标准表示方式，它将文档结构化为一个树形结构，使得开发者可以方便地通过JavaScript或其它编程语言来访问和修改页面上的元素。DOM操作是前端...
文档可能会涉及DOM操作的性能提示，如避免频繁的DOM操作，使用文档片段批量插入元素，以及使用事件委托等。 通过这个2010版的DOM帮助文档，开发者不仅可以学习到DOM的基础知识，还能深入理解DOM在实际项目中的应用...
频繁的DOM操作可能导致页面重绘或回流，影响性能。因此，我们需要学会使用`documentFragment`来批量操作DOM，或者利用`requestAnimationFrame`在浏览器准备好绘制下一帧时进行更新。 总的来说，这个“记录我的旅程...
XML（eXtensible Markup Language）...DOM适合小型XML文档和需要频繁访问的情况，而SAX则适合处理大型XML文档或资源有限的环境。理解它们的工作原理和应用场景，能够帮助我们选择最适合的解析策略，从而优化程序性能。
在性能优化方面，频繁的DOM操作会导致页面重绘和回流，降低用户体验。因此，了解DOM操作的最佳实践至关重要，例如使用文档碎片（`document.createDocumentFragment()`）、批量操作（收集多个修改并一次性应用）以及...