Timing显示资源在整个请求生命周期过程中各部分话费的时间。

Queueing

排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源(图片)、服务器不可用、超过浏览器并发请求的最大连接数(Chrome的最大并发连接数是6)

Stalled(阻塞)

浏览器对同一个主机域名的并发连接数有限制,因此如果当前的连接数已经超过上限,那么其余请求就会被阻塞,等待新的可用连接;此外脚本也会阻塞其他组件的下载;

优化措施:

1、将资源合理分布到多台主机上,可以提高并发数,但是增加并行下载数量也会增大开销,这取决于带宽和CPU速度,过多的并行下载会降低性能;

2、脚本置于页面底部;

Proxy negotiation

与代理服务器连接的时间花费

DNS Lookup(域名解析)

请求某域名下的资源,浏览器需要先通过DNS解析器得到该域名服务器的IP地址。在DNS查找完成之前,浏览器不能从主机名那里下载到任何东西。

优化措施:

1、利用DNS缓存(设置TTL时间);

2、利用Connection:keep-alive特性建立持久连接,可以在当前连接上进行多个请求,无需再进行域名解析;

Initial connection(初始化连接)

TCP建立连接的三次握手时间

Request sent(发送请求)

发送HTTP请求的时间(从第一个bit到最后一个bit)

优化措施:

1、减少HTTP请求,可以使用CSS Sprites、内联图片、合并脚本和样式表等;

2、对不常变化的组件添加长久的Expires头(相当于设置久远的过期时间),在后续的页面浏览中可以避免不必要的HTTP请求;

Waiting(TTFB)(等待响应)

通常是耗费时间最长的。从发送请求到收到服务器响应的第一字节之间的时间,受到线路、服务器距离等因素的影响

优化措施:

使用CDN,将用户的访问指向距离最近的工作正常的缓存服务器上,由缓存服务器直接响应用户请求,提高响应速度;

Content Download(下载)

chrome浏览器Network面板请求Timing分析的更多相关文章

  1. Chrome浏览器Network面板http请求时间分析

    Chrome浏览器开发者工具Network窗口下,可以查看下载各组件所需的具体时间 根据上表进行简要分析-- Stalled(阻塞) 浏览器对同一个主机域名的并发连接数有限制,因此如果当前的连接数已经 ...

  2. chrome浏览器network面板出现:Provisional headers are shown 提示

    一般来说,如果看到这个提示,说明这个请求并没有发送出去. 具体原因有多种: 请求被某些扩展如 Adblock 拦截了 请求被墙了 走本地缓存或者 dataurl 的请求 client发送请求后,由于各 ...

  3. 谷歌chrome浏览器network中Stalled分析和优化

    谷歌chrome浏览器network中Stalled分析和优化 问题由来 最近项目上要求首页的加载速度,查看浏览器的network发现接口加载速度非常慢. 问题解决思路 SSL 网上有人因为图片加载, ...

  4. Web协议详解与抓包实战:HTTP1协议-如何用Chrome的Network面板分析HTTP报文(1)

    一.Chrome 抓包:Network 面板 1. Network 面板 • 控制器:控制面板的外观与功能 • 过滤器:过滤请求列表中显示的资源 • 按住 Command (Mac)或 Ctrl (W ...

  5. 通过 Chrome浏览器 查看http请求报文

    as we all know  HTTP 请求报文 包含请求行.请求头和请求体三部分 请求行:(请求方式 资源路径 协议/版本) 例如:POST /test/index.html HTTP/1.1 P ...

  6. HTTP基础(一):如何使用浏览器network查看请求和响应的信息

    一. 问题描述 HTTP作为前端开发与后开发链接的载体,其重要性不言而喻,今天我不复习关于HTTP自身的一些知识,只复习如何解读浏览器自带的的抓包工具(查看请求信息与响应信息)network. 二. ...

  7. Chrome教程之NetWork面板分析网络请求

    官方文档:https://developers.google.com/web/tools/chrome-devtools/network/ 最近打算写一写Chrome教程文档,不知道大家最感兴趣的是什 ...

  8. Chrome教程(一)NetWork面板分析网络请求

    官方文档:https://developers.google.com/web/tools/chrome-devtools/network/ 1.如何打开 无论是在Windows还是Mac,都可以使用( ...

  9. 使用chrome开发者工具中的network面板测量网站网络性能

    前面的话 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析.使用 Network 面板测量网站网络性能.本文将详细介绍chrom ...

随机推荐

  1. 编译android源码遇到错误及其解决方法

    升级ubuntu的14.04后,android的源码又编译错误了,一下是错误说明赫解决方法: 1.make: *** [out/host/linux-x86/obj/EXECUTABLES/aidl_ ...

  2. GIT 基础-基础命令

    环境 centos7 1.安装 #yum install git 2.创建本地仓库 ( 这里用 /www/git) 这里里有个隐藏的文件夹 ```.git``` 为git仓库的配置文件夹, 不可随意修 ...

  3. 二进制之Java位运算(一)

    1. 位运算符 下表列出了位运算符的基本运算,假设整数变量A的值为60和变量B的值为13: (表格来自菜鸟教程) 操作符 描述 例子 & 如果相对应位都是1,则结果为1,否则为0 (A& ...

  4. bootstrap框架怎么在html页面加载使用

    今天敲代码的时候,正好碰到这个问题. 与大家分享这个解决方法:     1/7 到bootstrap官方网站下载,对于我们开发者来说,直接下载编译和压缩后的CSS.JavaScript文件,另外还包含 ...

  5. react项目跨域问题

    在用知乎写demo的时候碰到了跨域问题 解决跨域如下: 跨域代理解决 "proxy":"https://news-at.zhihu.com",   请求的时候, ...

  6. css权威指南读书笔记-第10章浮动和定位

    这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素 一个元素浮 ...

  7. Java快速入门-05-数组循环条件 实例《延禧攻略》

    <延禧攻略>如此火爆,蹭蹭热度,用 JAVA 最基础的数组,循环,条件,输入/输出,做了一个简单的小游戏,帮助初学者巩固 JAVA 基础,注释非常详细 动态图展示: xuanfei.jav ...

  8. 关于App的cpu/内存/流量 /电量的方法(GT工具)

    https://mp.weixin.qq.com/s?__biz=MzUzNTQxMzMzMg==&mid=2247484376&idx=1&sn=651e9cf22801b5 ...

  9. 个人项目-wordcount

    源代码上传到github的网址为:https://github.com/fancy-dawning/hello-world.git. wc.exe是一个常见的工具,它能统计文本文件的字符数,单词数和行 ...

  10. java.lang.IllegalArgumentException: XML fragments parsed from previous mappers does not contain value for

    使用mybatis做一个简单的查询的时候,报了这个问题.代码如下: <mapper namespace="cn.gaiay.business.zm.live.living.dao.Li ...