0

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

例如，我们遇到了很多在线画廊。如果 js 开发人员必须从他的服务器加载大约 50 张图像到网站上，那么他首先关心的是什么。我提出这个只是为了让一个 JS 代码的实例不得不处理大量的数据。

我正在寻找的是，我目前正在参与 JS 开发，当我编写中型（或大型）js 应用程序时，我应该专注于提高性能。

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

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

4

3 回答 3

2

我的一位教授说 - “好的算法，不需要微优化”。

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

  1. 关于使用的内存 - 这是一个基本问题。如果你想要更快的速度，你需要更多的内存，或者相反。这是一个权衡取舍的维基百科。您必须定义某种平衡。在我个人看来（如这里），您将获得更简洁的代码，更少的变量（对象）无需克隆，并且 HTML 将更简洁。限制持有 DOM 集合引用的变量。

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

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

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

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

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

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

  • JsLint - 检查 JavaScript 代码错误；
  • JsonLint - 检查 json 数据中的错误；
  • JsPerf - 用于测试和比较脚本的性能。还包含其他用户设计的测试列表；
  • regexpal - 正则表达式助手；
  • 有很多“粘贴和分享”网站 jsfiddle、pastebin 等；
于 2012-05-09T00:19:11.790 回答
1

使用分析器来衡量您的性能瓶颈在哪里，然后看看您可以对它们做些什么。

即使是优秀的程序员也非常擅长构建最终会出错的性能参数，因此最好的程序员更喜欢分析器和测试用例而不是推测。——马丁·福勒

于 2012-05-08T21:47:48.667 回答
1

性能调优是非常非常特定于应用程序的。正如唐纳德·克努斯所说，

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

一般来说，最好的办法是编写您的应用程序，然后找出您需要优化的内容。应用程序加载时间过长？使用压缩器并延迟加载大量资源（例如图像）。CPU使用率过高？也许您过于频繁地更新 DOM 而不是批量更新。直到你有一个工作样本，然后分析它，你才会知道。

第三方库是构建原型并快速工作的绝佳工具。缺点通常是 1）它们的有效负载可能很大，增加了加载时间（尽管这可以通过使用 CDN/缓存来缓解），2）它们使执行 CPU 密集型的事情变得更容易，因为它隐藏了很多发生了什么。尽管这只是在您遇到 CPU 问题时才会出现的问题，但情况并非总是如此（如果不进行分析，很难提前知道）。

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

有很多这类 JS 性能提示。这一切归结为您的实际工作示例基于分析器（例如 Chrome 开发工具中可用的）以及用户体验向您展示的内容。

于 2012-05-08T21:51:28.227 回答