16种常用的前端性能优化方法?你明白了吗?

202 阅读5分钟

1. 使用 JSON 格式来进行数据交换

JSON 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。

同时,JSON 是 JavaScript 原生格式,这意味着在 javaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。

与XML序列化相比,JSON序列化后产生的数据一般要比 XML序列化后数据体积小。

2. CDN(内容分发网络)

服务器是中心化的,CDN是“去中心化的”。

   CDN 系统能够实时的根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求,重新导向离用户最近的服务节点上,让资源加载变快。

CDN 的优势

  1. CDN 节点解决了跨运营商和跨地域访问的问题,访问延时大大降低;
  2. 大部分请求在 CDN 边缘节点完成,CDN 起到了分流作用,减轻了源站的负载;
  3. 降低“广播风暴”的影响,提高网络访问的稳定性;
  4. 节省骨干网带宽,减少带宽需求量。

3. 懒加载

懒加载也叫延迟加载,当可视区域没有滚到资源需要加载的地方时候,可视区域外的资源就不会加载。可以减少服务器负载,常适用于图片很多,页面较长的业务场景中。

4. Iconfont(字体图标)

    矢量、轻量、易修改、不占用图片资源请求减少数据

5. 逻辑后移

    把主体请求接口前移,尽快的把主体渲染出来,把一些非主体的请求逻辑后移,就会快很多提升用户体验。

6. 组件渲染

    组件的层级不要太深,会渲染一些不必要的组件

7. Node middleware(node 中间件)

中间件主要是指封装所有Http请求细节处理的方法。使用node middleware合并请求,减少请求次数。

8. Web worker

Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。这样的好处是,一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。

9. 缓存

缓存的原理就是更快读写的存储介质+减少IO+减少CPU计算=性能优化。

性能优化的第一定律就是:优先考虑使用缓存。如:将静态资源缓存,就可以使渲染更加快速。缓存的主要手段有:浏览器缓存、CDN、反向代理、本地缓存、分布式缓存、数据库缓存。

10. GPU渲染

每个网页或多或少都涉及到一些CSS动画,如果涉及到稍显复杂的动画会减缓性能。很多服务器都支持GPU加速,当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启。

11. Ajax请求结果的缓存

Ajax在发送的数据成功后,为了提高页面的响应速度和用户体验,会把请求的URL和返回的响应结果保存在缓存内,当下一次调用Ajax发送相同的请求(URL和参数完全相同)时,它就会直接从缓存中拿数据。

12. Resource Hints(资源预加载 =》预测用户下一步行动,提前加载可能需要的资源)

资源预加载可以大大降低页面加载时间,给用户更加流畅的用户体验。现代浏览器使用大量预测优化技术来预测用户行为和意图,这些技术有预连接、资源与获取、资源预渲染等。

13. SSR(服务端渲染)

渲染过程在服务器端完成,最终的渲染结果 HTML 页面通过 HTTP 协议发送给客户端。适用于:项目大量页面,交互频繁

服务端渲染(SSR)很多时候用作首屏优化,加快首屏速度,提高用户体验。但是对服务器有要求,网络传输数据量大,占用部分服务器运算资源。

14. 域名收敛和域名发散

域名收敛:就是将静态资源放在一个域名下,减少DNS解析的开销。多用与移动端,提高性能,因为dns解析是是从后向前迭代解析,如果域名过多性能会下降,增加DNS的解析开销

域名发散:是将静态资源放在多个子域名下,就可以多线程下载,提高并行度,使客户端加载静态资源更加迅速。多用于pc端利用浏览器的多线程并行下载能力

15. webpack打包排除

将第三方库排除在包之外,采用线上引用的方式来使用第三方库

16. 懒加载

在路由配置当中,使用箭头函数返回组件的路由懒加载的方式,确保当路由被访问的时候才加载对应组件