javascript优化_简单JavaScript性能优化技巧，可帮助您快速访问网站

javascript优化

JavaScript可以提供高度交互的网站，从而以HTML永远无法提供的方式积极吸引用户。 但是，参与度的提高会带来性能成本，如果允许它失去控制，可能会对网站的可用性产生负面影响。

如果您的网站运行缓慢，并且认为页面中嵌入的逻辑可能是造成这种情况的原因，那么可以使用以下五个JavaScript性能优化技巧来为用户加快速度。

1.减少onReady事件的数量

加载HTML页面并应用所有CSS选择器后 ，将触发onReady事件。 通常，这是开发人员放置初始化页面组件和启动各种JavaScript函数所需的逻辑的地方。

但是，随着时间的流逝，开发人员倾向于向页面添加越来越多的onReady事件。 在故障排除例程中，通常会添加onReady事件来解决问题，但在解决问题后并不会将其删除。 其他时候，与给定Web组件关联HTML将从页面中删除，但是没有删除相应的onReady事件，这导致多余JavaScript不必要地消耗了时钟周期。 此外，onReady事件通常被编码到一个通用JavaScript文件中，该文件在每次页面加载时都会运行，即使仅在少数几个页面上需要此功能也是如此。

2.使用let not var

当使用var关键字声明JavaScript变量时，它将在整个页面范围内进行全局作用域，并在页面的整个生命周期中维护在内存中。 但是，当使用let关键字声明变量时，将应用块作用域。 这样，在块执行后，变量将从内存中删除。

如果将诸如Ajax响应，JSON数据或XML之类的长文本字符串保存在全局变量中，则浏览器可能会很快用尽可寻址内存，这将严重妨碍页面性能。 一个非常容易实现JavaScript性能优化技巧是用let替换代码中的每个var。

3.缩小并结合

如果您的网页链接到多个JavaScript库，则快速简便的优化技巧是将所有这些JavaScript库组合到一个文件中。

加载JavaScript时，它将阻止下载其他资源，例如图像，JSON和CSS文件。 由于浏览器允许与互联网建立的外部连接数量受到限制，因此，如果您引用了七个或八个外部JavaScript文件，则可能会完全阻止其他资源下载，这些资源可用于呈现首屏显示的内容。 如果将所有JavaScript组合到一个文件中，则仅使用一个外部连接，这使浏览器可以同步下载其他资源。

3.缩小并结合

如果您的网页链接到多个JavaScript库，则快速简便的优化方法是将所有这些JavaScript库合并到一个文件中。

加载JavaScript时，它会阻止其他资源的下载，例如图像，JSON和CSS文件。 而且由于浏览器的外部连接数量受到限制，因此允许您连接到Internet，如果您引用了七个或八个外部JavaScript文件，则可能会完全阻止下载可能用于呈现内容的其他资源的下载。显示在折叠上方。 通过将所有JavaScript组合到一个文件中，仅使用一个外部连接，这使浏览器可以同步下载其他资源。

减小JavaScript文件大小的另一种简便方法是对其应用最小化程序，例如JSCompress。 最小化器去除空白和不必要的文本元素，从而减小了JavaScript文件的大小。 反过来，这可以优化JavaScript文件的下载时间。 将多个JavaScript文件合并为一个，以减少传出网络连接的数量。

4.不要重新发明JavaScript API

JavaScript具有多个内置API，这些API允许对集合或数组进行高效迭代。 使用Array的原型构造函数 ，您可以使用类似lambda的语法将函数应用于列表中的所有项目，或执行诸如排序或反转之类的操作。

这些内置方法非常高效，并且已通过浏览器进行了优化。 但是，有些开发人员并不了解这些方法，而是编写迭代循环来达到相同的目的。

无需自己重新发明这些功能方法。 这不仅浪费时间，而且还引入了不必要JavaScript性能问题。

5.在服务器上执行严格的逻辑

将计算操作卸载到客户端的能力是客户端计算的主要优势，但是客户端渲染也会给功能不足的手持设备带来巨大的负载。

例如，如果渲染图表或电子表格需要大量计算，并且该计算会导致JavaScript性能问题，请考虑将其移至服务器，然后将内容作为预先计算HTML传递给客户端。 与在复杂的，占用大量内存JavaScript函数运行时相比，浏览器在静态HTML显示上的效率要高得多。

执行服务器端渲染的人员可以获得很多好处。

JavaScript性能优化技巧

回顾一下，优化JavaScript性能的五个最有效方法是：

1. 减少onReady事件的数量
2. 使用let not var
3. 缩小并结合
4. 不要重新发明JavaScript API
5. 在服务器上执行严格的逻辑

JavaScript是提高最终用户访问您网站时的参与度和保留率的关键。 但是，当涉及JavaScript时，开发人员应始终意识到其性能影响。 注意这五个JavaScript性能优化技巧，以帮助您的Web开发团队避免一些常见的网站性能陷阱。

翻译自: https://www.theserverside.com/blog/Coffee-Talk-Java-News-Stories-and-Opinions/Easy-JavaScript-performance-optimization-tips-for-a-speedy-site

javascript优化