JavaScript前端性能优化

JS性能优化的知识非常庞杂，这里我们来介绍几种常用的性能优化方式。

---

一、JS中的前端性能优化原则：

• 多使用内存、缓存等方法
• 减少CPU计算、减少网络请求

---

二、针对上述两项原则，我们可以从两个方向入手来进行前端的性能优化。

1、加载资源优化

静态资源的压缩合并

我们可以利用webpack等打包工具进行资源的合并与压缩操作，可以大大减小资源的大小，实现页面更快的加载。

静态资源缓存
当浏览器发送请求时，可以检测该资源的最新版本是否存在于本地，若存在，则不进行重新加载。可以通过链接名称控制缓存，当缓存改变的时候，链接名称才会改变。

使用CDN让资源加载更快
CDN可以对不同区域的网络进行优化。例如用BootCDN进行优化的事例：

SSR后端渲染
使用SSR进行后端渲染，将数据直接输入到HTML中，而不需要先下载HTML页面，再执行AJAX获取服务器端的数据。很早以前的jsp、php、asp都属于后端渲染，现在Vue、React也提出了这样的概念，经测试表明，页面的加载时间可以大大缩短。

2、渲染优化

CSS放到header中，JS放到body最下面
（1）将CSS放在<header></header>部分：在渲染body部分时，可以渲染已经规定好样式。若将CSS样式放到要渲染的DOM节点之后，就会出现最开始按照默认形式渲染，执行到css样式又重新渲染。造成样式跳转：用户体验差；性能差：需渲染两次。
正确使用方式如下：

若将6行放到9后面，就会出现重复加载现象。

（2）JS会阻塞页面DOM的加载，若将JS放到body最下面，首先不会阻塞页面渲染，可以将页面全部渲染后再执行js。其次可以拿到所有的标签，如果放在html上面可能拿不到标签，因为还没有被渲染到。
错误事例：加载执行9行，阻塞第10行的执行。

注意以该方式进行异步加载时不会阻塞页面的渲染，因为img标签已经渲染出来，只是请求的异步加载内容在加载。

图片的懒加载
所谓懒加载，就是当用户下拉到该页面时再加载图片，而不是当用户打开页面就将所有图片全部加载完毕。

在页面渲染时，将src传入一个很小的图片，真正的图片地址放在自定义属性data-lealsrc中，当真正执行时，再将所需图片加载进来。

减少DOM查询，对DOM查询做缓存
DOM操作是一种非常耗费性能的操作，在写程序时要尽量减少DOM操作。

通过上面的两种实现方式对比可以看出：未缓存DOM查询时，每次循环都要进行DOM查询；缓存了DOM查询时，只需进行一次DOM查询操作，将数值保存在变量中使用即可。

合并DOM操作

向文档中插入10个li标签，原始操作是有十次DOM插入操作，但是我们利用定义一个片段（frag），向片段中插入li，不会触发DOM操作，最后将该片段插入到DOM中。只许一次DOM操作，大大提高性能。

时间节流

这个代码实现的功能是：当连续很快输入时，不需要每次抬起按键都执行函数，只有当按键抬起超过100ms才执行操作，可以减少事件操作，因为在连续操作时会执行很多计算，严重影响性能。

用DOMContentLoaded替代window.onload
window.onload:在页面加载完毕才会执行操作。
DOMContentLoaded：在页面渲染完执行操作，此时图片、视频等可能还未被加载完。

图片、视频等静态资源大小参差不齐，加载完成时间又会有很大的差别，但html一般很小，加载时间很短，所以利用DOMContentLoaded可以显著提高性能和用户体验。