前言：
在DOM節點操作中，innerTHML和createElement都可以實作創建元素，它們實作的功能類似，但是效率卻相差很大，本文分別統計用innerTHML字串拼接方式、innerTHML陣列方式和createElement方式創建1000次元素的時間，來比較它們之間效率的高低，
比較思路：
- 使用new呼叫創建日期物件
- 完成1000次創建相同元素后的時間，減去創建之前的時間，即為程序所用的時間（單位：ms）
- 比較三種方式所用的時間
比較程序：
1. innerTHML字串拼接方式
代碼：
function fn() {
var d1 = +new Date();
var str = '';
for (var i = 0; i < 1000; i++) {
document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
}
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
所用時間：
（重繪頁面測驗3次）
2. innerTHML陣列方式
代碼：
function fn() {
var d1 = +new Date();
var array = [];
for (var i = 0; i < 1000; i++) {
array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
}
document.body.innerHTML = array.join('');
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
所用時間：
（重繪頁面測驗3次）
3. createElement方式
代碼：
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 red';
document.body.appendChild(div);
}
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
所用時間：
（重繪頁面測驗3次）
總結：
- 顯然，三種方式所用的時間：
innerTHML字串拼接方式 >> createElement方式 > innerTHML陣列方式 - 則三種方式的效率高低：
innerTHML陣列方式 > createElement方式 > innerTHML字串拼接方式 - 可以根據實際情況需要，選擇合適的方式
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/165111.html
標籤：其他