浏览器关键时间点计算

通过netlimiter 等工具，限制网络速度，我们可以看到页面是慢慢打开的，这个从直观的角度，说明了浏览器是边下载内容，边进行渲染的。

下面讲讲在渲染过程中，几个关键时间点的计算

1 startRender time

startRender time 是指从浏览器发出请求，到head解析完毕的这段时间。由于网络请求涉及到网络和服务器的内容，从前端优化的角度，我们将startRender time 简单的约等于head开始解析，到head解析完的这段时间。

startRender time 从直观上可以理解为用户从输入网站，一直看到空白的时间。所以尽可能的减少header 中的链接数量，将减少网络请求，从而减少用户看到空白的时间

2 首屏加载时间

在页面内容的某个位置，设置一个时间点，通过与startRender time 的差值，来计算得到首屏加载时间

在berserkjs 中，他计算首屏加载的时间方式是：

1. 默认检测方法:

1. 从 urlChanged 事件触发开始计时；

2. 挄照当前视口区域平均分布 14400 个像素监控点；

3. 每 250 ms 检测一次所有监控点 RGB 值变化；

4. 如果连续 12 次大于 12000 个像素点无变化，则结束计时，减去检测耗时。

2. 自定义监控点检测方法 （App.webview.setDetectionRects）:

1. 从 urlChanged 事件触发开始计时；

2. 挄照 setDetectionRects 方法设置的重点检测区块内分布像素级检测点；

3. 每 250 ms 检测一次所有监控点 RGB 值变化；

4. 如果连续 12 次检测区像素阈值无变化，则结束计时，减去检测耗时。