频繁DOM操作问题

最新推荐文章于 2021-07-02 15:39:49 发布

最新推荐文章于 2021-07-02 15:39:49 发布 · 759 阅读

文章标签：

#JavaScript #XHTML #J# #XML #HTML #ViewUI

javascript 专栏收录该内容

127 篇文章

订阅专栏

今天看到一篇文章 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操作还是作用很明显的。