Chrome Devtools之Networks

2019年8月31日 181次阅读 来源: pengj

Timeline各目标申明

摘自 http://www.cnblogs.com/starof/p/5481935.html
参考 https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing

Connection Setup：竖立与服务器的衔接。详细包含Queueing和Stalled…。

  • Queueing：不是太清晰，好像是在当地防火墙的守候时候，或者是某些插件阻拦时候。

  • Stalled：网络延时。指浏览器获得要发出这个要求的指令，到要求能够发出的守候时候。平常是代办协商、以及守候可复用的TCP衔接开释的时候，不包含DNS查询、竖立TCP衔接时候等。

  • Proxy Negotiation:与代办服务器的衔接时候。

  • DNS LookUp：示意DNS查询时候，假如第一次接见的是域名就需要查找，IP地点的话不需要，上图中没有这个参数，申明当地缓存了域名服务器的IP，浏览器不需要查询，直接经由过程IP要求服务器。

Initail Connection：竖立衔接的时候，包含 TCP handshakes/retries和negotiating a SSL.

  • Request/Response：要求与相应的时候。详细包含Request Sent，Waiting,Content Download

  • Request sent:发送HTTP要求到服务器的时候，即上传时候，这个时候取决于发送要求的数据量的大小。

  • Waiting(TTFB)：发送要求后收到相应的第一个字节所消费的时候，TTFB(time to first bytes)；这是服务器优化的主要目标，服务器优化的目标就是削减这个时候。

  • Content Download：从服务器猎取相应数据的时候，下载时候，即上面的Time减去Latency的时候，这是回响反映带宽的主要目标。受相应音讯内容大小，网络带宽，是不是运用http紧缩等影响。

《Chrome Devtools之Networks》

两条目标线申明

  • DOMContentLoaded事宜要在window.onload之前实行，DOM树构建完成时实行DOMContentLoaded事宜，浏览器剖析dom树已完成，能够监听该事宜查找某些元素；jquery的$(document) .ready()就是用的DOMContentLoaded事宜。

  • window.onload是在页面载入完成时才实行，包含图片等加载完成。

《Chrome Devtools之Networks》

    原文作者：pengj
    原文地址: https://segmentfault.com/a/1190000007778538
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞