JavaScript | 性能优化的一些方法

    （1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

    （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数。就比如一些分页。

    （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

    （4） 当需要设置的样式很多时设置className而不是直接操作style。

    （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

    （6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

    （7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。
    
    （8） 防抖函数、函数节流

 

---

防抖函数

• 定义：触发事件停止一定时间后才会执行响应的函数，期间如果重复触发时间，重新计算时间。
   
• 原理：维护一个定时器，在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 定时器重新计时。
  
   
• 应用：
  常见于用户注册时候的手机号码验证和邮箱验证和页面元素滚动的监听。
  以下以页面元素滚动监听的例子，来进行解析：

// 函数防抖
// 意思就是只有当我滚动停下300ms后才会执行回调，300ms内没有执行的话就清除计时器
// 避免过多调用回调
var flag;
    window.onscroll = function(){
        clearTimeout(flag); // 清除定时器
        flag = setTimeout(function(){
            console.log("防抖");
        }, 300);
    };
 

---

函数节流 

• 定义：触发事件后，规定的时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。
   
• 原理：通过判断是否到达规定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。
  
   
• 应用：
  也常用在监听页面元素滚动事件。因为滚动事件，是一个高频触发的事件。
  以下还是以页面元素滚动监听的例子，来进行解析：

let isRun = false;
    window.onscroll = function(){
        if(isRun){
            // 判断是否在运行，如果在执行中，则直接return
            return;
        }
        else{
            // 将状态设置为在运行
            isRun = true;

            // 执行代码 模拟某个操作需要3000ms,因此在这3000ms之间不会重复执行这块代码
            setTimeout(function(){
                console.log("节流");
                isRun = false;
            }, 3000);
        }
    };