Chrome的Waterfall

参考:https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#timing

浏览器根据html中外连资源出现的顺序,依次放入队列(Queue),然后根据优先级确定向服务器获取资源的顺序。同优先级的资源根据html中出现的先后顺序来向服务器获取资源

  • Queueing. 出现下面的情况时,浏览器会把当前请求放入队列中进行排队

    • 有更高优先级的请求时.
    • 和目标服务器已经建立了6个TCP连接(最多6个,适用于HTTP/1.0和HTTP/1.1)
    • 浏览器正在硬盘缓存上简单的分配空间
  • Stalled. 请求会因为上面的任一个原因而阻塞
  • DNS Lookup. 浏览器起正在解析IP地址.
  • Proxy negotiation. The browser is negotiating the request with a proxy server.
  • Request sent. The request is being sent.
  • ServiceWorker Preparation. The browser is starting up the service worker.
  • Request to ServiceWorker. The request is being sent to the service worker.
  • Waiting (TTFB). 浏览器等待响应第一个字节到达的时间. 包含来回的延迟时间和服务器准备响应的时间.
  • Content Download. The browser is receiving the response.
  • Receiving Push. The browser is receiving data for this response via HTTP/2 Server Push.
  • Reading Push. The browser is reading the local data previously received.

如图所示,select2_metro.css在位置上要比avatar1_small.png和index.js靠后,但是优先级确实最高(Higthest-->High-->Medium-->Low),所以这个下载顺序是:select2_metro.css-->index.js-->avatar1_small.png

时间: 2024-10-02 03:18:38

Chrome的Waterfall的相关文章

jQuery瀑布流插件——jQuery.Waterfall

插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计算出列数,再维护一个数组,存储每列的高度,往最小高度的列添加块即可.滚动时,当最小高度出现在可视窗口时就启动ajax从服务器拉取更多的数据. 注意的地方: 如果瀑布流的块中包含图片,则需要事先知道图片的高度(其实就是为了要计算出整个块的高度,以便精确定位),图片的高度可以从服务器返回,本插件是整合p

Chrome 开发工具指南

Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 JavaScript 断点并可深入理解代码的最优化策略. 适用人群 这篇教程将会带你从头开始使用学习如何利用 Google 提供的组件进行 Chrome 上的相关开发调试工作. 通过本教程,你将学会如何使用这些工具,并且学会如何通过它来分析调试提供的 Demo . 学习前提 在你继续本教程之前,你必须对

ChromeDriver与Chrome版本对应关系

备注: 下载ChromeDriver的时候,可以在notes.txt文件中查看版本对应关系. ----------ChromeDriver v2.29 (2017-04-04)---------- Supports Chrome v56-58 Resolved issue 1521: Assignment to Object.prototype.$family causes a crash [['Pri-1']] Resolved issue 1482: Chromedriver cannot

通过Chrome浏览器进行android调试/Remote Debugging on Android with Chrome

The way your web content behaves on mobile can be dramatically different from the desktop experience. Remote debugging with Chrome DevTools lets you debug live content on your Android device from your development machine. Remote debugging on Android

Chrome DevTools — Network -- 转载

转载地址:https://segmentfault.com/a/1190000008407729 记录网络请求 默认情况下,只要DevTools在开启状态,DevTools会记录所有的网络请求,当然,记录都是在Network面板展示的. 停止记录网络请求 点击Stop recording network log红色图标,当它变为灰色时,表示DevTools不在记录请求 在Network面板下,Command+E(Mac)或者Ctrl+E(Windows,Linux) 清除网络请求 跨页面加载时,

Chrome DevTools--Network

记录网络请求 默认情况下,只要DevTools在开启状态,DevTools会记录所有的网络请求,当然,记录都是在Network面板展示的. 停止记录网络请求 点击Stop recording network log红色图标,当它变为灰色时,表示DevTools不在记录请求 在Network面板下,Command+E(Mac)或者Ctrl+E(Windows,Linux) 清除网络请求 跨页面加载时,保留网络请求记录 当页面重载或者页面跳转时,默认情况下,Network面板下的网络请求记录表也是刷

Python爬虫知识点——Chrome开发者工具Network

Chrome开发者工具中Network功能介绍 第一列Name:请求的名称,一般会将URL的最后一 部分内容当作名称. 第二列Status: 响应的状态码,这里显示为200,代表响应是正常的.通过状态码,我们可   以判断发送了请求之后是否得到了正常的响应. 第三列Type: 请求的文档类型.这里为document, 代表我们这次请求的是一个HTML文档,内容就是一些HTML代码. 第四列initiator: 请求源.用来标记请求是由哪个对象或进程发起的. 第五列Size: 从服务器下载的文件和

chrome F12_Network 开发者工具详解

本文为学习chrome F12_Network的一点记录,如有不妥之处请各位大神指点,谢谢! 开发者工具面板 最常用的前四个功能模块如下: Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈. Console:录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell. Sources:断点调试JS. Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态.资源类型.大小.所用

Web协议详解与抓包实战:如何用Chrome的Network面板分析HTTP报文

一.Chrome 抓包:Network 面板 1. Network 面板 • 控制器:控制面板的外观与功能• 过滤器:过滤请求列表中显示的资源• 按住 Command (Mac)或 Ctrl (Window / Linux),然后点击过滤器可以同时选择多个过滤器• 概览:显示 HTTP 请求.响应的时间轴• 请求列表:默认时间排序,可选择显示列• 概要:请求总数.总数据量.总花费时间等 2.控制器 要跨页面加载保存请求Preserve log 用户的网络比较差的时候问题就可以复现 二.过滤器 1