😄作者简介： 小曾同学.com,一个致力于测试开发的博主⛽️，主要职责：测试开发、CI/CD
如果文章知识点有错误的地方，还请大家指正，让我们一起学习，一起进步。
😊 座右铭：不想当开发的测试，不是一个好测试✌️。
如果感觉博主的文章还不错的话，还请点赞、收藏哦！👍

通读本篇文章，您将获得以下内容

一 HTTP 传输过程中的数据压缩

HTTP 头信息中用相关字段 Accept-Encoding 来标识是否使用某种压缩格式，只有客户端在 HTTP 请求头里面指明可以支持指定的压缩时，服务端才返回压缩的内容，避免客户端无法解析的情况。数据压缩可以提升响应时间。（大部分网站都是开启的）

需要注意的是，HTTP 传输中的压缩是一个双向的设置，一方面是客户端声明可以接受压缩后的内容，另一方面是服务器也要开启压缩相关的配置。

二 客户端的缓存

客户端缓存不仅可以提高响应时间还可以节省带宽。
用户访问网页时，针对一些静态内容，如图片、JS、CSS等，可能和上次访问的内容没有任何变化，如果每次都要反复从服务器拉取这些内容，则会浪费带宽，对于客户端的响应时间也有影响。因此客户端缓存油然产生。

接下来我们举个例子：假如访问 qq.com首页，

第一次访问（在无缓存的情况下，所有的元素都需要从服务端拉取）

第二次访问：在不清除缓存的情况下访问。（直接刷新下网页即可）。（补充：快捷方式 Command+R：刷新当前页面；Command+Shift+R：强制刷新当前页面。）

我们会发现在Size栏目中，有很多标识 “memory cache”，表示本次访问这些资源都是直接从本地缓存文件读取的，而不是通过 HTTP 网络请求获取的。

我们点开一个JS文件

我们可以对比上面这两个图片，同样的 js 文件，一个返回 200，一个返回 304。304 响应码表示服务端接收到浏览器的请求，判断后认为服务端最新的该文件版本和客户端已有一致的，于是告诉客户端不需要再传输完整的内容了，可以直接用本地的版本。虽然客户端发起了请求，但是服务端只需要通过 304 简单应答，不必重新传输文件的内容，同时也起到了缓存的目的。

另外，在第二次访问的消息头中，我们看到

If-Modified-Since: Wed, 27 Jan 2021 09:11:32 GMT，这个时间戳是第一次访问 custom_ed041a23.js 时响应头中的 Last-Modified 字段的内容。就是说第一次收到响应时，将对应的信息存储起来,等到下次再请求这个同样的URL时，客户端发现缓存因为过期不能直接使用了（但是不会立即删除缓存文件），而会把时间戳回传给服务器，告诉服务器说本地有这个版本的文件。这样服务端收到这个信息后可以对比给出合适的响应。

在Mac中可以查看Chrome的缓存文件，目录如下：/Users/xiaozeng/Library/Caches/Google/Chrome/Default/

三 常用Web性能测试工具

3.1 PageSpeed分析工具

进入首页后https://pagespeed.web.dev/，输入要访问的地址即可开始测试分析。

3.2 WebPageTest

这是一个在线工具（https://www.webpagetest.org/），可以统计访问每个网址的时间。登陆工具后，输入待测网址即可开启测试。等待一会后就可以看到结果。

单个请求的详细时间，包括DNS查询时间、链接建立时间等。

3.3 Mac中查看Android设备浏览器性能

首先需要在Chrome浏览器里安装一个扩展程序：ADB，大概就长下图这个样子

安装完成后将小图标点亮。

通过 USB 线连接手机和电脑，在手机上打开 Chrome 浏览器，（必须是 Chrome 才可以识别），在 Mac Chrome 浏览器中输入 chrome://inspect/#devices，然后点击 inspect，就可以打开 Chrome 的开发者工具，此时，手机上的操作都会反映到这个开发者工具上面。就可以直接在 Mac Chrome 浏览器中查看某个请求到网络耗时分析。

3.4 iOS打开网页调试器

如果在Mac中调试Safari浏览器，首先需要在iOS设备上开启“网页检查器”。（设置——Safari浏览器——高级）

通过数据线连接手机和电脑，打开 Mac 中 Safari 浏览器，在工具栏选择对应设备

即可出现当前手机Safari浏览器上的信息

如果只是简单地使用工具，其实门槛是非常低的，更重要的是数据的解读和分析，而这方面依赖于对具体技术细节的理解，以及对被测产品的架构和部署等方面的深入了解。