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优化技巧](https://i-blog.csdnimg.cn/blog_migrate/4ae5f869593651ec452bdd96d3968264.png)
减小JavaScript文件大小的另一种简便方法是对其应用最小化程序,例如JSCompress。 最小化器去除空白和不必要的文本元素,从而减小了JavaScript文件的大小。 反过来,这可以优化JavaScript文件的下载时间。 将多个JavaScript文件合并为一个,以减少传出网络连接的数量。
4.不要重新发明JavaScript API
JavaScript具有多个内置API,这些API允许对集合或数组进行高效迭代。 使用Array的原型构造函数 ,您可以使用类似lambda的语法将函数应用于列表中的所有项目,或执行诸如排序或反转之类的操作。
这些内置方法非常高效,并且已通过浏览器进行了优化。 但是,有些开发人员并不了解这些方法,而是编写迭代循环来达到相同的目的。
无需自己重新发明这些功能方法。 这不仅浪费时间,而且还引入了不必要JavaScript性能问题。
5.在服务器上执行严格的逻辑
将计算操作卸载到客户端的能力是客户端计算的主要优势,但是客户端渲染也会给功能不足的手持设备带来巨大的负载。
例如,如果渲染图表或电子表格需要大量计算,并且该计算会导致JavaScript性能问题,请考虑将其移至服务器,然后将内容作为预先计算HTML传递给客户端。 与在复杂的,占用大量内存JavaScript函数运行时相比,浏览器在静态HTML显示上的效率要高得多。
![服务器端渲染](https://i-blog.csdnimg.cn/blog_migrate/6c0c2d70b908b10524384a29e48aecb6.png)
执行服务器端渲染的人员可以获得很多好处。
JavaScript性能优化技巧
回顾一下,优化JavaScript性能的五个最有效方法是:
- 减少onReady事件的数量
- 使用let not var
- 缩小并结合
- 不要重新发明JavaScript API
- 在服务器上执行严格的逻辑
JavaScript是提高最终用户访问您网站时的参与度和保留率的关键。 但是,当涉及JavaScript时,开发人员应始终意识到其性能影响。 注意这五个JavaScript性能优化技巧,以帮助您的Web开发团队避免一些常见的网站性能陷阱。
javascript优化