工具控 Google Chrome DevTool 的 Network 那两条红蓝线代表什么?

artone · 发布于 2012年10月05日 · 最后由 happypeter 回复于 2012年10月05日 · 8324 次阅读
3417

Timeline 看得懂,但是那两条线不明白什么意思。

chrome-dev-tool

共收到 9 条回复
121

浅色表示 等待时间 , 即发出请求后服务器开始响应时间, 可以认为是 网络延迟 + 服务器处理请求时间.

深色表示 接收时间, 即服务器响应到接收完毕数据的时间, 可以认为是 整个网页的接收时间

96

#1楼 @lyfi2003 打算录个 Chrome DevTool 的视频,给点参考资料或是建议吧?谢谢,我目前还很菜啊

敬请期待: http://happycasts.net

96

是指截图最右段的两条靠得很近的线对吧?

蓝线表示 DOMReady 事件。事件触发的条件是:浏览器已经把整个 HTML 文档的 DOM 结构解析完毕。一般前端开发者监听这个事件是为了可靠地在文档中查找元素。这个事件触发之前有可能只下载了半截 HTML,想要的元素还没出现。

红线表示 load 事件,触发条件是:整个页面的 JS CSS 图片都下载完毕。用户看到的进度条/小菊花已经不再显示为“忙”的状态。是用户眼中的加载完毕。

2622

#2楼 @happypeter 支持.. 一直不知道这些是干嘛的...

96

#2楼 @happypeter 这套slide 讲了好多关于 dev tool 的东西 (好多看不懂的...) 希望有帮助 http://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1

121

@happypeter 我基本上都是自己瞎看的. 这里有一个官方的资料, 应该非常全面: https://developers.google.com/chrome-developer-tools/

支持你讲这个, 我想内容可以包括, 如何定位元素, 查看修改样式, js调试, 最简单的性能调优. 我自己就用这些.

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册