JS代码优化｜青训营

花花的廖廖
92 阅读4分钟

为什么要关注性能

  1. 性能是创建网页或应用程序时最重要的一个方面。
    没有人想要应用程序崩溃或者网页无法加载，或者用户的等待时间过长。根据有关统计，47％的访问者希望网站在不到 2 秒的时间内加载，如果加载过程需要 3 秒以上，则有 40％的访问者会离开网站。

  2. 当代用户对于应用的体验普遍要求提高了
    几年前，对于一个页面的等待时间，普遍数据是7s
    而现在，如果一个页面卡顿或者白屏时间长于2s，可能就会有一半的人选择离开，当然，政府的项目不在考量的范围以内，比如说什么社保系统，征信系统，就算等待时间超过一天，咱也只能等

  3. 应用的性能瓶颈，依然是在js上
    尤其是现在的三大框架，数据驱动视图，而数据的操作运算依赖于js，所以js的性能就显得更为重要了，对于一个js代码块儿，我们是能缩短一毫秒，那就缩短一毫秒

考虑到以上这些数字，在创建 Web 应用程序时应始终考虑性能。

如何提升js的性能

一、删除未使用的js代码

这是最简单，也是最基础的方法，也是我们在日常开发中应该注意的问题。 这个方法，可以减小js文件的大小，从而缩短首次加载的传输时间，也可以缩短浏览器解析和编译代码所需要的时间。 那什么样的代码我们应该删除呢？

1、未使用的功能性代码以及与之相关的代码

2、多余的依赖库

3、被滥用的npm包

二、数组和对象操作避免使用构造函数

什么是构造函数？

就比如new Array(), new Object() 之类的

不推荐的写法：

testArr = () => {
    let arr = new Array()
    arr[0] = '大叔'
    arr[1] = '二叔'
    arr[2] = '随便是什么都行'
    ……
    return arr
}
testObj = () => {
    let obj = new Object()
    obj.name = '大叔'
    obj.age = 18
    obj.sex = '男'
    return obj
}

推荐写法：

testArr = () => {
    let arr = ['大叔', '二叔', '随便是什么都行']
    return arr
}
testObj = () => {
    let obj = {
        name: '大叔',
        age: 18,
        sex: '男'
    }
    return obj
}

三、尽量避免使用非必要的全局变量

尤其是像document这类的全局变量，我们如果一定要用，就必须要考虑作用域的问题， 如下实例：

不推荐的写法：

test = () => {
    var imgs = document.getElementByTagName("img");
    for(var i = 0, len = imgs.length; i < len; i++) {
        imgs[i].title = document.title + " image " + i;
    }
}

推荐的写法:

test = () => {
    var doc = document;
    var imgs = doc.getElementByTagName("img");
    for(var i = 0, len = imgs.length; i < len; i++) {
        imgs[i].title = doc.title + " image " + i;
    }
}

比如：

四、合理使用缓存机制

缓存是提高应用性能的一个常规手段，缓存的方式也有很多，比如说浏览器缓存，数据库缓存等等，

这里我们只谈js的缓存

比如说cookie localStorage sessionStorage

访问本地的数据很显然比远程数据要快快很多

哪些内容适合缓存？

1、实时性要求不严格的内容

2、经常访问但改动不频繁的内容

五、减少循环中的活动

不推荐：

test = () => {
    var i
    var arr = [1, 2, 3, 4, 5, 6, 7, 8]
    for (i = 0, i < arr.length; i++) {
        return i
    }
}

推荐：

test = () => {
        var i
        var arr = [1, 2, 3, 4, 5, 6, 7, 8]
        var l = arr.length
        for (i = 0, i < l; i++) {
            return i
        }
    }

六、减少不必要的变量

不推荐

test = () => {
    let a = 1, b = 2
    return a + b
}

推荐

test = () => {
    return 1 + 2
}

七、最小化语句数

JS代码中的语句数量也会影响所执行的操作的速度

完成多个操作的单个语句要比完成单个操作的多个语句块快。

所以要找出可以组合在一起的语句，以减来整体的执行时间

比如下面的例子：

不推荐

test = () => {
    var a = 1
    var b = 2
    var c = 3
    return a + b + c
}

推荐

test = () => {
    var a = 1,
    b = 2,
    c = 3
    return a + b + c
}

下面的代码性能无疑比上面的要高一些

九、原生方法更快

尽量使用原生方法，而不是自己用js去重写业务逻辑。 原生方法是用C或者C++之类的编译型语言写出来的，要比JS快很多。 用switch…case代替一系列复杂的if…else 并按照可能出现的几率最大—>最小的顺序组织逻辑，可以得到进一步的优化

十、尽量避免使用闭包

闭包有三大特性： 1、函数嵌套函数。 2、函数内部可以引用外部的参数和变量。 3、参数和变量不会被垃圾回收机制回收。 闭包有些什么好处呢？ 1、变量长期存储在内存中 2、避免全局变量的污染 而闭包的缺点，恰恰也就是由这些优点带来的 1、常驻内存必然增加内存的使用量。 2、使用不当很容易造成内存泄漏。

avatar
文章
阅读
粉丝