Minimize DOM Access
javascript 之 DOM 优化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="mylist1"></ul>
<ul id="mylist2"></ul>
<ul id="mylist3"></ul>
<script>
var data = [
{
'name': 'a',
'url': 'http://www.a.com/'
},
{
'name': 'b',
'url': 'http://www.b.com/'
}
]
function appendDataToElement(appendToElement, data) {
var a
var li
var i = 0
var max = data.length
for (; i < max; i++) {
a = document.createElement('a')
a.href = data[i].url
a.appendChild(document.createTextNode(data[i].name))
li = document.createElement('li')
li.appendChild(a)
appendToElement.appendChild(li)
}
}
// 离线操作DOM树：对DOM树结构进行较大的改变时，需要先将元素脱离文档流，然后进行改变操作，最后再放回到文档流中
// 减少重排的一个方法是通过改变 display 属性，临时从文档上移除 <ul> 元素然后再恢复它
var ul1 = document.getElementById('mylist1')
ul1.style.display = 'none'
appendDataToElement(ul1, data)
ul1.style.display = 'block'
// 在文档之外创建并更新一个文档片断，然后将它附加在原始列表上
var fragment = document.createDocumentFragment()
appendDataToElement(fragment, data) // 循环添加，多次操作。拼接字符串一次性添加不是一样吗。
document.getElementById('mylist2').appendChild(fragment)
// 创建要更新节点的副本，然后在副本上操作，最后用新节点覆盖老节点
var old = document.getElementById('mylist3')
var clone = old.cloneNode(true)
appendDataToElement(clone, data)
old.parentNode.replaceChild(clone, old)
</script>
</body>
</html>
