前端优化

加载优化和渲染优化

//资源合并
//使用缓存
    /*通过名称控制缓存*/
// 使用CDN
// 使用SSR后端渲染
    /*现在vue,react提出了这样的改良
    其实jsp，PHP，asp都属于后端渲染*/
// 懒加载


//缓存dom查询
var pList = document.getElementsByTagName('p')
var i;
for(i=0;i<pList.length;i++){
    //todo
}
//合并dom插入
var listNode = document.getElementById('list')

var flag = document.createDocumentFragment();
var x,li;
for(x=0;x<10;x++){
    li=document.createElement("li");
    li.innerHTML = "List item"+ x;
    frag.appendChild(li);
}
listNode.appendChild(frag)

//事件节流
var textarea = document.getElementById('text')
var timeoutId;
textarea.addEventListener('keyup',function(){
    if(timeoutId){
        clearTimeout(timeoutId)
    }
    timeoutId = setTimeout(function(){
        //触发change事件
    },100)
})
//尽早操作
window.addEventListener('load',function(){
    //页面的资源全部加载完才会执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded',function(){
    //DOM渲染完即可执行，此时，图片视频可能没有加载完
})