前端如何计算网页的打开时间？
按我对题主问题的理解，应该是在问如何分析“源代码不在自己手上”的网页的打开时间吧。毕竟如果自己可以修改发布源码，那么只需要在JS里面加上关键点的timestamp，再做做减法就算出打开时间了。或者申请一个GA再放到代码里面，过几天看看报告就OK了。
那如何分析其他网页的打开时间呢？这里分享一点自己项目中的经验，稍微补充一下
大大提到的白屏时间。
白屏时间（first paint time）
大名鼎鼎的
selenium提供了对网页进行截图的功能，因此可以在载入了一个URL之后，每隔一个interval截图一次，再判断该图片是否没有任何内容，如果没有任何内容（实际上取巧的办法是：只要图片的size小于一个值，就认为是没有任何内容），代表页面还没有被渲染出来。其实在性能稍微好一点的机器上，截图本身造成的误差是很少的。
也可以通过截图的办法来粗略判断整个网页被完整渲染出来的时间
现在很难判断出页面被完整渲染的原因，主要还是因为很多页面中可能包含了大量的Ajax请求。很有可能在DOM ready的时候，连Ajax都还没有发出去。因此解决这个问题的思路还是在DOM ready后，设置一个interval进行截图，然后比较连续N次的截图的diff，如果几者diff量小于阈值，那么就可以默认页面被完全渲染了。
当然这种办法的问题是，如果页面有动画或者gif图片，就很难判断了。
另外
PhantomJS也可以替代Selenium做这些事情。它的open方法在页面“完成载入”之后，也会有callback发回来。不过印象中PhantomJS是在x秒没有新的request发出或response回来，就认为页面"完成载入"了。
再简单补充两个工具：Browsermob-proxy和WebPagetest
Browsermob-proxy本质是一个代理服务器，他会把每个通过该服务器发出去的http request存成
HAR，可以通过分析这些har file来分析页面打开时间（
预览）
WebPagetest就是单页面的分析工具类似于Yslow或者Pagespeed，拿到的结果大概是这样的
以上就是关于《前端如何计算网页的打开时间？》的全部内容，本文网址：https://www.7ca.cn/baike/22990.shtml，如对您有帮助可以分享给好友，谢谢。