天天看点

Chrome开发者工具network标签页里的transferred over network和resources loaded by the page的区别

Chrome开发者工具network标签页里的transferred over network和resources loaded by the page的区别

有中文博客介绍说transferred over network是通过网络加载的资源尺寸,而resources loaded by the page不仅包含前者,也包含直接从浏览器缓存里加载的资源尺寸。这种说法不完全准确,更精确的说法是,resources loaded by the page统计的是前端页面加载的所有资源经过解压之后的原始大小。

如图,在打开Chrome开发者工具的Use Large request rows选项, 就能显示出经过网络加载资源压缩过后的原始大小,如下图所示:

Chrome开发者工具network标签页里的transferred over network和resources loaded by the page的区别

以上说明来自Google官网:

https://developers.google.com/web/tools/chrome-devtools/network/reference#uncompressed https://stackoverflow.com/questions/56043151/what-is-the-difference-between-transferred-and-resources-in-chrome-devtools