您好,欢迎光临,本网站提供SEO关键词快速排名、网站优化服务。

互联网服务

网页制作长尾词核心词提升上词率平台

性能up!面向前端开发人员的14个JavaScript代码优化技巧

作者:jcmp      发布时间:2021-04-22      浏览量:0
全文共 4872

全文共 4872 字,预计学习时长 13 分钟。

用户访问网站设备的硬件规格我们没法控制,终端用户访问网站的设备或高端或低端,互联网连接或好或差,这意味着我们必须尽可能优化网站,以满足所有用户的需求。而与此同时,据W3Tech统计,全世界将近96%的网站都在使用JavaScript,JavaScript已成为有史以来最热门的编程语言之一。

以下是一些小贴士,以供你更好地优化JavaScript代码,展现更好的性能。

顺便一提,请确保共享和重用JS组件,以达成高质量代码(需要时间来生成)和合理交付时间之间的恰当平衡。可以使用Bit (Github)之类的流行工具将项目中的组件(vanilla JS,TS,React,Vue等)共享到Bit的组件中心,这样不会浪费太多时间。

1.删除不用的代码和功能

应用程序包含的代码越多,需要传输到客户端的数据就越多。浏览器解析代码所需时间也越长,有时有些功能可能根本没有用到。最好只在开发环境中保留这些额外的代码,而不要将其用于生产环境,这样就不会给客户端的浏览器带来无用代码的负担。

不断询问自己某个功能、特性或代码是否必要。可以手动或使用Uglify或google’s closurecompiler等工具移除不用的代码,甚至可以用一种名为摇树优化(tree shaking)的技术,从应用程序中移除不用的代码。

Webpack之类的打包器便提供这种技术,如果想删除不用的npm包,可以使用npm prune命令。

2.随时缓存

缓存通过减少延迟和网络流量来提高网站的速度和性能,从而缩短显示资源所需的时间。这可以通过缓存应用程序接口(Cache API)或超文本传输协议缓存(HTTPcaching)来实现。在满足特定条件(如发布新内容)时,上述缓存机制能够处理和重新生成缓存。

3.避免内存泄漏

高级语言JS负责几个底层管理,比如内存管理。垃圾回收机制在大多数编程语言中十分常见。通俗来说,垃圾回收机制就是简单地收集和释放已经分配给目标对象的内存,而这些内存并没有在程序的任何部分使用。C语言之类的编程语言中,开发人员必须使用malloc()和dealloc()函数来分配和释放内存。

尽管JavaScript自动执行垃圾回收,但有时它并不完美。JavaScript ES6中,映射(Map)和集合(Set)和它们的“较弱”的同胞一起引入。这种“较弱”的同类被称为WeakMap和WeakSet,它们对对象的引用“较弱”,允许对未引用的值进行垃圾回收,从而防止内存泄漏。

4.尽早跳出循环

大周期循环必然会消耗大量宝贵时间,因此要尽早跳出循环。关键字break和continue可以做到这一点。编写最高效的代码是你的责任。在下面的例子中,如果没有跳出(break)循环,代码将运行循环1000000000次,这显然导致了重载。

let arr = new Array(1000000000).fill('----');

arr[970] = 'found';

for (let i = 0; i < arr.length; i++) {

if (arr[i] === 'found') {

console.log("Found");

break;

}

}

在下面的例子中,若循环与条件不匹配时没有使用继续(continue)关键字,该函数将持续运行1000000000次。我们仅处理处于偶数位置的数组元素,这将循环执行减少了近一半。

let arr = new Array(1000000000).fill('----');

arr[970] = 'found';

for (let i = 0; i < arr.length; i++) {

if(i%2!=0){

continue;

};

process(arr[i]);

}

5.最小化变量计算次数

可使用闭包减少变量的计算次数。通俗来说,JavaScript中的闭包可以从内部函数访问外部函数。每次创建函数时都会创建闭包,而不是调用。即使外部函数已经返回,内部函数也可以访问外部作用域的变量。

通过以下两个实例来解释这一点:

function findCustomerCity(name) {

const texasCustomers = ['John','Ludwig', 'Kate'];

const californiaCustomers = ['Wade','Lucie','Kylie'];

return texasCustomers.includes(name) ?'Texas' :

californiaCustomers.includes(name) ?'California' : 'Unknown';

};

多次调用上述函数,每次都会创建一个新对象。每次调用中,内存都被画蛇添足地重新分配给变量texasCustometrs 和californiaCustomers。

使用带有闭包的解决方案可仅实例化变量一次。看看下面的例子:

function findCustomerCity() {

const texasCustomers = ['John','Ludwig', 'Kate'];

const californiaCustomers = ['Wade','Lucie','Kylie'];

return name =>texasCustomers.includes(name) ? 'Texas' :

californiaCustomers.includes(name) ?'California' : 'Unknown';

};let cityOfCustomer = findCustomerCity();cityOfCustomer('John');//Texas。

cityOfCustomer('Wade');//California。

cityOfCustomer('Max');//Unknown。

上例中,在闭包的辅助下,返回到变量cityOfCustomer的内部函数可以访问外部函数findCustomerCity()的常量。每当内部函数被调用,其名称作为参数传递,不需要再次实例化常数。

6.避免使用delete关键字

delete关键字用于从对象中移除属性。对于delete关键字的性能,用户已颇有微词,不足之处预计在未来的更新中得到修复。你可以选择简单地将不需要的属性设置为undefined。

const object = {name:"Jane Doe", age:43};

object.age = undefined;

也可以使用地图(Map)对象,据布雷特所说,此种方式更为快捷。

7.最小化DOM访问

与其他JavaScript语句相比,访问DOM的速度很慢。对DOM进行更改会触发布局的重新绘制,网站运行愈加缓慢。一次性访问单个DOM元素并将其用作局部变量以减少访问次数。任务完成后,务必将变量设置为null以移除该变量的值。这将触发垃圾回收机制以防止内存泄漏。

8.压缩文件

使用诸如Gzip之类的压缩方法可缩小JavaScript文件的大小。鉴于浏览器所需下载资料缩小,网站性能也随之提高。压缩可将文件大小减少80%。

9.缩减最终代码

有人认为缩减和压缩是一样的,事实并不是这样。压缩使用特殊算法来改变文件的输出大小,缩减则需删除JavaScript文件中的注释和多余空格。这一过程可以在许多工具和包的帮助下完成,这些工具和包都可以在网上找到。缩减已成为页面优化的标准做法,也是前端优化的主要组成部分。

缩减可将文件大小减少60%。

10.使用节流(throtte)和去抖动(debounce)

节流和去抖动可严格控制代码处理事件的次数。

节流指定函数可以超时的最大次数。例如,“每1000毫秒最多执行一次onkeyup事件函数。”这意味着如果每秒输入20个键,事件每秒只会触发一次,这将减少代码的负载。

去抖动指定函数最小的持续时间,该时间是该函数自上一次执行后再次运行的时间。换句话说,“只有在经过600毫秒而没有调用该函数的情况下,才会执行这个函数。”这就意味着自最后一次执行该函数起600毫秒内,该函数不会被调用。

11.使用异步和延迟

现代网站中,脚本比超文本标记语言(HTML)更密集,大小更大,处理时间更长。默认情况下,浏览器必须等待脚本下载并执行后,再处理页面的其余部分。这可能会导致庞大的脚本阻止网页加载。为避免这种情况,JavaScript提供了两种名为异步和延迟的技术,您只需将这些属性添加到