首屏测试
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加载完成。
总共两个域名，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
