原生JS批量创建DOM性能对比，以及事件代理绑定绑定事件

最新推荐文章于 2022-12-05 18:23:54 发布

自夏

最新推荐文章于 2022-12-05 18:23:54 发布

阅读量389

点赞数 1

分类专栏： javascript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_39970857/article/details/121667221

版权

javascript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title> 事件代理 </title>
	</head>
	<script type="text/html" id="enment">
		<li> {{num}} <button>按钮</button> </li>
	</script>
	<body>
		<p>动态创建50li的办法</p>
	</body>

	<script>
		// 操作DOM创建以及使用 文档碎片 减少页面重绘
		console.time()
		var box = document.createDocumentFragment(); //  文档碎片
		var ul = document.createElement('ul'),
			list = [];
		for (let i = 0; i < 50; i++) {
			var li = document.createElement('li');
			li.innerHTML = `${i} <Button> 我是第 ${i} </Button>`
			list.push(li)
			box.appendChild(li)
		}
		document.body.onclick = function(e){ // e为事件源
			console.log(e === window.event); // 如果回调没有事件源 ，那window上面的event就是当前的事件源
			console.log(e.target === window.event.srcElement); // 如果没有事件源对象 同样 window.event上面会有当前的事件源对象
			e.target.parentNode.remove()
		}
		document.body.append(box)
		console.timeEnd()
	</script>


	<script>
		//字符串创建 渲染最快性能最低
		console.time()
		var list = '';
		for (let i = 0; i < 50; i++) {
			list += `<li>${i} <Button> 我是第 ${i} </Button></li>`;
		}
		var ul = document.createElement('ul').innerHTML = list;
		document.body.innerHTML=(ul);
		document.body.onclick = function(e){ // e为事件源
			console.log(e === window.event); // 如果回调没有事件源 ，那window上面的event就是当前的事件源
			console.log(e.target === window.event.srcElement); // 如果没有事件源对象 同样 window.event上面会有当前的事件源对象
			e.target.parentNode.remove()
		}
		console.timeEnd()
	</script>
	
	<script>
	// 使用模板方式创建 性能优于DOM创建
	console.time()
		var ul = document.createElement('ul')
		 men =  document.getElementById('enment').innerHTML
		 list = '';
		for (let i = 0; i < 50; i++) {
			list += men.replace(/{{(.*?)}}/,i);
		}
		ul.innerHTML = list;
		document.body.append(ul);
		document.body.onclick = function(e){ // e为事件源
			console.log(e === window.event); // 如果回调没有事件源 ，那window上面的event就是当前的事件源
			console.log(e.target === window.event.srcElement); // 如果没有事件源对象 同样 window.event上面会有当前的事件源对象
			e.target.parentNode.remove()
		}
		console.timeEnd()
	</script>
</html>

自夏

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS批量创建DOM性能对比，以及事件代理绑定绑定事件

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> 事件代理 </title> </head> <script type="text/html" id="enment"> <li> {{num}} <button>按钮</button> </li> </script&
复制链接

扫一扫

专栏目录