回流，重绘，防抖函数，节流函数

1，回流：当render tree 中的一部分或者全部元素因为元素规模尺寸，布局，隐藏等改变需要重新构建，这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候；

2，重绘：当render tree 中的一些元素需要更新属性，而这些属性只是影响元素的外部，风格，不会影响整体的布局，比如：background-color ;这就称为重绘；

注：回流必将引起重绘；重绘不一定一起回流；回流相当于页面上的DOM发生了变化，而重绘就是某些样式发生了变化；

3.1, 防抖函数：触发事件后在n秒内，函数只能执行一次，如果n秒内事件再次触发，则重新计算时间；

3.2 防抖函数使用场景：比如搜索栏功能，是在里面内容发生变化后就实时触发搜索事件，但是有时候，我们输入的内容很长，在没有输入完就触发了事件，这样对于性能来说，是不好的，造成了很多无用的请求，这时候就需要防抖函数，让其在搜索内容变化后的200ms内如果没有发生更改才发起请求；

3.3 实现防抖函数的思路：在触发事件的时候，取消原来的延时事件；

//1.4 具体实现：　
function debounce( fn ){ // 传一个回调函数
    let Mytime = null ;
    return function( ){ 
        clearTimeout( Mytime ) ; // 清除定时器
        Mytime  = setTimeout( () => {
             fn.apply(this,arguments)
         }, 200)
    }
}
//1.5 具体使用
function sayHi() {
      console.log('防抖成功');
    }
var select = document.getElementById('myselect');
select .addEventListener('change', debounce(sayHi)); // 防抖
 

二、节流函数

2.1 概念：

　　高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率；

2.2 使用场景：

　　就像我接了一个任务，只能在5秒完成任务给回复，在执行后的这5秒内，你再怎么给
　　我布置任务我都不管直接当没听到，直到到5秒后执行完这个任务，你才可以再次给
　　我布置任务，以此类推。。。

2.3 实现思路：

　　每次触发事件时都判断当前是否有等待执行的延时函数，如果有直接截断事件不用往下执行了；

2.4 具体实现：

function throttle( fn ){
    let canUse = true ; // 设置一个开关
    return function(){
        if(!canUse ){ return false } // 如果开关已经关掉了就不用往下了
        canUse  = false  // 利用闭包刚进来的时候关闭开关
        setTimeout( ( ) => { 
                fn.apply(this,arguments)
　　　　　　　　　　canUse = true // 执行完才打开开关
            },500)
    }
}      

2.5 具体使用：

function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));