前端性能优化

防抖

// 为避免一个函数的执行频率过高， 使用防抖。
function debounce(fn,delay){
    return function() {
        //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
        if(timer){
            // 自定义属性，外部不用再定义一个timer传进来 (timer初始为undefined)
            clearTimeout(fn.timer) 
        }
        // 其他情况，说明当前并没有在计时，那么就开始一个计时
        fn.timer = setTimeout(fn,delay)  
    }
}

节流

// 一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于技能冷却时间） 
// 取自思否
function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}

视频流

有时组件内部会嵌套视频，而在组件将要卸载时，必须断掉这些视频流，不断掉视频流不会自动停止，会对性能产生严重影响！

有些场景，需要在组件卸载前，将定时器也清除掉。

游戏开发

游戏开发一般对性能、内存有严格要求。 
拿移动端举例， 有的游戏从始至终只会请求一次接口，任何页面数据变化 ，全部由前端计算并更新页面数据。 
也就是说在点某个具体的按钮时，数据发生变化，会传一个流程Id给后端，后端根据这个流程Id 更新数据库数据，而前端展示数据由前端更新。
（注意：这里只是传了流程Id给后端，并没有重新请求接口渲染页面！），但在下次重新请求数据时，使用数据库数据！


**前端更新数据，子组件将需要更新的数据传回父组件，由父组件完成更新再传递给子组件。

尽量少调接口

若非必要情况，尽量少调用接口。 接口的调用一定意义上会消耗性能，因此，减少非必要接口的调用，移动端游戏开发正是这种思想。