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

Posted 2021-04-08 读芯术

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了性能up！面向前端开发人员的14个JavaScript代码优化技巧相关的知识，希望对你有一定的参考价值。

全文共4873字，预计学习时长13分钟

图源：unsplash

用户访问网站设备的硬件规格不受控制，终端用户访问网站的设备或高端或低端，互联网连接或好或差。这意味着必须尽可能优化网站，以满足所有用户的需求。而与此同时，据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命令。

图源：unsplash

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]);
   
     
     
   }

图源：unsplash

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.压缩文件

图源：takscan

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

9.缩减最终代码

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

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

10.使用节流（throtte）和去抖动（debounce）

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

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

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

11.使用异步和延迟

图源：unsplash

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

异步是告诉浏览器在不影响渲染的情况下加载脚本。换句话说，页面不等待异步脚本，而是处理和显示内容。延迟是在渲染完成后告诉浏览器加载脚本。如果两者都有指定，异步在现代浏览器上处于优先地位，而支持延迟但不支持异步的旧浏览器将回退到延迟。

这两个属性可以极大地减少页面加载时间。

12.使用异步代码防止线程阻塞

JavaScript默认是同步的，也是单线程的。但有时代码需要大量时间来计算。从本质上讲，同步意味着一段代码会阻止其他代码语句运行，直到执行结束。这会降低网站整体性能。但是我们可以通过实施异步代码避免这种情况。异步代码曾以回调形式编写，但ES6引入了一种处理异步代码的新风格，名为promises。

但如何在单线程上运行的同时还能运行异步代码？这是很多人困惑的地方。一切因运行在浏览器后台的JavaScript引擎而成为可能。JavaScript引擎是执行JavaScript代码的计算机程序或解释器。JavaScript引擎可以用多种语言编写。例如，支持谷歌浏览器的V8引擎是用C++编写的，而支持火狐浏览器的蜘蛛猴引擎是用C和C++编写的。

这些JavaScript引擎可以在后台处理任务。据布莱恩所说，调用栈识别网络应用程序界面（Web API）的功能，并递交至浏览器处理。一旦浏览器完成了这些任务，它们就会返回并作为回调被压入堆栈。

有人会问，在没有浏览器的情况下，Node.js如何运行？事实上，驱动谷歌浏览器的V8引擎也支持Node.js。

13.使用代码拆分

图源：unsplash

如果你有过谷歌灯塔（Light House）的经验，必然会熟悉一个名为“初始内容渲染（first contentful paint）”的指标。这是灯塔报告性能部分跟踪的六个指标之一。

初始内容渲染(FCP)测量的是用户导航到页面后，浏览器渲染第一个DOM内容所需的时间。页面上的图像、非白色<画布>元素和可缩放矢量图形（SVG）被视为DOM内容；iframe中的任何内容都不含在内。

获得更高FCP分数的最佳方式之一是使用代码拆分。代码拆分是一种在开始时只向用户发送必要模块的技术。通过减小最初传输的有效载荷的大小而极大影响FCP分数。热门的模块管理器，如webpack，提供代码拆分功能。也可在本机ES模块的帮助下加载单个模块。

14.使用Web Workers在后台运行CPU密集型任务

Web Workers允许在后台线程中运行脚本。如果你有一些高强度的任务，你可以把它们分配给Web Workers，Web Workers可以在不干扰用户界面的情况下运行这些任务。创建之后，Web Workers可以向JavaScript代码指定的事件处理程序发送消息来与该代码进行通信。反之亦然。

图源：unsplash

掌握小技巧，快乐编码吧！

推荐阅读专题

留言点赞发个朋友圈

我们一起分享AI学习与发展的干货

编译组：张月星、闫欣阳