这一次,彻底搞懂前端性能优化

·  阅读 1043
这一次,彻底搞懂前端性能优化

这是我参与2022首次更文挑战的第27天,活动详情查看:2022首次更文挑战

前言

性能优化问题是区分一个前端工程师能力的重要指标,一个不会性能优化的工程师注定不会做出一个优秀的产品,因为任何一款优秀的产品必然是经过精细打磨的产品,而性能优化就是这打磨的过程,无论是在实际工作中还是面试中性能优化问题都是面试必考的问题,下面让我们来一起解决这个问题吧~

优化思路

当我们在浏览器地址栏上输入URL到页面显示出结果的时候,我们都知道时间主要消耗在了网络传输和页面渲染上,因此我们主要从这两个方面出发进行性能优化。

网络传输性能优化

1. 使用HTTP2

HTTP2相对于HTTP1进行了下面的优化:

  • 二进制分帧层
  • 多路复用
  • 首部压缩
  • 请求优先级
  • 服务器推送
  • 流量控制

2. 资源打包压缩

资源打包压缩主要是通过webpack压缩以下内容:

  • 压缩JS代码:通过webpack的production模式压缩JS代码。
  • 压缩HTML代码:使用html-webpack-plugin的minify进行压缩。
  • 压缩CSS代码:使用cssnano压缩css,在postcss.config.js中进行配置。

3. 图片资源优化

在网络传输中真正占用大量网络资源的不是文件而是图片,如果对图片进行了优化,可以看到立竿见影的效果。主要优化措施如下:

  • 在html中尽量不要放图片。
  • 使用雪碧图:雪碧图可以减少请求的次数。
  • 使用字体图标:字体图片能够像图片一样工作,但是资源占用和图片请求比起来小很多。
  • 使用webp:webp格式的图片相对根据国家节省网络带宽。

4. 使用CDN

CDN指的是在网络不同地点部署节点服务器,将源站内容分发至所有CDN节点,使得用户可以就近获得所需内容。CDN提高了网站的响应速度、降低了延迟。

5. 使用预加载

当一个页面加载时,可能会加载很多第三方资源,但是这些资源的优先级是不同的,一些重要资源需要提前进行获取,因此我们可以使用link标签来进行DNS预解析、预加载、预渲染来管理页面资源的加载。

6. 减少DNS查找

尽量将资源放在同一域名下面,因为域名越少,DNS查询就会越少。

7. 发送请求时使用防抖和节流策略

防抖节流可以避免短时间内发送过多的重复请求。

页面渲染性能优化

1. 减少重排和重绘的发生

  • 重排:指的是元素布局发生修改,导致页面重新排列。
  • 重绘:所有对元素的视觉表现属性的修改,都会引发重绘。

重排和重绘都会影响性能,要想提高网页性能尽可能降低重排和重绘的频率。重排是由CPU处理的,而重绘是由GPU处理的,GPU的处理效率要相对更高,重排一定发生重绘,但是重绘不一定引起重排,所以要尽可能的降低重排和重绘的发生。

2. DOM元素离线更新

当对DOM元素进行操作的时候,尽量使用documentFragment对象进行离线操作,待元素组装完成之后再一次插入页面。

3. 避免CSS、JS阻塞

CSS资源优于JS资源的引入,JS应当尽量少影响DOM的构建。

经典问题

RQ1:首屏加载如何优化?

主要方法包括以下步骤:

  1. 动态加载路由

配置路由的时候,以函数的形式加载路由,只有在解析给定的路由时,才会加载路由。

  1. 合理使用缓存

设置强缓存、协商缓存、localstorage等。

  1. UI框架按需加载

不要引入整个UI库,尽量进行按需加载。

  1. 避免重复加载组件

可以使用webpack将多次使用的包抽离出来,放入公共依赖文件,避免重复加载组件。

  1. 压缩图片资源

雪碧图、字体图标、webp等。

  1. 开启Gzip压缩

  2. 使用SSR服务端渲染

组件或页面通过服务器生成html字符串,再发送到浏览器。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改