chrome浏览器Network面板请求Timing分析
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分析的更多相关文章
- Chrome浏览器Network面板http请求时间分析
Chrome浏览器开发者工具Network窗口下,可以查看下载各组件所需的具体时间 根据上表进行简要分析-- Stalled(阻塞) 浏览器对同一个主机域名的并发连接数有限制,因此如果当前的连接数已经 ...
- chrome浏览器network面板出现:Provisional headers are shown 提示
一般来说,如果看到这个提示,说明这个请求并没有发送出去. 具体原因有多种: 请求被某些扩展如 Adblock 拦截了 请求被墙了 走本地缓存或者 dataurl 的请求 client发送请求后,由于各 ...
- 谷歌chrome浏览器network中Stalled分析和优化
谷歌chrome浏览器network中Stalled分析和优化 问题由来 最近项目上要求首页的加载速度,查看浏览器的network发现接口加载速度非常慢. 问题解决思路 SSL 网上有人因为图片加载, ...
- Web协议详解与抓包实战:HTTP1协议-如何用Chrome的Network面板分析HTTP报文(1)
一.Chrome 抓包:Network 面板 1. Network 面板 • 控制器:控制面板的外观与功能 • 过滤器:过滤请求列表中显示的资源 • 按住 Command (Mac)或 Ctrl (W ...
- 通过 Chrome浏览器 查看http请求报文
as we all know HTTP 请求报文 包含请求行.请求头和请求体三部分 请求行:(请求方式 资源路径 协议/版本) 例如:POST /test/index.html HTTP/1.1 P ...
- HTTP基础(一):如何使用浏览器network查看请求和响应的信息
一. 问题描述 HTTP作为前端开发与后开发链接的载体,其重要性不言而喻,今天我不复习关于HTTP自身的一些知识,只复习如何解读浏览器自带的的抓包工具(查看请求信息与响应信息)network. 二. ...
- Chrome教程之NetWork面板分析网络请求
官方文档:https://developers.google.com/web/tools/chrome-devtools/network/ 最近打算写一写Chrome教程文档,不知道大家最感兴趣的是什 ...
- Chrome教程(一)NetWork面板分析网络请求
官方文档:https://developers.google.com/web/tools/chrome-devtools/network/ 1.如何打开 无论是在Windows还是Mac,都可以使用( ...
- 使用chrome开发者工具中的network面板测量网站网络性能
前面的话 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析.使用 Network 面板测量网站网络性能.本文将详细介绍chrom ...
随机推荐
- pureMVC与strangeIoc框架对比
前言 最近有机会了解到了StrangeIoc框架,就拿来跟自己比较熟悉的pureMVC进行一下简要的对比.这两套开源框架都是基于MVC模式的扩展,pureMVC是一个跨平台跨语言的MVC轻量级应用框架 ...
- [转]HTTP Error 502.5 - Process Failure asp.net core error in IIS
本文转自:http://www.cnblogs.com/autohome7390/p/6840652.html 在windows server 2012 上安装完dotnet-win-x64.1.1. ...
- 五:SpringCloud-Zuul
九:zuul路由网关 1.概述 1.1 是什么 Zuul包含了对请求的路由和过滤两个最主要的功能: 其中==路由功能==负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础. 而==过 ...
- 撩课-Web大前端每天5道面试题-Day4
1. 如何实现瀑布流? 瀑布流布局的原理: ) 瀑布流布局要求要进行布置的元素等宽, 然后计算元素的宽度, 与浏览器宽度之比,得到需要布置的列数; ) 创建一个数组,长度为列数, 里面的值为已布置元素 ...
- 撩课-Web大前端每天5道面试题-Day2
1.伪类与伪元素的区别? 1) 定义区别 伪类 伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息. 前者包含那些匹配指定状态的元素,比如:visited,:active:后者包含那些 ...
- UVA 455(最小周期)
最小周期可以用%枚举 #include <iostream> #include <string> #include <cstring> #include <c ...
- 快速幂取模(POJ 1995)
http://poj.org/problem?id=1995 以这道题来分析一下快速幂取模 a^b%c(这就是著名的RSA公钥的加密方法),当a,b很大时,直接求解这个问题不太可能 利用公式a*b%c ...
- 拆系数FFT(任意模数FFT)
拆系数FFT 对于任意模数 \(mod\) 设\(m=\sqrt {mod}\) 把多项式\(A(x)\)和\(B(x)\)的系数都拆成\(a\times m+b\)的形式,时\(a, b\)都小于\ ...
- Sublime Text3之安裝Emmet及使用技巧
首先准备工作: 如果你的Sublime Text3没有Package Control组件先看一下这里,如果以安装请忽略: 1.按Ctrl+`调出sublime text的console 2.粘贴以下代 ...
- JQ的几组API辨析:
1.插入: Jq的插入一共有八个API可供选择,结果相类似,下面将以例子,简单明了的介绍下用法: <select name="one" multiple="mult ...