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 笔记的更多相关文章

  1. Chrome DevTools学习笔记

    ---恢复内容开始--- chrome和firefox的开发者工具大同小异,都非常强大.今天在博客园上看了这篇文章(http://www.cnblogs.com/Wayou/p/chrome-cons ...

  2. Chrome DevTools 调研笔记

    1  说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2  Elements 2.1  功能 检查和实时更新页面的HTML与C ...

  3. Chrome DevTools 面板全攻略

    李华西,微医云服务团队前端开发工程师,喜欢瞎折腾,典型猫奴 Console 面板 此章节请打开 devtools/console/console.html 一起食用 一方面用来记录页面在执行过程中的信 ...

  4. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  5. Chrome DevTools的15个使用技巧(译)

    谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须掌握的工具.大多数前端开发者可能熟悉关于chorme的许多特 ...

  6. chrome调试笔记

    F12启动调试 1.右键加载按钮可以清空缓存并重新加载,有时候浏览器有缓存,代码更新不会及时反映出来. 2.performance mointer实时查看performance 点击三个竖着的小点,选 ...

  7. Chrome DevTools – 键盘和UI快捷键参考

    Chrome DevTools有几个内置的快捷键,可以节省你的日常工作的时间. 本指南提供了Chrome DevTools中每个快捷键的快速参考.虽然一些快捷方式在全局范围内可用,但其他的快捷方式用于 ...

  8. Chrome Devtools简介

    Chrome开发工具(又称DevTools),是一套内嵌在chrome浏览器内部的web编写和调试工具.DevTools提供给web开发人员深入地访问浏览器内部和web应用的机会.DevTools可以 ...

  9. Chrome DevTools good good study day day up

    Chrome DevTools 官方页面 https://developer.chrome.com/devtools

随机推荐

  1. SM4算法的c++实现

    百度到的论文已给出算法. flag为1为解密,flag为0是加密. #include<bits/stdc++.h> using namespace std; typedef long lo ...

  2. assert.ok()

    测试 value 是否为真值. 相当于 assert.equal(!!value, true, message). 如果 value 不为真值,则抛出一个带有 message 属性的 Assertio ...

  3. 9、IPA通路分析相关网页教程

    IPA FAQ: http://ingenuity.force.com/ipa/IPATutorials# ####有各种相关教程和帮助文件. IPA 分析结果展示: http://www.lucid ...

  4. 解决因为终端打印造成的java程序假死

    问题状态: java 程序 日志采用 log4j 运行时由另一个管理进程拉起,程序在后台运行. 现象: 程序后台运行时,运行一段时间后假死 分析原因: 尝试打印输出,定位假死的具体位置,发现出现假死的 ...

  5. Entity Framework Code-First(10.1):EntityTypeConfiguration

    EntityTypeConfiguration Class in Code-First: Before we start to configure using Fluent API, let's se ...

  6. Cygwin install apt-cyg

    1. UPDATE CYGWIN First of all you will need to ensure that Cygwin has the necessary binaries require ...

  7. FreeSql 新功能介绍:贪婪加载五种方法

    前言 FreeSql 在经过6个月的开发和朋友们的工作实践,不断的改进创新,目前拥有1500个左右单元测试方法,且每个方法内又复盖不同的测试面. 今天介绍 FreeSql 各种贪婪加载的姿势,作下总结 ...

  8. 开发过程中--使用base64解决传输字符串加密问题!

    反正上周在解决开发公司小工具时,需要将用户输入的字符串加密处理传输,那就直接贴上代码吧,希望能帮上你们: strToArrayBufferToBase64(str) { let pos = 0, le ...

  9. Java中的进制

    byte bt = (byte) 254; System.out.println("bt = "+bt); /** * 之所以做这个与运算是为了把高位的数据去掉,准确的说是高位的1 ...

  10. K8S上的ELK和应用日志上报实战

    来源:DevOps ID:Idevops168 本次实战的基础结构如下图所示: 一共有两个Pod:ELK和web应用: ELK的Pod会暴露两个服务,一个暴露logstash的5044端口,给file ...