导航时间API的connectStart、connectEnd、secureConnectionStart为0的解决方法
2024-02-08 00:59:01
问题背景
在使用Performance API的Navigation Timing API时，可能会遇到connectStart、connectEnd、secureConnectionStart为0或很小的数值的问题，导致指标数据计算出错。本文将针对IOS设备，分析Navigation Timing API中这些时间节点为0的原因，并提供解决方法。
原因分析
IOS设备通过浏览器的前进后退按钮进入的页面，Navigation Timing API中connectStart、connectEnd、secureConnectionStart会被设置为0或很小的数值。这是因为IOS设备使用Webkit内核，而Webkit内核在处理前进后退时，会复用之前的TCP连接，因此这些时间节点不会被重新计算。
解决方法
要解决这个问题，可以采用以下方法：
- 使用timeOrigin属性：
const timeOrigin = performance.timeOrigin;
const connectStart = performance.timing.connectStart - timeOrigin;
const connectEnd = performance.timing.connectEnd - timeOrigin;
const secureConnectionStart = performance.timing.secureConnectionStart - timeOrigin;
timeOrigin属性表示页面加载的开始时间，通过减去timeOrigin属性，可以得到相对于页面加载开始时间的connectStart、connectEnd、secureConnectionStart值。
- 使用loadEventEnd属性：
const loadEventEnd = performance.timing.loadEventEnd;
const connectStart = performance.timing.connectStart - loadEventEnd;
const connectEnd = performance.timing.connectEnd - loadEventEnd;
const secureConnectionStart = performance.timing.secureConnectionStart - loadEventEnd;
loadEventEnd属性表示页面加载完成的时间，通过减去loadEventEnd属性，可以得到相对于页面加载完成时间的connectStart、connectEnd、secureConnectionStart值。
注意事项
需要注意的是，以上方法在某些情况下可能不适用，例如：
-
在使用HTTP/2或QUIC协议时，connectStart、connectEnd、secureConnectionStart的值可能为0，这是因为这些协议没有明确的连接建立过程。
-
在某些IOS设备上，loadEventEnd属性可能在页面加载完成前触发，这会导致计算出的时间节点不准确。
总结
在使用Performance API的Navigation Timing API时，可能会遇到connectStart、connectEnd、secureConnectionStart为0或很小的数值的问题。本文分析了IOS设备中出现此问题的原因，并提供了两种解决方法。希望这些方法能够帮助您解决问题，提高您的开发效率。
