JavaScript性能优化

Posted 2020-09-03 特拉法尔加

所谓性能最直观的感觉就是网站在交互的时候响应的速度，也就是一次请求响应周期所花费的时间，这个时间和很多因素有关系

请求发出前：

总体原则：在客户端应该尽量减少请求发送的数量
第一例：订单列表中点击删除按钮删除某条订单，可以做成点击时发送ajax给服务器，客户端收到响应后直接刷新页面，也可以做成在客户端收到相应后删除订单列表DOM中的对应项，后一种方案明显请求数量少于前一种，性能较好，但对于开发人员要求高，而且有可能由于订单列表数据的变化可能会导致页面上其他位置也需要变化，例如订单总数，但是前端带有的数据绑定功能的框架帮我们解决了这一问题

第二例：单页面应用中首屏通常加载很多script标签，每个script里面都有一个src，页面中的图片也有src，还有每个link标签都有href，每个src或href就是一个请求，这样请求数量明显很多，因此将很多script标签合并在一起即可减少请求数，从而优化性能，进一步的，在发送请求时代码压缩与不压缩明显占用的http请求报文的空间不一样，因此压缩代码可以进一步优化性能，图片是同样的道理，将所有的图片合成一张图只发一次请求即可。有时所有的文件合并在一起回非常大，因此还会考虑按需加载的需求

第三例：省市联动如果以前端的角度来看，页面加载完之后可以再发送一个获取所有省份的ajax，然后在选择某个省之后在用这个省的id去获取该省对应的所有的市，但是从请求次数的角度来看，在后台返回html页面的同时将省份的数据同时带过来显然是更好的方式

请求过程中：

从源主机到目标主机，数据帧需要根据路由算法经过多跳路由器最终抵达，我们希望尽可能减少经过的跳数，因此出现了将静态文件部署到CDN上，使客户端直接访问离自己最近的主机上的资源

请求发出后：

此处主要性能关键点在于服务器处理的过程

首先负载均衡服务器将会对请求转发到不同的web服务器中分别处理，转发的算法（例如轮寻）对于性能也有一定影响

最为主要的性能瓶颈在于与数据库服务器再次建立连接并在数据库中进行查询时所消耗（据悉like模糊查询性能极差）

响应过程中：

与上述请求过程中的性能分析一致，不再赘述

响应收到后：

DOM操作极为昂贵，因此应该尽量减少DOM操作

-- CSS性能优化问题 --

1. 加载方面
   1）慎用 @import：import 会使我们的 link 样式由原本的并发加载，变成异步加载；
   2）压缩代码体积：
      a. 压缩代码，删除换行，多余的空格和注释；
      b. 合并重复代码，提高代码的通用性；
      c. 精简包含选择符，在使用包含选择的时候，尽量精简层级；
      d. 能使用复合样式时，尽量使用复合样式；
      e. 多利用继承，来精简样式；

2. 优化请求
   1）使用 css 精灵，减少图片个数和体积；
   2）合理合并文件，精简外部文件个数；
   3）对于不需要重复使用的图片，可适当使用 data Uri；
   4）在设计统一的情况下，可使用 FontIcon 的方法，来统一整合页面上的图片；

3. 渲染方面
   1）涉及动画方面，尽量可以使用位移来解决，努力减少回流；
   2）涉及动画方面，可以利用 3D，来进行 GPU 加速；
   3）避免使用 table，为了减少回流；
   4）避免 text-shadow 和 box-shadow 层级过多；
   5）减少浮动和绝对定位的滥用；
   6）不滥用 WEB 字体，在部分浏览器下会造成渲染阻塞；

-- JS 优化问题 --

1. 最小化 DOM 访问次数，尽可能在 JS 端执行；
2. 如果需要多次访问某个 DOM 节点，请使用局部变量存储对它的引用；
3. 小心处理 HTML 集合，因为它实时连系着底层的文档，把集合的长度缓存到一个变量中，并在迭代中使用它，如果需要经常操作集合，建议把它拷贝到一个数组中；
4. 如果可能的话，使用速度更快的 API，比如 querySelectorAll 和 firstElementChild；
5. 要留意重绘和重排，批量修改样式时，“离线”操作 DOM 树。使用缓存，并减少访问布局的次数；
6. 使用事件委托来减少事件处理器的数量；
7. 避免多次访问对象成员或函数中的全局变量，尽量将它们赋值给局部变量以缓存；
8. 能用 CSS 解决的问题，尽量不用 JS 去解决；