这期内容当中小编将会给大家带来有关面向前端开发人员的14个JavaScript代码优化技巧是怎样的,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
用户访问网站设备的硬件规格我们没法控制,终端用户访问网站的设备或高端或低端,互联网连接或好或差,这意味着我们必须尽可能优化网站,以满足所有用户的需求。而与此同时,据W3Tech统计,全世界将近96%的网站都在使用JavaScript, JavaScript已成为有史以来最热门的编程语言之一。
以下是一些小贴士,以供你更好地优化JavaScript代码,展现更好的性能。
顺便一提,请确保共享和重用JS组件,以达成高质量代码(需要时间来生成)和合理交付时间之间的恰当平衡。可以使用钻头,(Github)之类的流行工具将项目中的组件(香草JS, TS,反应,Vue等)共享到一点的组件中心,这样不会浪费太多时间。
<强> 1。删除不用的代码和功能
应用程序包含的代码越多,需要传输到客户端的数据就越多。浏览器解析代码所需时间也越长,有时有些功能可能根本没有用的到。最好只在开发环境中保留这些额外的代码,而不要将其用于生产环境,这样就不会给客户端的浏览器带来无用代码的负担。
不断询问自己某个功能,特性或代码是否必要的。可以手动或使用糟蹋或google&,年代,closurecompiler等工具移除不用的代码,甚至可以用一种名为摇树优化(树摇晃)的技术,从应用程序中移除不用的代码。
Webpack之类的打包器便提供这种技术,如果想删除不用的npm包,可以使用npm修剪命令。
图源:unsplash
<强> 2。随时缓存
缓存通过减少延迟和网络流量来提高网站的速度和性能,从而缩短显示资源所需的时间。这可以通过缓存应用程序接口(缓存,API)或超文本传输协议缓存(HTTPcaching)来实现。在满足特定条件(如发布新内容)时,上述缓存机制能够处理和重新生成缓存。
<强> 3。避免内存泄漏
高级语言JS负责几个底层管理,比如内存管理。垃圾回收机制在大多数编程语言中十分常见。通俗来说,垃圾回收机制就是简单地收集和释放已经分配给目标对象的内存,而这些内存并没有在程序的任何部分使用c语言之类的编程语言中,开发人员必须使用malloc()和dealloc()函数来分配和释放内存。
尽管JavaScript自动执行垃圾回收,但有时它并不完美.JavaScript, ES6中,映射(Map)和集合(套)和它们的“较弱”的同胞一起引入。这种“较弱”的同类被称为WeakMap和WeakSet,它们对对象的引用“较弱”,允许对未引用的值进行垃圾回收,从而防止内存泄漏。
<强> 4。尽早跳出循环
大周期循环必然会消耗大量宝贵时间,因此要尽早跳出循环。关键字打破和继续可以做到这一点。编写最高效的代码是你的责任。在下面的例子中,如果没有跳出(打破)循环,代码将运行循环1000000000次,这显然导致了重载。
let arr =, new 数组(1000000000).fill (& # 39;——& # 39;);, arr[970],=, & # 39;发现# 39;;,for (let 小姐:=,0;,小姐:& lt;, arr.length;,我+ +),{,,if (arr[我],===,& # 39;发现# 39;),{,,,,,,,,console.log (“Found");,,,,,,,,,休息,,,,,,},} 在下面的例子中,若循环与条件不匹配时没有使用继续(继续)关键字,该函数将持续运行1000000000次。我们仅处理处于偶数位置的数组元素,这将循环执行减少了近一半。
let arr =, new 数组(1000000000).fill (& # 39;——& # 39;);, arr[970],=, & # 39;发现# 39;;,for (let 小姐:=,0;,小姐:& lt;, arr.length;,我+ +),{,,如果(我% 2 !=0){,,,,,,,,还是,,,,,,},,,,,,的过程(arr[我]);,} <强> 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'; };面向前端开发人员的14个JavaScript代码优化技巧是怎样的
