江苏龙网

  1. 主页 > 生活百科 > >

14个 JavaScript 代码优化技巧( 二 )

代码优化avaScript


5、最小化变量计算的次数为了减少计算变量的次数，可以使用闭包 。通俗来说，JavaScript 中的闭包使你可以从内部函数访问外部函数作用域 。每次创建函数（不调用）时都会创建闭包 。内部函数将有权访问外部作用域的变量，即使在返回外部函数之后也是如此 。
我们来看两个例子 。这些示例均来自 Bret 的博客 。
function findCustomerCity(name) {  const texasCustomers = ['John', 'Ludwig', 'Kate'];  const californiaCustomers = ['Wade', 'Lucie','Kylie'];  return texasCustomers.includes(name) ? 'Texas' :    californiaCustomers.includes(name) ? 'California' : 'Unknown';};如果你多次调用上面的函数，那么每次都会创建一个新对象 。每次调用时，变量 texasCustomers 和 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');//TexascityOfCustomer('Wade');//CaliforniacityOfCustomer('Max');//Unknown在上面的示例中，借助于闭包，返回到变量 cityOfCustomer 的内部函数可以访问外部函数 findCustomerCity() 的常量 。而且，每当以传递的名称作为参数调用内部函数时，都无需再次实例化常量 。要了解关于闭包的更多信息，建议你阅读 Prashant 的博客文章：
https://medium.com/@prashantramnyc/javascript-closures-simplified-d0d23fa06ba4
6、尽量减少 DOM 访问与其他 JavaScript 语句相比，访问 DOM 的速度很慢 。如果你对 DOM 进行更改，触发了布局的重新绘制，那么就得等好一阵子了 。
为了减少访问 DOM 元素的次数，请先访问一次，然后将其用作局部变量 。完成需求后，请一定将其设置为 null 来移除该变量的值 。这将防止内存泄漏，因为这会触发垃圾回收过程 。
7、压缩文件通过压缩方法（例如 Gzip）可以减小 JavaScript 文件的大小 。较小的文件会提升你的网站性能，因为浏览器只需下载较小的资产即可 。
这类压缩手段最多可以减少 80％的文件大小 。在此处阅读有关压缩的更多信息：
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#text_compression_with_gzip
8、缩小最终代码有人认为缩小和压缩是相同的，其实不然 。在压缩中，我们使用特殊算法来改变文件的输出大小；在缩小时，我们需要删除 JavaScript 文件中的注释和多余的空格 。可以在网上找到许多工具和软件包来帮助完成这一过程 。缩小已成为页面优化的标准做法，也是前端优化的主要步骤之一 。
缩小可以让文件大小最多减少 60％ 。你可以在此处阅读有关缩小的更多信息：
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#minification_preprocessing_context-specific_optimizations
9、使用 Throttle 和 Debounce我们可以使用 Throttle（节流）和 Debounce（防抖）这两种技术来严格控制代码需要处理事件的次数 。
节流是指定函数可以超时的最大次数 。例如，“每 1000 毫秒最多执行一次 onkeyup 事件函数” 。也就是说哪怕你每秒敲 20 个键，该事件每秒也只会触发一次 。这将减少代码的负担 。
另一方面，防抖是指定自上次执行相同函数以来再次运行该函数的最短持续时间 。换句话说，“上次调用函数后果最少 600 毫秒才执行此函数” 。要了解有关节流和防抖的更多信息，这里有一篇快速入门：
https://css-tricks.com/the-difference-between-throttling-and-debouncing/
你可以实现自己的防抖和节流函数，也可以从 Lodash 和 Underscore 之类的库中导入它们 。
10、避免使用 Delete 关键字delete 关键字用于从对象中删除属性 。这个关键字的性能表现不怎么好，预计它将在未来的更新中修复 。
或者，你可以简单地将不需要的属性设置为 undefined 。
const object = {name:"Jane Doe", age:43};object.age = undefined;你还可以使用 Map 对象，Bret 认为它的 delete 方法会更快 。


推荐阅读


上一篇：华为mate10如何设置双系统?华为mate10双屏幕怎么设置?

下一篇：PHP位运算和逻辑运算，一个符号写两遍这么简单？