快速网站的简单JavaScript性能优化技巧

　　JavaScript可以提供高度交互的网站，以HTML单独无法做到的方式积极吸引用户。但是，增加的参与度会带来性能成本，如果允许失控，可能会对网站的可用性产生负面影响。

　　如果你的网站速度很慢，并且认为页面中嵌入的逻辑可能是原因，那么你可以使用以下五个JavaScript性能优化技巧来为用户加快速度。

　　1.减少onReady事件的数量

　　一旦加载了HTML页面并应用了所有CSS选择器，就会触发onReady事件。通常，开发人员会在此处放置初始化页面组件和启动各种JavaScript函数所需的逻辑。

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

　　2.使用letnotvar

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

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

　　3.缩小合并

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

　　当JavaScript加载时，它会阻止其他资源的下载，例如图像、JSON和CSS文件。并且由于浏览器允许与Internet建立的外部连接数量有限，如果你引用了七个或八个外部JavaScript文件，你可能会完全阻止下载可能用于呈现内容的其他资源显示在首屏之上。通过将所有JavaScript组合到一个文件中，只使用一个外部连接，这允许浏览器同步下载其他资源。

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

　　4.不要重新发明JavaScriptAPI

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

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

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

　　5.在服务器上执行密集逻辑

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

　　例如，如果渲染图表或电子表格需要大量计算，并且该计算导致JavaScript性能问题，请考虑将其移动到服务器并简单地将内容作为预先计算的HTML交付给客户端。浏览器在静态HTML显示上比在复杂的、内存密集型的JavaScript函数运行上要高效得多。

　　JavaScript是在最终用户访问你的网站时更好地参与和保留他们的关键，但是开发人员应该始终意识到涉及JavaScript时对性能的影响。注意这五个JavaScript性能优化技巧，以帮助你的Web开发团队避免一些常见的网站性能陷阱。

　　了解更多