如何通过 document.readyState 配合 Performance API 定位脚本加载导致的首屏白屏耗时

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《如何通过 document.readyState 配合 Performance API 定位脚本加载导致的首屏白屏耗时》，聊聊，希望可以帮助到正在努力赚钱的你。

document.readyState无法准确反映首屏就绪状态，因其interactive和complete仅表示DOM解析与资源加载进度，与FCP、CSSOM构建、布局绘制无直接关系；真实首屏应以performance.getEntriesByType('paint')[0].startTime（first-contentful-paint）为准。

document.readyState 什么时候能准确反映首屏就绪状态

document.readyState 的 interactive 和 complete 两个值常被误当作“首屏渲染完成”的信号，但其实它只表示 HTML 解析和资源加载状态，跟 CSSOM 构建、布局计算、图层合成、甚至首帧绘制都无直接关系。真正影响白屏的，是 first-contentful-paint（FCP）或 domContentLoadedEventEnd 与 navigationStart 的差值——而这个差值里，脚本阻塞解析（尤其是同步