<!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) (耗时约900ms） 最慢 // function f() { // var date = +new Date(); // for (var i = 1; i <= 10000; 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>
原文：https://www.cnblogs.com/nigori/p/10765011.html