可通过 performance.getentriesbytype("navigation")[0] 获取 navigation timing level 2 数据，用 connectend − secureconnectionstart 计算 ssl 握手耗时，再除以 loadeventend − navigationstart 得占比；仅当 secureconnectionstart > 0 且不等于 connectstart 时有效。
可以通过 performance.getEntriesByType("navigation")[0] 获取 Navigation Timing Level 2 数据，从中提取 SSL 握手耗时（secureConnectionStart 到 connectEnd），再与整体加载时间（如 loadEventEnd − navigationStart）做比值，即可得到 SSL 阶段占比。
确认关键时间戳是否可用
SSL 握手阶段在 Navigation Timing 中没有直接命名字段，但可通过以下两个属性差值间接计算：
-
secureConnectionStart：若页面使用 HTTPS，则为 SSL/TLS 握手开始时间（毫秒时间戳）；若为 HTTP，则该值等于
connectStart，即无 SSL 阶段 - connectEnd：TCP 连接完成且（如有）SSL 握手也完成的时间点
因此，SSL 握手耗时 = connectEnd − secureConnectionStart（仅当 secureConnectionStart > 0 且 secureConnectionStart !== connectStart 时才表示真实发生了 SSL 握手）。
计算整体加载时间基准
推荐使用端到端用户可感知的完整生命周期作为分母，例如：
-
导航总时长：
loadEventEnd − navigationStart（从导航发起至 onload 事件结束） -
首屏关键路径：
domContentLoadedEventEnd − navigationStart（更贴近用户可交互体验） - 注意：避免使用已废弃的
performance.timing（Level 1），它在现代浏览器中精度低、部分字段不可靠
编写可运行的分析代码
以下脚本可在页面加载完成后执行，自动判断并输出 SSL 握手占比：
if (performance.getEntriesByType("navigation").length > 0) {
const nav = performance.getEntriesByType("navigation")[0];
const sslTime = nav.connectEnd - nav.secureConnectionStart;
const totalLoad = nav.loadEventEnd - nav.navigationStart;
<p>if (nav.secureConnectionStart > 0 && sslTime > 0 && totalLoad > 0) {
const ratio = (sslTime / totalLoad * 100).toFixed(2);
console.log(<code>SSL 握手耗时 ${sslTime}ms，占整体加载 ${ratio}%</code>);
} else {
console.log("当前页面未走 HTTPS 或 SSL 时间不可用");
}
}</p>
结合实际场景看是否异常
正常 HTTPS 页面中，SSL 握手通常占整体加载的 5%–25%，具体取决于网络 RTT 和服务器 TLS 配置。若占比持续超过 35%，需排查：
- 是否未启用 TLS False Start 或 0-RTT（如 HTTP/3 + QUIC 可显著压缩握手）
- 证书链是否过长或含吊销检查（OCSP Stapling 未开启）
- 服务端是否支持 Session Resumption（会话复用）
- 客户端是否首次访问、无缓存 SNI 或证书信息
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
