前端优化策略(持续更新)

1、减少重绘回流

减少对DOM的操作、批量操作DOM、避免触发同步布局事件
回流：重绘渲染树
重绘：将渲染树转换为屏幕上的实际像素

2、加载优化，懒加载，异步加载等

3、缓存DOM**

var a = document.getElementById("myHeader");

4、css 样式 扁平化**

减少使用table

5、防抖和节流**

防抖：等用户高频事件完了，再进行事件操作。
节流：某个操作希望上一次的完成后再进行下一次，或者希望隔一段时间触发一次。

//防抖
<script>
        let input = document.getElementById("myHeader");
        let time = null;//time用来控制事件的触发
        input.addEventListener('input',function(){
            //防抖语句
            if(time !== null){
                clearTimeout(time);
            }
            time = setTimeout(() => {
                console.log(this.value);//业务实现语句
                //这里的this指向的是input
            },500)
        })
    </script>

//节流
var flag = true;
window.addEventListener('scroll',function(){
     if(flag){
         setTimeout(()=>{
             console.log(123);
             flag = true;
         },1000);
     }
     flag = false;
 });