浏览器什么时候开始渲染数据?

1,647 阅读2分钟

写本文的目的是做一个知识点记录,以免后边忘记了。

浏览器什么时候开始渲染数据?想必大多数回答是:当然是后端接口返回数据后开始渲染。但真是这样吗?最近公司项目中有个需求,处理的数据量稍微大些,前端渲染出来稍微有点慢,排查问题时必定会涉及到后端返回数据的时间这一块。大家看接口返回数据的时间大多在开发者工具中的network面板中查看,下图

1624002185.png

1624002256(1).png

上图中,就是该接口在各个阶段所花费的时间,具体都有哪些阶段,这个网上有,这里不做过多赘述。重点看下图

1624002448(1).png

同一个接口,我们在performance面板中可以看到更详细的信息。小伙伴可能已经发现,我用红框框出来的部分,是该接口所花费的时间,这么说吧,是又不完全是

我们可以看到,第二张图中的timing中的总时间,和performance中的network transfer(网络传输)是相同的,但是,多出来一个resource loading(资源加载)。这个resource loading是指的什么时间呢?为此我网上查找了一番,但是大多是关于怎么使用performance的,直到我看见这么一篇

1624003116(1).png

至此,很明显,答者根据源码来看出,这个resource loading就是:浏览器将资源为渲染进程准备好所花费的时间。源码这里就不贴出来了,大家有兴趣去自己看。

所以,浏览器是在network transfer + resource loading之后,才启用渲染进程渲染数据。一个小小的冷门知识点吧,如有表述不对或错误之处,还请各位大佬指正。