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

本文主要是介绍原生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 (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>

这篇关于原生js动态创建元素的性能对比：直接创建并设置样式、字符串拼接、数组的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！