chrome 浏览器 开发者工具 性能检测 参数解释

Sending is time spent uploading the data/request to the server. It occurs between blocking and waiting. For example, if I post back an ASPX page this would indicate the amount of time it took to upload the request (including the values of the forms and the session state) back to the ASP server.

Waiting is the time after the request has been sent, but before a response from the server has been received. Basically this is the time spent waiting for a response from the server.

Receiving is the time spent downloading the response from the server.

Blocking is the amount of time between the UI thread starting the request and the HTTP GET request getting onto the wire.

The order these occur in is:

  1. Blocking*
  2. DNS Lookup
  3. Connecting
  4. Sending
  5. Waiting
  6. Receiving

*Blocking and DNS Lookup might be swapped.

The network tab does not indicate time spent processing.

If you have long blocking times then the machine running the browser is running slowly. You can fix this by upgrading the machine (more RAM, faster processor, etc.) or by reducing its workload (turn off services you do not need, closing programs, etc.).

Long wait times indicate that your server is taking a long time to respond to requests. This either means:

  • The request takes a long time to process (like if you are pulling a large amount of data from the database, large amounts of data need to be sorted, or a file has to be found on an HDD which needs to spin up).
  • Your server is receiving too many requests to handle all requests in a reasonable amount of time (it might take .02 seconds to process a request, but when you have 1000 requests there will be a noticeable delay).

The two issues (long waiting + long blocking) are related. If you can reduce the workload on the server by caching, adding new server, and reducing the work required for active pages then you should see improvements in both areas.

 

You can read a detailed official explanation from google team here. It is a really helpful resource and your info goes under Timeline view section.

Resource network timing shows the same information as in resource bar in timeline view. Answering your quesiton:

  • DNS lookup: Time spent performing the DNS lookup. (you need to find out IP address of site.com and this takes time)
  • Blocking: Time the request spent waiting for an already established connection to become available for re-use. As was said in another answer it does not depend on your server - this is client‘s problem.
  • Connecting: Time it took to establish a connection, including TCP handshakes/retries, DNS lookup, and time connecting to a proxy or negotiating a secure-socket layer (SSL). Depends on network congestion.
  • Sending - Time spent sending the request. Depends on the size of sent data (which is mostly small because your request is almost always a few bytes except if you submit a big image or huge amount of text), network congestion, proximity of client to server
  • Waiting - Time spent waiting for the initial response. This is mostly the time of your server to process and respond to your response. This is how fast if your server calculating things, fetching records from database and so on.
  • Receiving - Time spent receiving the response data. Something similar to the sending, but now you are getting your data from the server (response size is mostly bigger than request). So it also depends on the size, connection quality and so on.

转载:

http://stackoverflow.com/questions/10537399/what-does-the-times-mean-in-google-chromes-timeline-in-the-network-panel

时间: 2024-12-25 16:43:28

chrome 浏览器 开发者工具 性能检测 参数解释的相关文章

谷歌Chrome浏览器开发者工具的基础功能

上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources.Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要功能面板.通常只要是开发遇到了js报错或者其他代码问题,在审视一遍代码而一无所获之后打开Sources进行js断点调试,几乎能解决8成的代码问题. js断点功能让人兴奋不已,以前只能在IE中靠alert弹出窗口调试js代码,那样的开发环境对于前端程序员来说简直是一场噩梦.本篇介绍Sources的具体

谷歌 chrome 浏览器开发者工具打不开的解决方法

很长一段时间没有用Chrome浏览器 最近打开,发现开发者工具怎么都打不开 在网上也没有找到方法 各种打开方式都试了依然是没有动静 但是在隐身模式下开发者工具是可以的打开的 重新安装后还是一样 实在没有找到方法 就在浏览器里各种尝试 最后我打开扩展程序里 里面勾选了开发者模式 我把取消后开发者工具就可以正常使用了 不知道有没有其他人遇到开发者工具打不开的问题 如果有的话可以尝试看下扩展程序内是否勾选了开发者模式 如是取消就可以正常使用了

chrome浏览器 开发者工具简介

Chrome浏览器得益于其优秀的V8解释器,javascript执行速度和内存占有率表现非常优秀. 掌握了Chrome工具可提高学习效率和开发效率. 有如下功能面板,可以使用Ctrl+[和Ctrl+]快捷键在面板之间切换. 简单常用的就一笔带过 一.标签页 查看DOM tree内容 根据标签页的html内容找到对应元素 根据页面元素找到标签页的html 改变DOM内容 查看js动态生成的DOM 在标签页右侧查看style 查找 标签注册事件查看.[待扩展] 按钮绑定哪些功能,鼠标点击时执行了那个

利用google浏览器开发者工具调试网页(详)

前端程序员或者在校大学生正在开发网页,如果想要测试或者通过测试优化网页结构,该怎么办呢?这就需要用到一款工具,chrome浏览器的开发者工具?本文写给尚不熟悉这个开发者工具的同学们或者同行们,话不多说,先看文章 怎样打开Chrome的开发者工具? 你可以直接在页面上点击右键,然后选择审查元素: 或者在Chrome的工具中找到: 或者,你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12. 打开的开发者工具就长下面的样子: 不过我一般

Linux 常用 性能 检测 命令 解释

1.uptime [[email protected] ~]# uptime 15:08:15 up 98 days,  4:19,  2 users,  load average: 0.07, 0.29, 0.14 当前时间   系统运行至今的时间   多少用户登录当前系统   分别是1分钟,5分钟,15分钟前至今的负载情况 load average是队列平均长度,在队列中等待执行的进程数量 该值越低,说明进程更有可能立即被CPU处理,相反越高,说明进程更有可能阻塞 该命令可以检查服务器负载是

通过使用Chrome的开发者工具来学习JavaScript

本文作者是Peter Rybin,Chrome开发者工具团队成员. 本文中,我们将通过使用Chrome的开发者工具,来学习JavaScript中的两个重要概念"闭包"和"内部属性". 闭包 首先要讲的是闭包(closure) – JavaScript中最有名的东西之一.一个闭包就是一个使用了外部变量的函数.查看下面的例子: function A(a, b, c) { var ar = [a, b, c]; return function B(i) { return

浏览器开发者工具使用技巧

浏览器开发者工具使用技巧 学习网址: https://developers.google.cn/web/tools/chrome-devtools/ http://www.css88.com/doc/chrome-devtools/javascript/add-breakpoints/ 1.使用开发者工具 Chrome : F12 / ctrl+shift+i /选项->更多工具 =====>打开开发者工具 [1]设置开发者工具窗口显示位置(默认居右显示,可以设置居下,居左或与当前页面分离)

chrome F12_Network 开发者工具详解

本文为学习chrome F12_Network的一点记录,如有不妥之处请各位大神指点,谢谢! 开发者工具面板 最常用的前四个功能模块如下: Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈. Console:录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell. Sources:断点调试JS. Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态.资源类型.大小.所用

Chrome的开发者工具

Chrome开发者工具已经强大到没朋友的地步,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更快「开发调试」更强「进阶级的Frontender」 Bug无处遁形「Console大法好」 主要内容: 1.console.log 2.console.assert 3.console.count 4.console.dir 5.console.time & console.timeEnd 6.console.profile & console.timeLime