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，这样耗费性能更大。尽量采取拼接字符串的形式。