首屏测试

window.addEventListener('DOMContentLoaded', ()=>{
        const t = window.performance.timing;
        console.log('first pain time[painTime-navigationStart]:', 
        window.painTime - t.navigationStart);
        console.log('first pain time[domContentLoadedEventStart-navigationStart]:', 
        t.domContentLoadedEventStart - t.navigationStart);
      }, false);

经过测试:

• link css 会阻塞页面渲染，只有等 css 加载完成以后，页面才会继续渲染

• src image 图片不会阻塞页面渲染，但是会占用处理线程，当pengding的请求多于最多处理线程时，会影响后面的请求，比如ajax请求，动态发起script请求。图片本身不影响首屏时间和可交换时间。

• js 优先级的比图片高， head里面的css优先级比body的script优先级高

• 遇到 js 会阻塞页面渲染，只有等 js 加载完成以后，页面才会继续渲染，影响首屏时间。

• 从chrome network看，js 和 image 线程同时执行总共最多 6 个，如果同时有 6 js 个阻塞，后面的 js 请求也会阻塞(pending)。

• 从chrome network看，当 image 阻塞超过 6 个时， image 后面的js 很大可能会被阻塞加载。

• DOMContentLoaded事件本身不会等待CSS文件、图片、iframe加载完成。

• 当页面中没有script标签，DOMContentLoaded事件不会等待css、image加载完成。

https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3#resource-network-timing

https://developers.google.cn/web/tools/chrome-devtools/network-performance/understanding-resource-timing?hl=zh-cn

总共两个域名，delay.png 是单独的一个域名，js 是应用本身的域名。Chrome每个域原始规则的最多六个TCP连接，但这里有两个域名，所以可以同时触发多于6个请求。

queueing:从添加到待处理队列到实际开始处理的时间间隔.

上面大红色框的请求是一起发送的，但是由于浏览器http线程池内可用线程数量有限，但这些先排队等着
之前的http请求使用完成，有空线程了再按队列中的顺序发送请求。如果按照Time排序，就很清晰的看到队列处理的层次结构：

Stalled：浏览器得到要发出这个请求的指令，到请求可以发出的等待时间，一般是代理协商、以及等待可复用的TCP连接释放的时间，不包括DNS查询、建立TCP连接等时间等。此外，这段时间将包括浏览器何时等待已建立的连接可用于重用，并遵循Chrome每个域原始规则的最多六个TCP连接。

Request sent 请求第一个字节发出前到最后一个字节发出后的时间，也就是上传时间
Waiting 请求发出后，到收到响应的第一个字节所花费的时间(Time To First Byte)
Content Download 收到响应的第一个字节，到接受完最后一个字节的时间，就是下载时间

• Queued at 209.48ms: 页面访问后，经过 209.48ms后加入请求队列

• Started at 210.44ms: 页面访问后，经过 210.44ms后开始进行网络请求

• Queueing 0.96ms: 在队列中存放了0.96ms，这个值刚好是 210.44ms - 209.48ms = 0.96ms

chrome://net-internals/#events

http://www.jianshu.com/p/504bde348956