[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body div {
width: 30px;
height: 2px;
border: 1px solid #ee3333;
}
</style>
</head>
<body>
<script>
// 利用 innerHTML 拼接字符串的方式 (添加10000个div) (耗时约很多很多ms） 最慢
// function f() {
// var date = +new Date();
// for (var i = 1; i <= 1000; i++) {
// document.body.innerHTML += "<div></div>"
// }
// var date1 = +new Date();
// console.log(date1-date);
// }
// f();
// 利用 innerHTML 数组赋值的方式 结构稍微复杂 （添加10000个div) （耗时约15ms) 最快
function f() {
var date = +new Date();
var str = [];
for (var i = 1; i <= 10000; i++) {
str.push('<div></div>');
}
str = str.join('');
document.body.innerHTML = str;
var date1 = +new Date();
console.log(date1-date);
}
f();
// 利用 createElement 结构清晰简单 (添加10000个div) (耗时约20ms) 比最快慢一丢丢
// function f() {
// var date = +new Date();
// for (var i = 1; i <= 10000; i++) {
// var div = document.createElement('div');
// document.body.appendChild(div);
// }
// var date1 = +new Date();
// console.log(date1 - date);
// }
// f();
</script>
</body>
</html> | 
收藏
淘帖
踩
