使用JS提高性能

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

例如，我们遇到了很多在线画廊。如果他需要从服务器上载入50张图像到网站上，那么第一件事就是js开发人员的关注。我拉这只是为了让一个JS代码的实例必须处理相当数量的数据。

我在寻找的东西是，我目前参与了JS开发，当我编写中等（或大型）js应用程序时，我应该集中精力改善性能。

就使用的内存而言？
在循环效率方面？
在使用第三方框架如jquery或dojo方面？
在设计和使用的算法中的条款（我想总会有打开这个选项）

以书面形式更有效的JS代码将是很大的帮助任何建议。

来源

2012-05-08 Ajai

性能调整是非常非常非常特定于应用程序的。作为高德纳says，

我们应该忘记小的效率，讲的时候约97％：过早的优化是所有罪恶

通常是根，最好的办法是写你的应用程序然后找出你需要优化的东西。应用程序加载时间过长？使用缩小器并推迟加载大量资源（如图像）。 CPU使用率过高？也许你会更频繁地更新DOM，而不是批量更新。直到你有一个工作样品，你才会知道，然后进行分析。

第三方库是获取原型并快速工作的重要工具。缺点一般是1）它们的有效负载可能很大，增加了加载时间（尽管这可以通过使用CDN /缓存来缓解），2）它使得处理CPU密集的事情变得容易很多，因为它隐藏了很多发生了什么事情。虽然这只是一个问题，如果你有CPU问题，但情况并非总是如此（并且很难在未分析的情况下提前知道）。

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

有很多这些类型的JS性能技巧浮动。这一切归结于您的实际工作示例基于探查器（例如Chrome开发工具中提供的示例）以及用户体验向您展示的内容。

来源

2012-05-08 21:51:28 Matt

重复加载DOM是我至今没有意识到的事情。谢谢马特。 – Ajai

使用profiler来衡量性能瓶颈的位置，然后看看你可以对它们做些什么。

即使是优秀的程序员都在构建性能论点，即最终会被错误的非常好，所以最好的程序员喜欢廓线仪和测试案例来炒作。 - Martin Fowler

来源

2012-05-08 21:47:48

已经在相当长的一段时间里使用了分析器。但是我缺乏的东西是我在代码中可以做出的实际改进。无论是在设计还是重构我的js代码和类似的东西。 – Ajai

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

有类似的question。 JavaScript的问题在于，它不是单独存在于网页中。有HTML（DOM）和CSS。

关于使用的内存 - 这是一个根本性的问题。如果你想要更多的速度，你需要更多的记忆，或者其他的方式。这是一种权衡^wikipedia。你必须定义某种平衡。以我个人的观点（比如here），你会得到更干净的代码，没有克隆的变量（对象）更少，并且HTML会更干净。限制保存DOM集合引用的变量。
关于循环 - 循环本身不是问题。问题出在循环内部：不要一遍又一遍地检查一些事情。使用记忆^wikipedia。对DOM集合的迭代要小心，如果在这段时间内有很多动态添加的元素，它们可能会变慢。使用变量来缓存当前状态或位置（哦！这里权衡）。他们提出了一个统一的方式来做到对每一个浏览器同样的事情
第三方库像jQuery是真的很有帮助。但就像jQueryUI寻找一些模块。很多时候，我只需要这是所谓的sizzle另一LIB里面选择incuded jQuery中，而不是整个之一。但是，我反对他们的统治地位。 HTML5正在推广并呈现出本地化功能，至少如果不是更好的话应该会更快。
关于算法 - 使用设计模式。它们是多年来发展起来的技术，经过测试和验证。就像使用闭，不愿透露姓名的自我执行功能，防止全局变量，等等

当然也有像其他有用的技巧：代码

YUI compressor的
- 缩小， Google Closure compiler，节省带宽;
- 也有obfuscaters和包装 - 具有良好的算法，它们可能是有帮助的，但有时可能会出错！;
- 在某些页面上，您可能看到类似var doc = document;的东西，缩短了拨打document的呼叫;
使用CDN - 无论是从Google还是ASP主机;
图片优化 - JPG can be optimized尺寸要小一些（关于画廊）;
导出另一主机上的JavaScript和CSS等静态内容，以防止一次又一次地发送cookie数据。（这里的另一个副作用是，你并不需要一个服务器端语言来安装，只需要HTTP服务器）

正如你可能会或不会工具，熟悉：

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

来源

2012-05-09 00:19:11 Bakudan

哇..这实际上回答了我很多问题。万分感谢。 – Ajai

使用JS提高性能

回答

相关问题