优化前端性能的方法

1、封装组件

把所有经常需要用到的封装成组件，在需要的时候调用它。

2、减少DOM操作

dom操作是脚本中最耗性能的一个操作，减少dom操作的方法如下：

• 对dom查询做缓存

// 未缓存dom查询
var i;
for (i = 0; i < document.getElementsByTagName('p').length; i++) {\
	// todo
}
// 缓存了dom查询
var pList = document.getElementByTagName('p');
var i;
for (i = 0; i < pList.length; i++) {
 // todo
}

• 多个操作尽量合并在一起执行

for循环插入dom，改成 先创建节点，最终再一次性插入到dom上。

• 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

在这里插入代码片

3、压缩图片

• 3.1 压缩图片体积， 比如说熊猫在线图片压缩，或使用打包工具来压缩图片
• 3.2 使用字体图标，比如说阿里图标

4、减少http请求

• 4.1 通过使用雪碧图，把很多小图片制作成一个大图，然后作为背景图片使用，定位即可
• 4.2 把图片转化为base64编码，减少请求
• 4.3 避免img、iframe等的src属性为空。 空src会重新加载当前页面，影响速度和效率

5、延迟加载

假设我的网页很长，图片很多很多，只需要提前加载展示前一两屏即可，这个就是一个延迟加载的思想。具体的实现方法可以看一个插件，就叫lazeload。

6、配置多个域名和CDN加速

通常浏览器对于一个域名的并发请求是有限的，比如：有100个文件要加载，但浏览器一次只可能并发请求10个文件，这样并发多次就会耗时。
因此配置多个域名能够最大限度的增加并发请求量，但这里有个缺点就是会增加浏览器域名解析的次数，这里建议利用CDN来加快域名解析。

7、利用浏览器缓存

8、代码细节优化

• 多个变量声明合并
• 少用全局变量
• 避免全局查询
• 移动端使用touch事件代替click事件

9、非核心代码异步加载

异步加载的方式，有以下几类：

• js动态脚本加载, 即使用js把script标签，加入到body中
• script标签中加入defer 、async

defer是在html解析完之后才会执行，如果是多个，按照加载的顺序依次进行。
async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关。

参考链接 https://www.cnblogs.com/halilulu/p/12576617.html