如何从HAR文件中计算DOM和HTTP加载时间并解决与HTTPWatch Studio数值不一致问题

标准计算规则 #

基于W3C HAR规范，可通过以下字段计算对应耗时：

• HTTP总加载时间：指从页面初始导航发起，到所有网络资源加载完成的总耗时，计算方式为取所有entries数组中资源的startedDateTime最小值，与所有资源(startedDateTime + time)最大值的差值，单位为毫秒。也可以直接读取pageTimings下的onLoad字段值，该值为页面load事件触发的相对耗时。
• DOM加载时间：若计算DOM解析完成耗时，取pageTimings.domContentLoadedEventEnd减去pageTimings.domContentLoadedEventStart即可；若计算从导航发起至DOM完全可用的总耗时，用pageTimings.domComplete减去页面对应的startedDateTime即可。

与HTTPWatch Studio数值差异的常见原因 #

• 统计口径不同：HTTPWatch默认会过滤浏览器扩展发起的请求、后台心跳请求等非页面主资源请求，而原生HAR的pageTimings字段会包含所有关联请求的耗时影响，两者统计范围不一致。
• 精度处理差异：原生HAR的时间字段默认保留多位小数，HTTPWatch导入后通常会做四舍五入取整处理，会造成小幅数值偏差。
• 计算逻辑不同：HTTPWatch不会直接读取HAR内置的pageTimings数值，而是重新解析所有资源条目按照自有规则计算耗时，和浏览器原生上报的pageTimings数值天然存在差异。

参考截图 #

内容的提问来源于stack exchange，提问作者mar92ort