|
) W y I! i. b# T
按我对题主问题的理解，应该是在问如何分析“源代码不在自己手上”的网页的打开时间吧毕竟如果自己可以修改发布源码，那么只需要在JS里面加上关键点的timestamp，再做做减法就算出打开时间了或者申请一个GA再放到代码里面，过几天看看报告就OK了。
+ t, e' K/ z9 Y) q2 h 那如何分析其他网页的打开时间呢？这里分享一点自己项目中的经验，稍微补充一下 @贺师俊 大大提到的白屏时间白屏时间（first paint time）大名鼎鼎的selenium提供了对网页进行截图的功能，因此可以在载入了一个URL之后，每隔一个interval截图一次，再判断该图片是否没有任何内容，如果没有任何内容（实际上取巧的办法是：只要图片的size小于一个值，就认为是没有任何内容），代表页面还没有被渲染出来。
: @6 o" e5 C5 q5 P% K5 T 其实在性能稍微好一点的机器上，截图本身造成的误差是很少的也可以通过截图的办法来粗略判断整个网页被完整渲染出来的时间现在很难判断出页面被完整渲染的原因，主要还是因为很多页面中可能包含了大量的Ajax请求很有可能在DOM ready的时候，连Ajax都还没有发出去。 : s1 V: I2 \8 B1 i' g: G5 Q4 X6 _4 t
因此解决这个问题的思路还是在DOM ready后，设置一个interval进行截图，然后比较连续N次的截图的diff，如果几者diff量小于阈值，那么就可以默认页面被完全渲染了当然这种办法的问题是，如果页面有动画或者gif图片，就很难判断了。 5 R) N& I% f4 b, B$ C& A
另外PhantomJS也可以替代Selenium做这些事情它的open方法在页面“完成载入”之后，也会有callback发回来不过印象中PhantomJS是在x秒没有新的request发出或response回来，就认为页面"完成载入"了。 ! a8 V8 n' R& L% N K; {. e
再简单补充两个工具：Browsermob-proxy和WebPagetestBrowsermob-proxy本质是一个代理服务器，他会把每个通过该服务器发出去的http request存成HAR，可以通过分析这些 % Q% \& y% ~# w
har file来分析页面打开时间（预览）WebPagetest就是单页面的分析工具类似于Yslow或者Pagespeed，拿到的结果大概是这样的 
. i# X% W; ^5 }% |7 O
" S9 s# ]- Z5 U/ J, W- k% G9 A8 Q; K) G, i
+ x" Y# \& n* \
8 i* h" u# W$ V5 H, g8 s6 Z B | 
