首屏测试

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


Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
资源内联 资源内联
在日常业务开发过程中,我们可能需要内联文本,JS,CSS到页面,这时我们可以 raw-loader webpack loader 实现。raw-loaderimport txt from 'raw-loader!./file.txt';Vue 内联 JavaScripttemplate 直接内...
2020-01-04 sky
Next 
Egg + Web 自定义前端渲染 Egg + Web 自定义前端渲染
背景在 前端渲染模式 和 asset 渲染模式 章节讲到了基于 React 的前端渲染模式,但都依赖  egg-view-react-ssr 插件,那如何基于已有 egg 模板引擎 (egg-view-nunjucks 或 egg-view-ejs) + Webpack 完全自定义前端方案呢?...
2019-12-23 sky