原生js动态创建元素的性能对比：直接创建并设置样式、字符串拼接、数组

最新推荐文章于 2021-08-03 21:45:05 发布

每一天，每一步

最新推荐文章于 2021-08-03 21:45:05 发布

阅读量262

点赞数

分类专栏： javaScript 文章标签： js javascript html css

本文链接：https://blog.csdn.net/u010234868/article/details/118118801

版权

javaScript 专栏收录该内容

135 篇文章 12 订阅

订阅专栏

1. 直接创建并设置样式

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
<script>
	function fn() {
		var d1 = +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 #000';
			document.body.appendChild(div);
		}
		var d2 = +new Date();
		console.log(d2 - d1); // 89  77 毫秒  每刷新一次 数据不同
	}
	fn();
</script>
</html>

2. 字符串拼接

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
<script>
	function fn() {
		var d1 = +new Date();
		// var arr = [];
		// var str = '';
		for (var i = 0; i < 1000; i++) {
			document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid #000;"></div>';
		}
		var d2 = +new Date();
		console.log(d2 - d1); // 6615 毫秒  每刷新一次 数据不同
	}
	fn();
</script>
</html>

3. 数组

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
<script>
	function fn() {
		var d1 = +new Date();
		var arr = [];
		for (var i = 0; i < 1000; i++) {
			arr.push('<div style="width:100px; height:2px; border:1px solid #000;"></div>');
		}
		document.body.innerHTML = arr.join(''); // 简单结构使用
		var d2 = +new Date();
		console.log(d2 - d1); // 18 毫秒  每刷新一次 数据不同
	}
	fn();
</script>
</html>

每一天，每一步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js动态创建元素的性能对比：直接创建并设置样式、字符串拼接、数组

1. 直接创建并设置样式<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body></body><script> function fn() { var d1 = +new Date(); // 日期对象转换为数值 for
复制链接

扫一扫