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,这样耗费性能更大。尽量采取拼接字符串的形式。
posted @ 2020-06-04 14:23  麦子同学  阅读(2088)  评论(0编辑  收藏  举报