JS基礎04—for循環操作DOM、for循環拼接字符串

for循環操作DOM

//獲取起始時間
const startTime = new Date().getTime()
//獲取body
const bodyDom = document.getElementsByTagName("body")[0]
for (let i = 0; i < 10000; i++) {
 	const div = document.createElement("div")
 	div.innerHTML = `我是第${i}個`
 	bodyDom.appendChild(div)
 }
//獲取結束時間
const endTime = new Date().getTime()
//時間差
console.log(endTime - startTime)

for循環 拼接字符串

//獲取起始時間
const startTime = new Date().getTime()
//獲取body
const bodyDom = document.getElementsByTagName("body")[0]
let str = ""
for (let i = 0; i < 10000; i++) {
	str += `<div>${i}</div>`
}
bodyDom.innerHTML += str
//獲取結束時間
const endTime = new Date().getTime()
//時間差
console.log(endTime - startTime)

綜合對比，for循環操作dom耗時更多。因此，不能頻繁生成、插入DOM，這樣耗費性能更大。盡量采取拼接字符串的形式。