前端优化方法有哪些


文章目录

  • 前端优化方法有哪些
  • 前言
  • 一、http方面
  • 尽量减少http请求，合理设置http缓存
  • 1.开启 HTTP/2
  • 请求与响应复用
  • 标头压缩
  • 2.DNS-prefetch
  • Preconnect
  • 二、资源优化
  • 预加载
  • Preload
  • js方面
  • 加载优化
  • CSS方面
  • 图片方面
  • 三、组件渲染方面的优化


前言

前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化是必要的。

一、http方面

尽量减少http请求，合理设置http缓存

1.开启 HTTP/2

HTTP/2 相较于 HTTP/1.1 有比较大的性能提升

请求与响应复用

  • 并行交错地发送多个请求，请求直接互不影响
  • 并行交错地发送多个响应，响应之间互不影响
  • 使用同一个连接并行发送多个请求和响应，减少建连成本

标头压缩

在 HTTP/1.1 中，标头数据通常占用500-800字节，如果带上 cookie，传输数据量更大。HTTP/2 使用 HPACK 压缩格式压缩请求和响应标头数据，客户端和服务器同时维护和更新一个包含之前见过的标头字段和索引列表，相似的请求可以传输索引值来重构完整的标头，减少每个请求的大小。

2.DNS-prefetch

当浏览器向一个服务发起请求时，需要将请求域名解析为 IP 地址，才能向实际的服务地址发出请求，这个过程就是 DNS 解析。DNS 解析是比较耗时的，所以才会有各级缓存来减少解析延时对页面性能的影响。
dns-prefetch 可以让浏览器在加载页面的时候提前进行 DNS 解析，使得当前和之后的页面资源能更快的加载。
现代浏览器会主动查找文档中的连接进行 dns-prefetch，我们也可以手动添加：在<head>标签中使用<link>标签显示声明，特别是有些请求是在 js 代码中发出的，浏览器无法感知到。

<link rel="dns-prefetch" href="//s3.xxx.cn">

Preconnect

浏览器与服务器建立连接需要经过 DNS 解析、TCP 握手步骤，如果使用了 HTTPS，还有加密连接一步。整个建连过程会不断与服务器通信，耗费不少时间。
和 dns-prefetch 一样，现代浏览器也会很智能的去判断是否要预建立连接，我们可以手动使用<link>标签的rel="preconnect"属性告诉浏览器需要提前建立一条连接。

<link rel="preconnect" href="//a.xxx.com">

对于字体资源，需要额外再设置crossorigin属性。

☝🏼备注：

  • dns-prefetch 和 preconnect 针对的都是跨域的域名，毕竟当前页面的域名在打开页面的时候就已经进行了请求
  • 有选择性的使用 preconnect，最好用于页面的核心请求，建立不会使用的连接造成资源浪费，效果适得其反

二、资源优化

预加载

Preload

preload可以改变浏览器加载资源的优先级

// as 属性一定要设置
<link rel="preload" as="script" href="important.js">

webpack 可以使用插件 preload-webpack-plugin。

js方面

使用 webpack-bundle-analyzer 对项目进行打包分析，查看依赖以及对应包大小情况。

  1. 去除不必要的依赖
  2. 利用 tree-shaking 去掉“dead code”
  3. 替换更轻量级的库
  4. 减少对DOM的修改
  5. 使用事件委托
  6. 减少回流和重绘的次数
  7. 对动画考虑使用3D加速
  8. 对js文件进行压缩，Webpack 已经默认使用 terser 进行压缩，拥有更好的压缩效果

加载优化

使用async或者defer

当使用 dynamic import 分割出一些代码片段后，通常需要用户进行某个操作才会触发对应 JS 文件的下载，如果判断出某些 JS 文件很大概率会触发下载，可以利用 prefetch/preload 提前主动获取。

import(
/* webpackPrefetch: true */
/* webpackPreload: true */
'some-module'
);

CSS方面

  1. 压缩：标准程序，推荐使用 optimize-css-assets-webpack-plugin，内部使用了 cssnano。
  2. 注意CSS选择器的效率问题

图片方面

  1. 进行图片压缩
  2. 预先加载核心图片：首屏核心图片使用<link rel="preload">提高下载优先级，提前到 JS 或者 CSS 之前下载。
  3. 懒加载: 对于处在首屏之外的图片，可以先展示占位元素，在快滚动到屏幕内的时候再去加载图片。
  4. 渐进式加载：额外准备一张高度压缩、比较模糊的图片，页面加载时先加载这张图片，后加载原图。虽然一开始看到的图片比较模糊，但体验也比逐行加载的原图要好。

三、组件渲染方面的优化

就React来说，使用React.memo/useMemo或者PureComponent来减少子组件不必要的渲染。