<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> innerHTML添加大量元素的效率问题 </title>
</head>
<body>
<!-- innerHTML如果大量添加元素时，会影响性能
解决办法：
1.用document.createElement就可以了
2.要想办法让innerHTML只赋值一次 -->
<script>
// innerHTML 追加元素;加进去后又删了重新赋值
// for(var i = 0 ; i < 10000; i++){
// document.body.innerHTML += "<h3>我是h3</h3>";
// }
// appendChild 追加内容;直接加到循环结束;
// for(var i = 0; i < 10000; i++) {
// var h3 = document.createElement('h3');
// h3.innerHTML = "我是h3";
// document.body.appendChild(h3);
// }
var box = ""; // 创建一个空变量;
for (var i = 0; i < 10000; i++) {
box += "<h3>我是h3</h3>";
}
//虽然还是10000个 h3 标签，但是只赋值了一次
document.body.innerHTML = box;
</script>
</body>
</html>
网友评论