【前端】Chrome DevTools 笔记
1. 查看网络耗时 timeline
生命周期按照以下类别显示花费的时间:
- Queuing
- Stalled
- 如果适用:DNS lookup、initial connection、SSL handshake
- Request sent
- Waiting (TTFB)
- Content Download
详细解释:
Queuing
如果某个请求正在排队,则指示:
请求已被渲染引擎推迟,因为该请求的优先级被视为低于关键资源(例如脚本/样式)的优先级。 图像经常发生这种情况。
请求已被暂停,以等待将要释放的不可用 TCP 套接字。
请求已被暂停,因为在 HTTP 1 上,浏览器仅允许每个源拥有六个 TCP 连接。
生成磁盘缓存条目所用的时间(通常非常迅速)Stalled/Blocking
请求等待发送所用的时间。 可以是等待 Queueing 中介绍的任何一个原因。 此外,此时间包含代理协商所用的任何时间。
Proxy Negotiation
与代理服务器连接协商所用的时间。
DNS Lookup
执行 DNS 查询所用的时间。 页面上的每一个新域都需要完整的往返才能执行 DNS 查询。
Initial Connection / Connecting
建立连接所用的时间,包括 TCP 握手/重试和协商 SSL 的时间。
SSL
完成 SSL 握手所用的时间。
Request Sent / Sending
发出网络请求所用的时间。 通常不到一毫秒。
Waiting (TTFB)
等待初始响应所用的时间,也称为至第一字节的时间。 此时间将捕捉到服务器往返的延迟时间,以及等待服务器传送响应所用的时间。
Content Download / Downloading
接收响应数据所用的时间。
【前端】Chrome DevTools 笔记的更多相关文章
- Chrome DevTools学习笔记
---恢复内容开始--- chrome和firefox的开发者工具大同小异,都非常强大.今天在博客园上看了这篇文章(http://www.cnblogs.com/Wayou/p/chrome-cons ...
- Chrome DevTools 调研笔记
1 说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2 Elements 2.1 功能 检查和实时更新页面的HTML与C ...
- Chrome DevTools 面板全攻略
李华西,微医云服务团队前端开发工程师,喜欢瞎折腾,典型猫奴 Console 面板 此章节请打开 devtools/console/console.html 一起食用 一方面用来记录页面在执行过程中的信 ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- Chrome DevTools的15个使用技巧(译)
谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须掌握的工具.大多数前端开发者可能熟悉关于chorme的许多特 ...
- chrome调试笔记
F12启动调试 1.右键加载按钮可以清空缓存并重新加载,有时候浏览器有缓存,代码更新不会及时反映出来. 2.performance mointer实时查看performance 点击三个竖着的小点,选 ...
- Chrome DevTools – 键盘和UI快捷键参考
Chrome DevTools有几个内置的快捷键,可以节省你的日常工作的时间. 本指南提供了Chrome DevTools中每个快捷键的快速参考.虽然一些快捷方式在全局范围内可用,但其他的快捷方式用于 ...
- Chrome Devtools简介
Chrome开发工具(又称DevTools),是一套内嵌在chrome浏览器内部的web编写和调试工具.DevTools提供给web开发人员深入地访问浏览器内部和web应用的机会.DevTools可以 ...
- Chrome DevTools good good study day day up
Chrome DevTools 官方页面 https://developer.chrome.com/devtools
随机推荐
- 树莓派 Learning 002 装机后的必要操作 --- 02 解决中文问题
树莓派 装机后的必要操作 - 解决中文问题 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 每一块树莓派,装机后都应该执行的步骤 刚装机后, ...
- std::min error C2059: 语法错误:“::” 的解决方法
std::min error C2059: 语法错误:"::" 的解决方法 下面这段代码: size_t n = std::min(count_, num_elements); 编 ...
- Spring入门第二十七课
声明式事务 直接上代码: db.properties jdbc.user=root jdbc.password=logan123 jdbc.driverClass=com.mysql.jdbc.Dri ...
- 深入学习JavaScript: apply 方法 详解
我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...
- HDU 5242 Game (贪心)
题意:给定一棵树,要求从根结点1走k次,每次都是到叶子结点结束,把走过的所有的结点权值加起来,最大是多少. 析:先把每个结点到根结点的路径之和求出来,然后按权值从大到小排序,然后每次把路径中的权值求出 ...
- Django 之 JsonResponse 对象
JsonResponse 是 HttpResponse 的子类,与父类的区别在于: JsonResponse 默认 Content-Type 类型为 application/json HttpResp ...
- 会过vip怎么赚钱?大学生,宝妈创业圈子
会过vip怎么赚钱?是骗局吗1.如果说会过Vip不赚钱,那么一定是我们的没有时间去真心的热爱她:如果你对她如果你对它抱着一颗平和的心,认真的去分享,认真的去听一些前辈的经验,赚钱真的不是难事:2.如果 ...
- 【转-mysql索引失效的几种情形】
索引并不是时时都会生效的,比如以下几种情况,将导致索引失效: 1.如果条件中有or,即使其中有条件带索引也不会使用(这也是为什么尽量少用or的原因) 注意:要想使用or,又想让索引生效,只能将or条件 ...
- 【ssm整合打印sql语句】
#定义LOG输出级别log4j.rootLogger=INFO,Console,File #定义日志输出目的地为控制台log4j.appender.Console=org.apache.log4j.C ...
- nej 搭配 vue 方案
此文已由作者张磊授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言 目前项目使用的技术是 nej + regular,路由方面是使用 nej 自带的,随着时间推移,项目已经 ...