前端性能优化-网络篇
介绍
前面我们讲了性能优化的综述,这里,我们来讲一下性能优化的网络部分,从一个网络请求的过程开始,详细讲述,从请求流程和减少网络负载的各个方面的核心手段。希望大家对网络优化有一个更立体的认知。
输入URl到请求结束的流程
输入URL
URL解析
DNS查询
建立TCP连接
发送HTTP请求
服务器处理请求
服务器返回响应
关闭连接
通过思维导图,再看看其中的详细过程
下面是 chrome 开发者工具的请求 timeline
根据整个链路,我们总结了两个优化方向,网络链路优化和请求优化
网络链路优化
1. DNS 预解析 -- dns-prefetch
通过在页面加载初期就解析可能需要的域名,当实际需要加载这些域名的资源时,DNS 解析已经完成,从而加快资源的加载速度。这个标签对于 CDN 域名等非主域名提前解析 CDN ,有很大的帮助,强烈建议添加。
dns-prefetch
可以通过 <link>
标签在 HTML 中声明,或者通过 HTTP 头部进行配置。
<head>
<link rel="dns-prefetch" href="https://cdn.webfem.com">
</head>
2. HTTP 预连接 -- preconnect
preconnect
用于提前建立与目标域名的连接,包括 DNS 解析、TCP 握手和 TLS 协商。这比 dns-prefetch
更全面,适用于需要更早建立连接的场景。
使用方法和 dns-prefetch
类似
<head>
<link rel="preconnect" href="https://cdn.webfem.com" crossorigin>
<head>
3. 内容预加载 -- prefetch
prefetch
是一种资源提示,它告诉浏览器在空闲时间提前下载并缓存将来可能需要的资源。这可以显著减少用户请求这些资源时的等待时间,从而提高用户体验。
使用场景:
当您预测用户可能会导航到另一个页面或执行某个操作时,可以提前预加载该页面或操作所需的资源。
对于单页应用(SPA),预加载用户可能访问的下一个视图或组件可以显著提高性能。
使用方法:
<head>
<!-- 预加载整个页面 -->
<link rel="prefetch" href="next-page.html">
<!-- 预加载特定资源,如图片、脚本或样式表 -->
<link rel="prefetch" href="image.png" as="image">
<link rel="prefetch" href="script.js" as="script">
<link rel="prefetch" href="styles.css" as="style">
</head>
注意事项:
- 不要过度使用
prefetch
,因为它可能会浪费带宽和资源,特别是当预加载的资源最终未被使用时。
4. 优先加载 -- preload
preload
是一种更强大的资源提示,它告诉浏览器立即请求并缓存特定资源,以便在需要时立即使用。与 prefetch
不同,preload
更侧重于当前页面渲染所需的资源,而不是将来可能需要的资源。
使用场景:
当您知道某个资源对当前页面的渲染至关重要,并且希望确保它在需要时立即可用时,可以使用
preload
。对于关键路径上的资源,如关键的 CSS、JavaScript 或字体文件,
preload
可以显著提高页面加载性能。
使用方法:
<head>
<!-- 立即加载 CSS -->
<link rel="preload" href="styles.css" as="style">
<link rel="stylesheet" href="styles.css">
<!-- 立即加载 JavaScript -->
<link rel="preload" href="main.js" as="script">
<script src="main.js"></script>
<!-- 立即加载 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
</head>
注意事项:
preload
的资源会被浏览器优先加载,这可能会影响其他资源的加载顺序和性能。
以上四种优化方式我们同程为 resource hints
5. 资源缓存
通过http的缓存能力,将资源缓存到浏览器端,可以直接从浏览器拿取内容,不经过服务器,或者经过浏览器,浏览器返回 304,告诉浏览器直接使用缓存,不用下载。
缓存常用的 http header 包括,cach-control 和 expire 。这里内容较多,暂不展开,之后详细介绍
6. 升级 HTTP 协议
HTTP 协议,主要包括HTTP/1.1、HTTP/2和HTTP/3。高版本在性能、安全性和功能上进行了优化和改进。能使用高版本,尽量使用高版本,同时做好兼容性配置。下面是几个版本的核心能力
HTTP 版本号 | 核心功能 |
---|---|
HTTP/1.1 | 引入持久连接和管道化,提升了连接复用和传输效率,但存在队头阻塞问题 |
HTTP/2 | 采用二进制协议和多路复用,消除了队头阻塞,引入头部压缩和服务器推送,显著提升了性能和效率。 |
HTTP/3 | 基于QUIC协议,进一步优化了连接建立速度、传输效率和安全性,解决了TCP的一些固有问题,提供了更好的用户体验。 |
减少网络负载
1. 网络传输协议压缩
1.1 开启 gzip 和 Brotli 压缩
在服务端放置 gzip 压缩后的文件,开启 gzip 之后,可以直接发送 gzip 文件,浏览器端会自动解析 gzip。
Brotli 和 gzip 一样的压缩策略,只不过压缩比更高,后来居上,但是兼容性不好,使用 brotli 需要考虑兼容性
2. 资源内容压缩
2.1 JS 和 CSS 压缩
通过打包工具,将 js 和 CSS 压缩到更小的体积,具体实现可以参考:https://webfem.com/post/webpack-assets-mini
2.2 图片压缩
图片大小优化有两个方向:
通过压缩算法,将图片压缩到更小的体积,常用的网站如:https://tinify.cn/
转换图片格式,获得更小的体积。比如 jpg 转 png,png 转 webp等,webp 有更小的体积,但要考虑兼容性问题。
3. 利用 tree shaking
使用第三方库时,经常会将所有代码引入进来,但是只用到其中的很少的功能。因此,通过打包工具,开启tree shaking,可以有效减少生成代码的体积。
开始tree shaking 的优化,可以参考:https://webfem.com/post/webpack-boundle-optimization
4. 代码拆分
不同页面有不同的功能,代码逻辑不同。因此,在加载首页时,非必要的内容就不要加载,减少首次加载的资源的体积。
总结
通过学习,希望大家对性能优化有个结构化的认识,从点到面,整体考虑。
原文地址:https://webfem.com/post/performance-network,转载请注明出处