JavaScript性能优化

写这篇文章之前，本来想写“提升js性能的常规手段”，但是后来想想，这个主题有点太大了，改为《js性能优化从每一行代码做起》，可能更为贴切，再后来，又改为《提高js性能有哪些骚操作》，程序员也有程序员该有的风骚。

好了，接下来我们进入正题。

首先，大家可以先思考一个问题：当我们接到一个需求时，我们的脑海里本能性的会去思考些什么？这个问题可以在文章下面留言讨论

这篇文章，我想跟大家讨论三个话题：

1. 性能为什么重要
2. 如何提升性能
3. 哪些人群需要关注性能

我们为什么要关注性能呢？

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

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

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

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

如何提升js的性能？

性能影响体验，体验成就产品，那我们应该怎么办？我们能做的，就是从我们日常的每一行代码做起，来优化和提升我们的应用性能 我总结了10个方法，可以从日常的业务逻辑出发，去优化和提升我们的应用性能，持之以恒的话，我觉得一定是会有用的。

一、删除未使用的js代码

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

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

2、多余的依赖库

3、被滥用的npm包

4、公共模版代码（什么是公共模版代码？就比如我们的脚手架里，又或者咱们从其他项目copy过来的公共方法文件，就会有很多与项目可能无关的代码，那这些东西，就是需要我们删除掉的）

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

什么是构造函数？

就比如**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、使用不当很容易造成内存泄漏。

哪些人需要关注性能优化？

到底什么样的前端工程师需要关注js性能呢？ 实习生？ 中级工程师？ 高级工程师？ 还是架构师？ 答案是:

大叔耶夫斯基说：其实所有的bug工程师，都需要关注性能，并且把思想融入到每一行代码上。

以上是我的一些拙见，如有指正和讨论，可留言或者其它方式联系

感谢您的阅读