1.object.freeze
2. Timer batch rendering
3.document.createDocumentFragment()
is used to create a virtual node object, which does not belong to the document tree.
When multiple DOM elements need to be added, the DOM can be added to this virtual node first. Then add virtual nodes to the page uniformly, which will reduce the number of times the page renders the DOM.
window.requestAnimationFrame
accepts parameters as functions, and has the following advantages over setTimeout and setInterval:
1. Collect all DOM operations in each frame and complete them in one rearrangement/redrawing. 60 frames per second.
2. In hidden or invisible elements, requestAnimationFrame will not be redrawn/rearranged.
//总数据
const total = 10000;
//每次插入的数据
const once = 20;
//需要插入的次数
const times = Math.ceil(total/once)
//当前插入的次数
const curTimes = 0;
//需要插入的位置
const ul = document.querySelector(‘ul’)
function add(){
let frag = document.createDocumetFragment()
for(let i = 0;i<once;i++){
let li = document.createElement(‘li’)
li.innerHTML = Math.floor(i+curTimes*once)
frag.appendChild(li)
}
curTimes++;
ul.appendChild(frag)
if(curTimes<times){
window.requestAnimationFrag(add)
}
}
window.requestAnimationFrag(add)