节点操作 3种动态创建元素的区别 write() innerHtml createElement() 执行效率

最新推荐文章于 2022-02-21 23:16:48 发布

昵称2-20个字符

最新推荐文章于 2022-02-21 23:16:48 发布

阅读量177

点赞数

分类专栏： javascript demo 文章标签： javascript 节点操作

本文链接：https://blog.csdn.net/weixin_39517183/article/details/106484355

版权

javascript 同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

demo

21 篇文章 0 订阅

订阅专栏

三种动态创建元素区别

document.write();
element.innerHtml;
document.createElement();

区别：

document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘；

<body>
	<div>我的内容将会被write()重绘会123</div>
	<script>
		document.write(123);
	</script>
</body>

innerHtml是将内容写入某个DOM节点，不会导致页面全部重绘；

<body>
	<div>我的内容将会被write()重绘会123</div>
	我的内容将会被write()重绘会123
	我的内容将会被write()重绘会123
	<script>
		div.innerHTML='我是通过js的innerHTML生成的内容';
	</script>
</body>

innerHtml 创建多隔元素效率更高(不要拼接字符串，采取数组形式拼接)，结构稍微复杂；
innerHTML拼接字符串的形式效率测试demo

<body>
	<div>我的内容将会被write()重绘会123</div>
	我的内容将会被write()重绘会123
	我的内容将会被write()重绘会123
	<script>
		function fn(){
			var timer1=+new Date();//获取时间戳
			var box=document.getElementsByTagName("div")[0];
			for(var i=0;i<=1000;i++){
				box.innerHTML+='我是通过js的innerHTML生成的内容';
			}
			var timer2=+new Date();
			console.log(timer2-timer1);
		}
		fn();//返回时间差在130左右
	</script>
</body>

innerHTML拼接字符串的形式效率测试demo

<body>
	<div>我的内容将会被write()重绘会123</div>
	我的内容将会被write()重绘会123
	我的内容将会被write()重绘会123
	<script>
		function fn(){
			var timer1=+new Date();//获取时间戳
			var arr=[];
			
			for(var i=0;i<=1000;i++){
				arr.push('<div style="width:100px;height:2px;border:1px solid yellow"></div>');
			}
			document.body.innerHTML=arr.join('');
			
			var timer2=+new Date();
			console.log(timer2-timer1);
		}
		fn();//返回时间差在3毫秒左右
	</script>
</body>

createElement() 创建多个元素效率稍低一点点，但是结构更清晰；
createElement()效率测试demo

<body>
	<div>我的内容将会被write()重绘会123</div>
	我的内容将会被write()重绘会123
	我的内容将会被write()重绘会123
	<script>
		function fn(){
			var timer1=+new Date();//获取时间戳
			
			for(var i=0;i<=1000;i++){
				var div=document.createElement("div");
                div.style.width='100px';
                div.style.height="2px";
                div.style.border="1px solid red"
				document.body.appendChild(div)
			}
			var timer2=+new Date();
			console.log(timer2-timer1);
		}
		fn();//返回时间差在13毫秒左右
	</script>
</body>