写这篇文章之前,本来想写“提升js性能的常规手段”,但是后来想想,这个主题有点太大了,改为《js性能优化从每一行代码做起》,可能更为贴切,再后来,又改为《提高js性能有哪些骚操作》,程序员也有程序员该有的风骚。
好了,接下来我们进入正题。
首先,大家可以先思考一个问题:当我们接到一个需求时,我们的脑海里本能性的会去思考些什么?这个问题可以在文章下面留言讨论
这篇文章,我想跟大家讨论三个话题:
- 性能为什么重要
- 如何提升性能
- 哪些人群需要关注性能
我们为什么要关注性能呢?
-
性能是创建网页或应用程序时最重要的一个方面。 没有人想要应用程序崩溃或者网页无法加载,或者用户的等待时间过长。根据有关统计,47%的访问者希望网站在不到 2 秒的时间内加载,如果加载过程需要 3 秒以上,则有 40%的访问者会离开网站。
-
当代用户对于应用的体验普遍要求提高了 几年前,对于一个页面的等待时间,普遍数据是7s 而现在,如果一个页面卡顿或者白屏时间长于2s,可能就会有一半的人选择离开,当然,政府的项目不在考量的范围以内,比如说什么社保系统,征信系统,就算等待时间超过一天,咱也只能等
-
应用的性能瓶颈,依然是在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工程师,都需要关注性能,并且把思想融入到每一行代码上。以上是我的一些拙见,如有指正和讨论,可留言或者其它方式联系
感谢您的阅读