阅读 2726

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工程师,都需要关注性能,并且把思想融入到每一行代码上。

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

感谢您的阅读