启动页一闪而过是因为在框架挂载完成前关闭会导致白屏，应通过 Vue 的 mounted() 或 React 的 useEffect 在 app.mount() / root.render() 后隐藏 #splash；禁用 visibility/opacity 隐藏，改用 display: none + CSS 淡出动画；iOS 截图缓存需统一背景色与 manifest 配置。

启动页为什么总是一闪而过？

因为浏览器加载 HTML 时，DOMContentLoaded 触发前页面是白屏或默认背景，等 JS 加载完、Vue/React 挂载好，才真正渲染内容——这中间的空白期就是“闪屏”来源。纯 HTML 启动页不是靠“显示一个页面”，而是靠“延长首屏空白的可控表现”来实现视觉停留。

用 CSS 动画 + display: none 控制启动页显隐

最稳定、兼容性最好（IE11 也行）的方式：在 <body> 里放一个 <div id="splash">，初始显示，等应用就绪再隐藏它。

• #splash 必须设 position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;，否则可能被后续内容遮盖
• 不要用 visibility: hidden 或 opacity: 0 隐藏启动页——它们仍占布局、可能触发滚动条或影响焦点
• 隐藏时机必须在框架挂载完成之后，比如 Vue 用 mounted()，React 用 useEffect(() => { document.getElementById('splash').style.display = 'none'; }, []);
• 加个淡出动画更自然：

  #splash { transition: opacity 0.3s ease-out; }<br>#splash.hidden { opacity: 0; }

  ，然后 JS 中先加 class 再设 display: none

为什么不能用 window.onload 或 DOMContentLoaded 直接关启动页？

这两个事件只代表 HTML 解析/资源加载完成，并不代表你的前端框架已渲染出首屏内容。尤其带路由懒加载、API 请求、字体加载的 App，此时关掉启动页会立刻暴露未样式化或空白的组件。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• DOMContentLoaded 在 <script src="app.js"> 下载执行前就可能触发，JS 还没跑，#splash 可能根本没定义
• window.onload 等所有图片、字体、子资源加载完，但用户其实不需要等图标加载完才看到首页
• 正确做法是让启动页生命周期由框架控制：Vue 的 app.mount() 后、React 的 root.render() 完成回调中操作 DOM

移动端 iOS Safari 的特殊坑：启动页会被截屏缓存

iOS 会在你切出 App 时对当前页面截图并缓存，下次冷启可能先闪一下旧画面——这不是你的启动页逻辑问题，而是系统行为。无法禁用，但可缓解：

立即学习“前端免费学习笔记（深入）”；

• 确保 #splash 的背景色和最终首页首屏背景色一致（比如都是 #ffffff），减少色差突兀感
• 避免在启动页里放文字或 logo；iOS 截图不包含动态内容，文字可能模糊或错位
• 如果用了 PWA，manifest.json 中的 background_color 和 theme_color 必须和启动页 CSS 背景色严格一致，否则状态栏颜色跳变

启动页真正的难点不在“怎么显示”，而在“什么时候关”——关早了露白，关晚了卡顿，且不同设备、网络、框架版本下时机差异极大。最稳妥的做法永远是把关闭动作绑定到框架真实渲染完成的钩子上，而不是依赖任何时间延迟或资源加载事件。