Web前端2019面试总结（东软集团面试题）

CSS中避免回流、重绘

JS操作避免回流、重绘

1.避免使用JS一个样式修改完接着改下一个样式，最好一次性更改CSS样式，或者将样式列表定义为class的名称
2.避免频繁操作DOM，使用文档片段创建一个子树，然后再拷贝到文档中
3.先隐藏元素，进行修改后再显示该元素，因为display:none上的DOM操作不会引发回流和重绘
4.避免循环读取offsetLeft等属性，在循环之前把它们存起来
5.对于复杂动画效果,使用绝对定位让其脱离文档流，否则会引起父元素及后续元素大量的回流

            1
            function
             debounce(fn,wait){

            2      let timer=null;
3returnfunction(){
4           let args=arguments,that=this;
5           timer&&clearTimeout(timer);
6           timer=setTimeout(function(){fn.apply(that,args)},wait)
7     }        
8 }

             1
            function
             throttle(fun, delay){

             2   let timer = null;
 3   let startTime = Date.now();
 4returnfunction(){
 5     let curTime = Date.now();
 6     let remain = delay - (curTime - startTime);
 7     let that = this;
 8     let args = arguments;
 9    clearTimeout(timer);
10if(remain <= 0){
11      fun.apply(that,args);
12       startTime = Date.now();
13     }else{
14       timer = setTimeout(fun, remain);
15    }
16  }
17 }

             1   <script>
 2     setTimeout(() => {
 3       console.log(1)
 4     }, 0)
 5     const promise = new Promise((resolve, reject) => {
 6       console.log(2);
 7      resolve()
 8       console.log(3);
 9    })
10     promise.then(() => {
11       console.log(4);
12    })
13     console.log(5);
14// 输出结果为： 2 3 5 4 115   </script>