1. 映射
1.當頁面結構發生變化的時候，元素集合也會跟着發生改變；
2.當操作元素集合的時候，頁面結構也會跟着改變；
2. 頁面綁定 — 直接對DOM進行操作
問題：引發多次迴流
注： 迴流： 當頁面由局部變動的時候，整個頁面都重新加載；
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li><span>0</span>一個時期的目標任務。</li>
<li><span>1</span>提出當前和今後任務。</li>
</ul>
<script src="json1.js"></script>
<script>
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var ary = [
{
"title": "講話",
"desc": "深刻分析反腐敗鬥爭依然嚴峻複雜的形勢，提出當前和今後一個時期的目標任務。"
},
{
"title": "簡政放權",
"desc": "確定完善高新技術企業認定辦法，使更多創新型企業得到政策支持。"
},
{
"title": "講話",
"desc": "深刻分析反腐敗鬥爭依然嚴峻複雜的形勢，提出當前和今後一個時期的目標任務。"
},
{
"title": "簡政放權",
"desc": "確定完善高新技術企業認定辦法，使更多創新型企業得到政策支持。"
},
{
"title": "講話",
"desc": "深刻分析反腐敗鬥爭依然嚴峻複雜的形勢，提出當前和今後一個時期的目標任務。"
},
{
"title": "簡政放權",
"desc": "確定完善高新技術企業認定辦法，使更多創新型企業得到政策支持。"
}
];
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover=function(){
this.style.background='lightBlue';
};
aLi[i].onmouseout=function(){
this.style.background='white';
};
}
for(var i=0; i<ary.length; i++){
var cur=ary[i];
var oLi=document.createElement('li');
oLi.innerHTML='<span>'+(i+2)+'</span>'+cur.desc;
oUl.appendChild(oLi); // 直接DOM操作
}
</script>
</body>
</html>3. 頁面綁定 —- 字符串拼接
- 工作中的用的最多的-字符串拼接；
- 字符串拼接的優點：
1.簡單
2.性能高：只對頁面進行一次的DOM操作；不會引發太多的迴流 - 字符串拼接的缺點：
相當於把頁面中的所有內容都拿出來，重新進行字符串拼接，拼接成一個新的字符串，再放入頁面，那麼每個元素以前的事件，就都沒有了；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li><span>0</span>一個時期的目標任務。</li>
<li><span>1</span>提出當前和今後任務。</li>
</ul>
<script src="json1.js"></script>
<script>
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var ary = [
{
"title": "講話",
"desc": "深刻分析反腐敗鬥爭依然嚴峻複雜的形勢，提出當前和今後一個時期的目標任務。"
},
{
"title": "簡政放權",
"desc": "確定完善高新技術企業認定辦法，使更多創新型企業得到政策支持。"
},
{
"title": "講話",
"desc": "深刻分析反腐敗鬥爭依然嚴峻複雜的形勢，提出當前和今後一個時期的目標任務。"
},
{
"title": "簡政放權",
"desc": "確定完善高新技術企業認定辦法，使更多創新型企業得到政策支持。"
},
{
"title": "講話",
"desc": "深刻分析反腐敗鬥爭依然嚴峻複雜的形勢，提出當前和今後一個時期的目標任務。"
},
{
"title": "簡政放權",
"desc": "確定完善高新技術企業認定辦法，使更多創新型企業得到政策支持。"
}
];
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover=function(){
this.style.background='lightBlue';
};
aLi[i].onmouseout=function(){
this.style.background='white';
};
}
var str='';
for(var i=0; i<ary.length; i++){
str+='<li><span>'+(i+2)+'</span>'+ary[i].desc+'</li>'
}
oUl.innerHTML+=str; //相當於： oUl.innerHTML=oUl.innerHTML+str;
</script>
</body>
</html>4. 文檔碎片化
注意 文檔碎片的釋放–堆內存的釋放
使用文檔碎片在某些情況下可以提高頁面效率
javascript操作dom是一個很耗性能的過程，在某些情況下，不得不進行dom循環操作，我們每次對dom的操作都會觸發”重排”，這嚴重影響到能耗，一般通常採取的做法是儘可能的減少dom操作來減少”重排”。
面對循環操作dom的過程，我們選擇使用文檔碎片（creatDocumentFragment），將需要添加到dom中的內容一次性添加到文檔碎片中，然後將文檔碎片添加到dom樹，這樣就可以有效的減少操作dom的次數。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li><span>0</span>一個時期的目標任務。</li>
<li><span>1</span>提出當前和今後任務。</li>
</ul>
<script src="json1.js"></script>
<script>
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var ary = [
{
"title": "講話",
"desc": "深刻分析反腐敗鬥爭依然嚴峻複雜的形勢，提出當前和今後一個時期的目標任務。"
},
{
"title": "簡政放權",
"desc": "確定完善高新技術企業認定辦法，使更多創新型企業得到政策支持。"
},
{
"title": "講話",
"desc": "深刻分析反腐敗鬥爭依然嚴峻複雜的形勢，提出當前和今後一個時期的目標任務。"
},
{
"title": "簡政放權",
"desc": "確定完善高新技術企業認定辦法，使更多創新型企業得到政策支持。"
},
{
"title": "講話",
"desc": "深刻分析反腐敗鬥爭依然嚴峻複雜的形勢，提出當前和今後一個時期的目標任務。"
},
{
"title": "簡政放權",
"desc": "確定完善高新技術企業認定辦法，使更多創新型企業得到政策支持。"
}
];
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover=function(){
this.style.background='lightBlue';
};
aLi[i].onmouseout=function(){
this.style.background='white';
};
}
var frg=document.createDocumentFragment(); //文檔碎片(當把文檔碎片付給某節點時，只是把文檔碎片中的子節點付給了某節點，它本身並沒有插入到這個節點中)
for(var i=0; i<ary.length; i++){
var cur=ary[i];
var oLi=document.createElement('li'); //創建一個節點
oLi.innerHTML='<span>'+(i+2)+'</span>'+cur.desc; // 給節點添加內容
frg.appendChild(oLi); // 把我們要插入頁面的內容放入frg裏；
}
oUl.appendChild(frg); // 講frg文檔插入到ul的末尾
frg=null; //堆內存的釋放；爲了提高瀏覽器的性能；
</script>
</body>
</html>