不是。document.readystate === 'complete' 仅表示所有资源加载完毕，不等于渲染就绪或js逻辑可安全执行，需结合字体加载、尺寸计算、脚本执行等多维度判断。
document.readyState === 'complete' 是不是页面真正就绪的唯一信号
不是。它只是资源加载完成的信号，不等于渲染就绪或 JS 逻辑可安全执行。比如 Web Font 还没回填、getBoundingClientRect() 返回的尺寸仍是 0、第三方 analytics 脚本尚未初始化完成，这些都可能发生在 readyState === 'complete' 之后。
真正要等的是：DOM 可操作 + 样式已生效 + 关键资源（字体、首屏图片）完成渲染 + 所有 defer 脚本执行完毕。推荐组合判断：
- 监听
document.addEventListener('readystatechange')，但必须检查当前值，不能只靠一次触发 - 叠加
window.addEventListener('load')，确保图片、iframe 等资源真实就绪 - 对依赖字体的模块，用
document.fonts.load()显式等待关键字重排完成 - 避免在
interactive阶段调用video.play()或读取img.naturalWidth，此时值大概率为 0
loading 遮罩为什么用 display: none 比 opacity: 0 更稳
因为 opacity: 0 仍参与渲染流程：它占布局空间、响应事件、触发合成层，低端设备上容易卡顿，甚至出现“看不见却能点按钮”的穿透问题——尤其 iOS Safari 和部分安卓 WebView 会忽略 pointer-events: none 的继承。
更可靠的写法是：
- 遮罩容器必须设
display: none或visibility: hidden，并显式加pointer-events: none - 用
display: none时，切换前先el.style.display = 'block'再el.offsetHeight强制重排，避免 CSS 动画跳帧 - 若需维持布局不跳动（如防止按钮下移），改用
visibility: hidden+pointer-events: none，但注意它仍参与样式计算和继承链回溯 - 绝对不要在 loading 容器里放
<input>或<button></button>，键盘唤起或焦点捕获可能导致不可见却可交互
fetch 请求中的 loading 状态为什么容易挂住
因为 fetch 的 Promise 在网络中断、DNS 失败、AbortError 等场景下不会进入 catch，而是直接 reject，但很多封装层没处理这个分支，导致 loading 状态永远不关闭。
实操要点：
- 必须同时监听
abort和catch：创建AbortController，并在finally中统一关闭 loading - 不要依赖全局拦截器自动管理 loading，它无法区分请求是否真被取消还是超时未响应
- 对关键请求，加 8–10 秒硬超时：
Promise.race([fetch(...), new Promise((_, r) => setTimeout(r, 10000))]) - 服务端返回 5xx 或空响应体时，
response.ok为 false，但 Promise 仍 resolve，需手动 throw 错误来触发 catch
SPA 路由切换后 DOM 节点数不降反升，怎么快速定位泄漏
这不是加载慢的问题，是内存泄漏的明确信号。节点数在路由离开后没回落，说明节点被 JS 闭包强引用，没被 GC 回收。
排查优先级顺序：
- 打开 DevTools → Memory 面板 → “Take heap snapshot”，筛选
Detached DOM tree，看哪些组件/模块持有大量节点 - 检查所有
setInterval或setTimeout是否在组件卸载时清除，轮播图、状态轮询最常中招 - Vue/React 组件内注册的
addEventListener是否配对removeEventListener，漏掉一个就锁住整个子树 - 全局 Map/Set 缓存是否用节点本身作 key，例如
window.cache.set(el, data)，应改用el.id或WeakMap
真正难发现的是 Shadow DOM 内部泄漏和 iframe 跨域节点残留，这些不会出现在主文档的 querySelectorAll('*').length 统计里，得靠 Performance Monitor 浮层曲线盯住真实堆栈变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
