Chrome控制台中network底部概要参数

最新推荐文章于 2025-04-09 15:49:07 发布
最新推荐文章于 2025-04-09 15:49:07 发布
阅读量1.9k 收藏 5
点赞数
分类专栏： HTML 优化 文章标签： 前端 html chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Mrlujiao_code/article/details/123229391
版权
本文详细解读了网页性能关键指标，包括资源请求、网络加载、页面大小、响应时间、DOM加载和完整加载等，帮助理解面试中常被问及的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

本来觉得这是个小问题，没有怎么注意过，但在一次面试中被问到了。细节是很重要的！
在这里插入图片描述
1、requests => 资源请求总数；
2、transferred => 网络加载资源大小；
3、resources => 页面所有资源总大小（包含网络资源、浏览器缓存解析后的资源等）；
4、Finish => 所有请求从发起到响应完成时间（注意：请求不只是XHR，页面请求和页面解析也是不同线程，不直接相关）；
5、DOMcontentLoaded => HTML DOM结构树加载完成时间（不含样式表、媒体资源等）；
6、Load => 页面所有内容加载完成时间（包含DOM结构、外部资源）；

Chrome Network面板工具之万文多图详解
herosunly的博客
05-25 1万+
1. 基本介绍 2. 控制器 3. 过滤器 4. 请求列表 4.1 属性列表 4.2 排序方式 4.3 查看具体的请求内容
Chrome教程（一）NetWork面板分析网络请求
07-19 4754
1.如何打开 无论是在Windows还是Mac，都可以使用（FN）+F12键打开Chrome的Network面板。 2.面板组成 如图所示，Chrome的Network面板主要由5个部分组成，包括控制器、过滤器、概览、请求列表、概要，下面简单介绍下这5个部分的作用。 控制器：控制面板的外观与功能 过滤器：过滤请求列表中显示的资源 按住Command（Mac）或Ctrl（Window/Linux），然后点击过滤器可以同时选择多个过滤器。 概览：显示HTTP请求、响应的时间轴。 请求列表：默认时间
Chrome控制台network底部的Finish，DOMContentLoaded和Load
qq_33539213的博客
05-08 7383
打开chrome控制台network部分刷新页面，可以看到浏览器记录的网络资源加载时间，可以用于评估网页性能。 DOMContentLoaded 和 Load 和 Finish的含义和区别 DOMContentLoaded 和 Load DOMContentLoaded：DOM树构建完成。 即HTML页面由上向下解析HTML结构到末尾封闭标签 Load：页面加载完毕。 DOM树构建完成后，继...
chrome开发者工具network选项卡最下面的状态栏数据说明
pzy_666的博客
02-19 4712
你这到底指的是哪里？ 以下图数据为例，逐个说明 72 requests 是指本次总共监听到了72个请求 35.8 kB transferred 通过网络加载的资源有35.8 kB 2.1 MB resources 本次监听到的所有请求加载的所有资源经过解压之后的原始大小 Finish: 1.38 s 页面上所有 http 请求发送到响应完成的时间， HTTP1.0/1.1 协议限定，单个域名的请求并发量是 6 个，即 Finish 是所有请求（不只是XHR请求，还包括DOC，img，js，css等资源的
如何运用浏览器进行各种调试？（网络、内存、控制台等调试用法）
最新发布
卷王
04-09 1096
你可以优化该函数，减少计算量，提升性能。：在开发过程中，你可能会遇到某个功能没有按照预期工作，比如点击按钮后没有反应，或者某个值未正确传递。：你正在开发一个网站，但发现浏览器显示“不安全”的警告，可能是证书问题或加载了 HTTP 内容。：你会看到一个 404 错误（请求的 API 地址不存在），你可以检查 API 请求的 URL 并修正。：你开发了一个电商网站，页面加载较慢，或者用户在提交订单时，订单数据没有成功发送到服务器。：你开发了一个带有用户认证功能的应用，当用户登录后，页面没有记住用户的登录状态。
Chrome开发者工具network标签页里的transferred over network和resources loaded by the page的区别
chuixue24的博客
03-30 2845
如下图所示： 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 Network实验
zjy660358的专栏
01-02 808
前言 在开发网页过程中，我们会碰到这页面加载也太慢了，那么就要去调优。要进行调优，当然要先知道哪里慢了。那么就需要Chrome的Network看板 版本：Chrome 95 实验 源码 有css、js、ajax有图片、css中有背景图片设置 loadfinsh.css #testcssload{ width:300px; height:300px; background:url(http://img.zdxsd900.com/jydj_indexbanner_3.jpg) no
Chrome控制台 网站性能优化指标一览
A_one2010的博客
12-04 1496
Chrome控制台 网站性能优化指标一览及H5应用性能优化
Chrome这些调试技巧
KHOST的博客
06-03 1350
1.如何打开 无论是在Windows还是Mac，都可以使用（FN）+F12键打开Chrome的Network面板。 2.面板组成 如图所示，Chrome的Network面板主要由5个部分组成，包括控制器、过滤器、概览、请求列表、概要，下面简单介绍下这5个部分的作用。 控制器：控制面板的外观与功能 过滤器：过滤请求列表中显示的资源 按住Command（Mac）或Ctrl（Window...
chrome插件：User-Agent Switcher for Chrome模拟搜索引擎蜘蛛之访问蜘蛛页
21世纪最后一个SEO
03-17 2607
这里写目录标题一、概要二、所使用的工具三、安装User-Agent Switcher for Chrome插件四、使用User-Agent Switcher for Chrome插件五、更多User-Agent 一、概要 蜘蛛页可以简单的理解为百度搜索引擎抓取的页面。那么在上线项目中，怎么模拟蜘蛛去访问蜘蛛页呢？在这里提供一种利用谷歌插件User-Agent Switcher for Chrome来进行模拟查看。 二、所使用的工具 Chrome 谷歌浏览器 Chrome 扩展程序：User-Agent S
Chrome开发者工具入门使用指南
- 表明该博文可能涉及到Chrome Developer Tools中各种实用工具的介绍和使用技巧，如网络请求分析、安全检查、内存分析等。 - 博文可能展示了如何利用这些工具进行高效的开发和问题排查。 ### 压缩包子文件的文件...
关于ajax 返回 JSON格式传输数据量大的问题
前端看世界
07-03 8680
ajax 返回JSON数据,Size数据量大,传输时间长的解决方案 问题描述 有一个接口需要一次性返回数据, json数据的Size最大的时候,有将近1M的数据量,返回时间将近20s,是可忍,孰不可忍? 这个问题,是必须要解决的,估计除了我们自己,没人愿意等上20s了 解决方案 减少SIze主要是两个方面:resources(资源) 和 transferred(传输); 首先,当然是压缩,分为2个方面 可压缩的字段内容,全部压缩 减少不必要的字段 然而,resources(资源) 和 transferr
Chrome浏览器http访问跨越问题与解决方法
热门推荐
深之JohnChen的专栏
01-13 1万+
chrome跨越处理
golang获取utc时间_H3C交换机修改时间
weixin_28726391的博客
12-18 652
首先学习：　　NTP　　network time protocol　　网络时间协议　　UTC　　世界协调时间　　 # 查看时钟设置　dis clock #图片为已经配置好的时钟有两种时钟获取方式1.开取NTP ，由网络时钟服务器获取时间　　　　clock protocol ntp mdc mdc-id2.不置时钟服务器， 　　　　　　　　　　　　 clock protocol none# cloc...
服务器带宽承载多少人同时访问计算方法-浏览器中查看当前网页所有资源数据大小-客服系统高并发承载人数【唯一客服】...
程序员老狼专注开发aigc或客服系统应用
03-13 953
浏览器中怎么查看当前网页所有资源的数据大小 在开发者工具的“网络”选项卡中，可以看到所有请求和响应的详细信息，包括每个资源的大小。如果需要查看网页所有资源的总大小，可以按照以下步骤操作： 打开要查看的网页。 打开开发者工具，切换到“网络”选项卡。 刷新网页，等待开发者工具记录所有请求和响应。 在开发者工具中，找到“Size”(大小)一列，可以看到每个资源的大小，以字节为单位。 在底部的状态栏中...
前端性能优化之性能优化的指标和工具（chrome devtools、lighthouse、webpagetest）
jieyucx的博客
08-10 1814
测量模型是谷歌为帮助开发者更好地了解和改善性能问题而开发的一种用户体验评估框架。响应、动画、空闲和加载，对每个阶段都提出了性能目标。响应（Response）：处理用户交互的目标是在100毫秒内完成。动画（Animation）：每帧的渲染目标是16毫秒，对应的帧率是60帧/秒。空闲（Idle）：利用空闲时间执行后台工作，且在50毫秒内能够回应用户的交互。加载（Load）：尽量在1000毫秒内完成内容的加载。通过这个框架，开发者可以有针对性地优化并提升用户体验。
chrome调试工具Network一些参数
wade3po的博客
05-14 3005
今天简单说一下chrome开发者工具（DevTools）的Network，就只是几个模块简介一下。前端开发，对这个应该都特别熟悉。 Network网络面板，展示页面中所有请求的列表，可以查看各个请求的详细信息，请求的信息，响应的信息，还有各种时间线等。 本来想用画图工具把每一个都标示一下，奈何有点菜，就直接介绍几个重要的，其他可以自己点一点看一看。 控制器： Preserve log：跳转页面或者刷新页面还保留之前发起的请求详情。可以用来追踪一些接口。 Disable cache：在调试一些加载时间或者性
浏览器原理 03 # HTTP 请求流程：为什么很多站点第二次打开速度会很快？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
11-09 1121
说明 【浏览器工作原理与实践】 HTTP 是一种允许浏览器向服务器获取资源的协议，是 Web 的基础，HTTP 也是浏览器使用最广的协议，所以要想学好浏览器，就要先深入了解 HTTP。 浏览器端发起 HTTP 请求流程 如果你在浏览器地址栏里键入极客时间网站的地址：http://time.geekbang.org/index.html， 浏览器会完成哪些动作呢？ 1. 构建请求 首先，浏览器构建请求行信息（如下所示），构建好后，浏览器准备发起网络请求。 GET /index.html HTTP1.1
解决vue项目打包后文件过大导致首屏加载30s+的问题
sinat_40914914的博客
03-12 1605
依赖 vue v2.6 axios+tailwindcss+element-ui+... 文件打包情况 File Size Gzipped dist/js/chunk-vendors.fb40d429.js 1205.36 KiB 337.06 KiB dist/js/album~articleAdd~articleEdit.84528c7c.js 69.05 KiB
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值