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

如下图所示：

network底部有1.1 MB transferred over network和5.1 MB resources loaded by the page. 这两个大小有何区别？

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

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

以上说明来自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

更多Jerry的原创文章，尽在：“汪子熙”:

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

Chrome 开发者工具 performance 标签页的用法
Analyze runtime performance 运行时性能是您的页面在运行时的表现,而不是加载. 就 RAIL 模型而言,本文介绍的方法对于分析页面的响应.动画和空闲阶段非常有用. 在隐身模式 ...
SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类
本教程的前面一系列步骤,我们或多或少已经使用了 Chrome 开发者工具来学习 SAP UI5 应用的开发,比如通过 Elements 标签页查看 SAP UI5 XML 视图里定义的控件,运行时生成 ...
Angular http client发起的请求在Chrome开发者工具network标签页里观察到的界面
源代码: import { Injectable } from '@angular/core'; import {HttpClient} from '@angular/common/http';@In ...
Chrome开发者工具Cookie标签里看到的ga cookie是什么意思
如图: 答案是和这个analytics.js有关,google家的东西. 为让 Google Analytics(分析)能够确定两个不同匹配是否属于同一用户,必须将与特定用户关联的唯一标识和每个匹配一 ...
Chrome 开发者工具 workspace 的概念
Edit files with Workspaces 本教程提供设置和使用工作区的实践练习,以便您可以在自己的项目中使用工作区. 工作区使您能够将在 DevTools 中所做的更改保存到存储在计算机上 ...
Chrome开发者工具关于网络请求的一个隐藏技能
这个隐藏技能的背景是,最近出于学习目的,我写了一个百度贴吧的网络爬虫,专门爬取一些指定主题的贴吧帖子. 抓取帖子用的JavaScript函数如下: function getPostByAJAX(req ...
Chrome 开发者工具无法显示服务器正常返回的 HTTP 请求 - Failed to load response data
今天做开发时遇到一个问题,Chrome 开发者工具 network 标签里,虽然一个 HTTP 请求已经成功从服务器端返回,但是 Chrome 开发者工具里,仍然显示 Failed to load r ...
如何使用Chrome开发者工具找到Marketing Cloud某个contact的guid
我们使用nodejs对contact进行修改时,需要指定待修改contact实例的guid. 这个guid属于technical属性,在Marketing Cloud UI上默认情况下不可见.如何找到 ...

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

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

最新文章

热门文章