1. Mapping
1. When the page structure changes, the element collection also changes. 2. When working with collections of elements, the page structure also changes;
2. Page Binding - Operate directly on DOM
Problem: causing multiple backflows
Note: Backflow: When the page changes locally, the entire page is reloaded;
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li><span>0</span>Target tasks for a period of time.</li>
<li><span>1</span>Propose current and future tasks.</li>
</ul>
<script src="json1.js"></script>
<script>
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var ary = [
{
"title": "speech",
"desc": "Deeply analyze the serious and complex situation of the anti-corruption struggle, and put forward the goals and tasks for the current and future period."
},
{
"title": "Streamlining government and delegating authorities",
"desc": "Determine and improve the methods for identifying high-tech enterprises so that more innovative enterprises can receive policy support."
},
{
"title": "speech",
"desc": "Deeply analyze the serious and complex situation of the anti-corruption struggle, and put forward the goals and tasks for the current and future period."
},
{
"title": "Streamlining government and delegating authorities",
"desc": "Determine and improve the methods for identifying high-tech enterprises so that more innovative enterprises can receive policy support."
},
{
"title": "speech",
"desc": "Deeply analyze the serious and complex situation of the anti-corruption struggle, and put forward the goals and tasks for the current and future period."
},
{
"title": "Streamlining government and delegating authorities",
"desc": "Determine and improve the methods for identifying high-tech enterprises so that more innovative enterprises can receive policy support."
}
];
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); // Direct DOM operation
}
</script>
</body>
</html>3. Page Binding - String Stitching
Work with the most - string stitching; Advantages of string stitching:
1. Simple
2. High performance: DOM only once on the page; does not cause too much backflow
Disadvantages of string stitching:
2. High performance: DOM only once on the page; does not cause too much backflow
It is equivalent to taking out all the contents of the page, splicing the strings again, splicing them into a new string, and putting them on the page, then there will be no previous events for each element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li><span>0</span>Target tasks for a period of time.</li>
<li><span>1</span>Propose current and future tasks.</li>
</ul>
<script src="json1.js"></script>
<script>
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var ary = [
{
"title": "speech",
"desc": "Deeply analyze the serious and complex situation of the anti-corruption struggle, and put forward the goals and tasks for the current and future period."
},
{
"title": "Streamlining government and delegating authorities",
"desc": "Determine and improve the methods for identifying high-tech enterprises so that more innovative enterprises can receive policy support."
},
{
"title": "speech",
"desc": "Deeply analyze the serious and complex situation of the anti-corruption struggle, and put forward the goals and tasks for the current and future period."
},
{
"title": "Streamlining government and delegating authorities",
"desc": "Determine and improve the methods for identifying high-tech enterprises so that more innovative enterprises can receive policy support."
},
{
"title": "speech",
"desc": "Deeply analyze the serious and complex situation of the anti-corruption struggle, and put forward the goals and tasks for the current and future period."
},
{
"title": "Streamlining government and delegating authorities",
"desc": "Determine and improve the methods for identifying high-tech enterprises so that more innovative enterprises can receive policy support."
}
];
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; //Equivalent to: oUl.innerHTML=oUl.innerHTML+str;
</script>
</body>
</html>4. Document fragmentation
Note the release of document fragments - the release of heap memory
Using document fragmentation can improve page efficiency in some cases
The javascript operation DOM is a very performance-intensive process. In some cases, it is necessary to do a DOM loop operation. Every time we operate on the dom, the "rearrangement" will be triggered, which seriously affects energy consumption. The usual practice is to minimize the DOM operation to reduce the "rearrangement".
In the face of circular operation of the dom, we choose to use document fragmentation, which adds content that needs to be added to the DOM once to the document fragmentation, and then adds the document fragmentation to the DOM tree, which effectively reduces the number of operations on the dom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li><span>0</span>Target tasks for a period of time.</li>
<li><span>1</span>Propose current and future tasks.</li>
</ul>
<script src="json1.js"></script>
<script>
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var ary = [
{
"title": "speech",
"desc": "Deeply analyze the serious and complex situation of the anti-corruption struggle, and put forward the goals and tasks for the current and future period."
},
{
"title": "Streamlining government and delegating authorities",
"desc": "Determine and improve the methods for identifying high-tech enterprises so that more innovative enterprises can receive policy support."
},
{
"title": "speech",
"desc": "Deeply analyze the serious and complex situation of the anti-corruption struggle, and put forward the goals and tasks for the current and future period."
},
{
"title": "Streamlining government and delegating authorities",
"desc": "Determine and improve the methods for identifying high-tech enterprises so that more innovative enterprises can receive policy support."
},
{
"title": "speech",
"desc": "Deeply analyze the serious and complex situation of the anti-corruption struggle, and put forward the goals and tasks for the current and future period."
},
{
"title": "Streamlining government and delegating authorities",
"desc": "Determine and improve the methods for identifying high-tech enterprises so that more innovative enterprises can receive policy support."
}
];
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(); //Document fragmentation (when a document fragmentation is paid to a node, only a child node in the document fragmentation is paid to a node, and it is not inserted into the node itself)
for(var i=0; i<ary.length; i++){
var cur=ary[i];
var oLi=document.createElement('li'); //Create a Node
oLi.innerHTML='<span>'+(i+2)+'</span>'+cur.desc; // Add content to nodes
frg.appendChild(oLi); // Put the content we want to insert into the page in the frg;
}
oUl.appendChild(frg); // Talk about inserting the frg document at the end of ul
frg=null; //Release of heap memory; to improve browser performance;
</script>
</body>
</html>