【前端】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
随机推荐
- LoadRunner 参数模拟——快速得到并发用户的进场规则
LoadRunner 并发时,一般需要进入参数化 用户名或者相关的字段数据,用以满足在并发时无限的接近真实的使用场景: 但当你在设置好参数化的读取规则后,在执行并发场景时,用户并发加载顺序是否确实如你 ...
- hibernate查询的方式和变量
1.实体查询: hql="FROM User"; List list= session.createQuery(hql).list(); for(Object obj:list){ ...
- 【Qt官方例程学习笔记】Analog Clock Window Example (画笔的平移/旋转/缩放应用)
这个例子演示了如何使用QPainter的转换和缩放特性来简化绘图. 值得学习的: 定时器事件ID检查: 在定时器事件中检查定时器id是比较好的实践. QPainter抗锯齿: We call QPai ...
- C# BackgroundWorker(异步线程)
日期:2018年11月28日 环境:Windows 10,VS2015 前言 .NET 类库中提供了一个快捷使用多线程的帮助类BackgroundWorker,能够快速创建一个新的线程,并能报告进度 ...
- 一套简单的web即时通讯——第二版
前言 接上一版,这一版的页面与功能都有所优化,具体如下: 1.优化登录拦截 2.登录后获取所有好友并区分显示在线.离线好友,好友上线.下线都有标记 3.将前后端交互的值改成用户id.显示值改成昵称ni ...
- Struts2 源码分析-----工作原理分析
请求过程 struts2 架构图如下图所示: 依照上图,我们可以看出一个请求在struts的处理大概有如下步骤: 1.客户端初始化一个指向Servlet容器(例如Tomcat)的请求: 2.这个请求经 ...
- SQL Server2012如何打开2016的profiler文件
SQL Server 2012如何打开2016的profiler文件 作者:markjiang7m2 原文地址:https://www.cnblogs.com/markjiang7m2/p/10980 ...
- 有关UPDATE操作的一些想法
我们平常写代码的时候,无疑都会接触大量的数据CURD操作.第一反应是这太简单了,那么你在编写UPDATE操作的时候是怎样的逻辑呢?比较下面两段伪代码: code exp.1 $SQL = " ...
- 根据T-Code查看用户出口的代码
在此非常非常感谢源作者,这段代码真的非常非常有用好用! REPORT YLBTEST. TABLES : tstc, "SAP Transaction Codes(SAP 事务代 ...
- QuotaExceededError: The quota has been exceeded. localStorage缓存超出限制
今天在项目中遇到了一个问题,localStorage存储超出限制.报错信息如标题.这个是因为最近做了一波优化,把导航栏和一些用户信息本地化存储,都放在localStorage里,也不是每个用户会出现这 ...