标签：
从网络面板中可以获取很多有用信息，如详细的时间数据，http请求头响应头，cookies，WebSocket数据。
通过分析这些数据，可以知道哪个资源加载耗时最久，谁发起的网络请求，这些对性能优化很有帮助。
这些数据的获取都是通过一个api来完成的，Resource Timing API。
我们不需要知道它的实现原理，只要知道它能提供什么数据即可。
这些数据也可通过chrome浏览器的window.performace对象获取，如下
network监控网页中所有的http请求，一行代表一个http请求，每个字段代表请求的不同属性和状态。
点击按钮
精简显示信息，点击按钮
显示全部信息。
显示全部信息时包括主要的域和次要的域（如下图红色框中的Time和Latency），精简时就只显示主要的域（如下图中红色框中Time）。
一条资源的请求就是一行，包括很多列参数，默认如下。
比如下图中请求menu.css的资源的Initiator显示为(index):650[paraser]，表示该css文件是从首页html的第650行中解析出来的，查看源代码可以看到这行是一个<link>标签去请求menu.css资源。
有的资源的Initiator一列为Script，表示该资源是通过某js文件加载的。
比如下图这个js请求，size为64.7kb,content为201kb,说明请求该资源时服务器采用压缩传输，大小为64.7kb,可以点击查看资源详情，在Headers里可以看到Content-Encoding:gzip采用gzip压缩传输。浏览器解压后真正的内容大小为201kb，这样可以减少服务器带宽压力。
默认只显示部分列的信息，在标头右键出来一个列表，打对勾的就是展示的，去掉对勾就好在网络面板的表格中删掉这一列。
请求默认按请求开始时间排序，为对Size和Time的排序是非常常用的，一眼可以看出哪个请求比较耗资源。
队Timeline的排序可以有多个选项：
跳转时想保留之前的日子，用preserve log选项。如果不勾选，每次刷新log就没了，勾选上Preserve log，每次刷新都会保留log，比如刷新3次就会有三次请求的log。页面跳转到其他地址log也会保留。
单击任意一条http请求，可查看详情。
只显示指定类型请求，如img，css，js等。
漏斗形的按钮，意思是是否启用过滤信息选项。启用后可在下面一列中筛选（Hide data URLS，XHR,JS，CSS等）。
更高级点，可以进行请求查询，即在前面的输入框中输入相应的字符对http信息进行匹配。比如输入Status-code:200筛选出状态码为200的请求。
查询的时候，输入的信息包括type(StatusCode)和value(200)。浏览器会给出自动补全提示，按上下箭头或tab选择。
还可以通过在查询条件前面加上“-”来进行反选。如下图，在status-code前面加了负号，就可以筛选出所有状态码不是200的请求。
一些可用的过滤类型如下：
larger-than:50, larger-than:150k, larger-than:2m勾选Disable cache选项，可禁用缓存，所有的状态码为304的请求和size为from cache的请求变成正常请求。
以请求imagemap.php为例。
消耗时间总共711.41ms，包括2部分Connection Setup和Request/Response：
（官方的一个更全的图如下）
Finish:1.39s ：表示整个页面加载时间为640ms。
DOMContentLoaded:998ms ：发生在页面DOMContentLoaded事件的启动时间点，对应上图蓝色竖线。
Load:1.39s：表示页面load事件的启动时间点，对应上图红色竖线。
DOMContentLoaded事件要在window.onload之前执行，DOM树构建完成时执行DOMContentLoaded事件，而window.onload是在页面载入完成时才执行，包括图片等加载完成。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo of starof</title>
<script src="http://code.jquery.com/jquery-1.4.1.min.js" integrity="sha256-LOx49zn73f7YUs15NNJTDnzEyPFLOGc7A7pfuICtTMc=" crossorigin="anonymous"></script>
</head>
<body>
<h1> DOM READY‘s TEST </h1>
<p id="status"> DOM is not ready </p>
<script>
alert("111");
if (document.addEventListener) {
function DOMContentLoaded() {
$("#status").text("DOM is ready now!");
alert("222");
}
document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);
}
window.onload = function() {
$("#status").text("DOM is ready AND wondow.onload is excute!");
}
</script>
</body>
</html>
效果：
jquery的$(document) .ready();就是用的DOMContentLoaded事件。
其他资源链接:
Chrome Developer Tools：Network Panel说明
标签：
原文地址：http://www.cnblogs.com/hushaojun/p/5505704.html
