Magento 2提高JavaScript性能建议

更新于2019年5月5日,本篇教程将介绍magent 2前段开发的注意事项

我们认为JavaScript是当今Web开发的一个非常重要的部分。但有时我们不会考虑可以提高JS性能的简单技巧。在这篇文章中,我们尝试概述JS的一些常见问题,以及有助于提高

Magento 站点性能的简单解决方案。

1.减少DOM变化的数量

每次进行DOM更改时,请将它们分组以防止DOM呈现。如果您正在进行某些样式更改或添加属性,请尝试立即进行所有修改,而不是单独对每个元素应用更改。

2.限制第三方库和组件依赖性

第三方库和组件为加载时间增加了很多,因此努力将其使用保持在最低限度,并尽可能完全避免使用库或组件。减少对外部库的依赖的一种方法是使用浏览器内技术。

3.使用依赖关系管理器

此外,使用依赖项管理器(如RequireJS)的好方法,Magento本身使用依赖项管理器来加载脚本,让用户在应用程序运行之前就能看到它的布局。这可以对首次访问者的转化产生积极影响。

4.不要使用相同的脚本两次或更多次

使用依赖项管理器可以更轻松地避免重复脚本。重复的脚本会对性能产生不良影响。重复的脚本将创建不必要的请求。

5.仔细选择事件处理程序

像’mousemove’或’resize’这样的事件每秒执行数百次,特别注意绑定到这些事件的任何事件处理程序。在同一页面上执行的事件越多,它们就越能降低性能。此外,如果这些事件调用了某些请求,请注意。

6.偏爱本机功能和结构

不是编写自己的算法或过分依赖某些解决方案,而是尽可能多地利用本机函数和构造。JS提供了包含数百种本机构造的巨大列表供您选择。

7.如果不需要,请不要使用嵌套循环

避免不需要的和嵌套的循环,例如for / while,以防止必须经历数千个对象。不需要的循环可能导致浏览器更难以处理代码,并可能减慢页面呈现速度。

8.尽量不要使用全局变量

当从函数或另一个范围内引用全局变量时,脚本引擎需要查看范围,当本地范围丢失时,该变量将被销毁。如果全局范围中的变量无法在脚本的生命周期内持续存在,则性能将得到改善。
请注意,某些旧浏览器不支持“let”变量。

9.将JavaScript移动到页面底部

将脚本移动到页面底部将减少渲染进度,并提高性能。这将导致更快的页面加载。

10.合并和缩小JS文件

用于提高性能的一般Magento 2设置是从管理员合并和缩小JS文件。它允许网页尽可能轻,以便快速加载。
转到后端,Stores – > Configuration – > Advanced – > Developer – > JavaScript Settings并将Merge JavaScript Files设置为Yes并将Minify JavaScript Files设置为Yes:

上面的所有提示都会为您的JavaScript提供非常小的性能提升,但是,如果将它们一起实现,用户应该注意到网站和应用程序运行速度的显着提高。在截止日期前工作时,您可能很难记

住所有这些提示,但是越早开始实施最佳实践,您以后遇到JavaScript性能问题的可能性就越小。

上一篇: Magento 1创建模块csv翻译文件

下一篇: 服务器日志的查询常用操作(Apache & Nginx)

登录 评论
avatar
1 评论人数
0 回复人数
1 跟随者
 
多数的反应发表评论
热评
1 评论作者
头条新闻 最近的评论作者
最新 最旧 得票最多
头条新闻
游客

文章不错非常喜欢