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 文件。并且由于浏览器允许与 Internet 建立的外部连接数量有限，如果你引用了七个或八个外部 JavaScript 文件，你可能会完全阻止下载可能用于呈现内容的其他资源显示在首屏之上。通过将所有 JavaScript 组合到一个文件中，只使用一个外部连接，这允许浏览器同步下载其他资源。
另一种减小 JavaScript 文件大小的简单方法是对它们应用最小化程序，例如 JSCompress。最小化器会去除空格和不必要的文本元素，从而减小 JavaScript 文件的大小。反过来，这优化了 JavaScript 文件的下载时间。将多个 JavaScript 文件合并为一个以减少传出网络连接的数量。
4. 不要重新发明 JavaScript API
JavaScript 有几个内置的 API，允许对集合或数组进行高效的迭代。使用 Array 的原型构造函数，你可以使用类似 lambda 的语法将函数应用于列表中的所有项目或执行操作，例如排序或反转。
这些内置方法非常高效，并由浏览器进行了优化。但是，一些开发人员并不了解这些方法，而是编写迭代循环来达到相同的目的。
无需自己重新发明这些函数式方法。这不仅浪费时间，而且还引入了不必要的 JavaScript 性能问题。
5. 在服务器上执行密集逻辑
将计算操作卸载到客户端的能力是客户端计算的一个关键优势，但客户端渲染也可能会给功率不足的手持设备带来巨大的负载。
例如，如果渲染图表或电子表格需要大量计算，并且该计算导致 JavaScript 性能问题，请考虑将其移动到服务器并简单地将内容作为预先计算的 HTML 交付给客户端。浏览器在静态 HTML 显示上比在复杂的、内存密集型的 JavaScript 函数运行上要高效得多。
JavaScript 是在最终用户访问你的网站时更好地参与和保留他们的关键，但是开发人员应该始终意识到涉及 JavaScript 时对性能的影响。注意这五个 JavaScript 性能优化技巧，以帮助你的 Web 开发团队避免一些常见的网站性能陷阱。
发表评论 取消回复