使用 JS 提高性能

Improving performance with JS

本文关键字：高性能 JS 使用      更新时间：2023-09-26

在使用javascript进行开发时，比如说一个照片博客，你从一个文件夹中检索所有图像并以所有独特的方式显示它，或者进行ajax调用从服务器检索数据，并加载它，动态应用所有样式和逻辑(或任何涉及跨越数百行甚至数千行的硬命js代码的事情(， JS开发人员专注于使代码更高效(在性能方面(的所有领域是什么？

例如，我们遇到了很多在线画廊。 如果JS开发人员必须将50张图像从他的服务器加载到网站上，那么他首先关心的事情是什么。我拉这个只是为了让JS代码的实例必须处理相当多的数据。

我

正在寻找的是，我目前正在参与JS开发，当我编写中型(或大型(js应用程序时，我应该集中精力提高性能。

  1. 就使用的内存而言？
  2. 在使循环高效方面？
  3. 在使用 Jquery 或 Dojo 等第三方框架方面？
  4. 在设计和使用的算法方面(我想总是有这个选项打开(

编写更高效的JS代码的任何建议都将有很大帮助。

我的一位教授说——"好的算法，不需要微优化"。

有一个类似的问题。JavaScript 的问题在于它并不单独存在于网页中。有HTML(DOM(和CSS。

  1. 关于使用的内存 - 这是一个基本问题。如果你想要更快的速度，你需要更多的内存，或者相反。这是一个权衡的维基百科。您必须定义某种平衡。在我个人看来(就像这里一样(，您将获得更干净的代码，无需克隆的变量(对象(更少，HTML 也会更干净。限制保存 DOM 集合引用的变量。

  2. 关于循环 - 循环本身不是问题。问题出在循环内部：不要一遍又一遍地检查某些东西。使用记忆维基百科。小心 DOM 集合的迭代，如果随着时间的推移有很多动态添加的元素，它们可能会变慢。使用变量来缓存当前状态或位置(哦！

  3. 像jQuery这样的第三方库非常有用，因为它们提供了一种统一的方式来在每个浏览器上做同样的事情。但是像jQueryUI一样，寻找一些模块中的东西。很多时候，我只需要选择器，这些选择器位于jQuery中另一个称为嘶嘶声的库中，而不是整个库。但尽管如此，我还是反对他们的统治地位。HTML5正在传播并呈现原生功能，至少如果不是更好的话，应该更快。

  4. 关于算法 - 使用设计模式。它们是多年来发展起来的技术，经过测试和验证。比如使用闭包、防止全局变量的未命名自执行函数等......

当然还有其他有用的技巧，例如：

  • 代码的缩小
    • YUI压缩器，谷歌闭包编译器，节省带宽;
    • 还有混淆器和打包程序 - 使用良好的算法，它们可能会有所帮助，但有时它们可能会引入错误!! ;
    • 在某些页面上，您可能已经看到类似 var doc = document; ，缩短了document的召唤;
  • 使用 CDN - 来自谷歌或 ASP 主机;
  • 图像优化 - JPG可以优化为更小的尺寸(关于画廊(;
  • 在另一台主机上导出静态内容(如 JavaScript 和 CSS(，以防止一遍又一遍地发送 cookie 数据。(这里另一个副作用是你不需要安装服务器端语言，只需要http服务器(

作为工具，您可能熟悉或不熟悉：

  • JsLint - 检查 JavaScript 代码错误;
  • JsonLint - 检查 json 数据中的错误;
  • JsPerf - 用于测试和比较脚本的性能。还包含其他用户设计的测试列表;
  • 正则表达式 - 正则表达式助手;
  • 有很多"粘贴和分享"网站JSFIDDLE，pastebin等;

性能调优非常非常特定于应用程序。 正如唐纳德·高德纳所说，

我们应该忘记小效率，比如说大约 97% 的时间：过早优化是万恶之源

通常，最好的主意是编写应用程序，然后找出需要优化的内容。 应用程序加载时间过长？使用缩小器并延迟加载繁重的资源(例如图像(。 CPU 使用率过高？也许您过于频繁地更新 DOM，而不是批量更新。 在获得工作示例然后对其进行分析之前，您不会知道。

第三方库是获取原型和快速工作的好工具。 缺点通常是 1( 它们的有效负载可能很大，增加了加载时间(尽管这可以通过使用 CDN/缓存来缓解(，2( 它们使做 CPU 密集型的事情变得容易得多，因为它隐藏了很多正在发生的事情。 尽管这只是一个问题，如果您无论如何都遇到CPU问题，但情况并非总是如此(并且很难在没有分析的情况下提前知道(。

每次修改 DOM 时，浏览器都必须重排并弄清楚页面应如何随着您的更改呈现。 这就是为什么建议您使用 CSS 类来修改/更改样式的原因，因为它们可以一次性更改，其中堆叠样式更改意味着要更改的每个属性的重排。

有很多这些类型的JS性能技巧。 归根结底，您的实际工作示例会根据分析器(例如Chrome开发工具中提供的分析器(以及用户体验向您展示的内容。

使用探查器测量性能瓶颈的位置，然后查看可以采取哪些措施。

即使是优秀的程序员也非常擅长构建性能 最终是错误的论点，所以最好的程序员更喜欢 探查器和测试用例进行推测。 - 马丁·福勒

相关文章：