loader 必须放在 <body> 最开头并用内联 position: fixed 样式，因浏览器自上而下解析 HTML，晚写会导致白屏或布局跳动；需配 z-index 和 flex 居中，动画定义须内联于 <head>，隐藏须用 window.addEventListener('load', ...) 并加 8 秒超时兜底。
必须把 loader 放在 <body> 最开头，用内联样式 + position: fixed，否则动画根本来不及显示就“闪”没了。
为什么 loader 一定要写在 <body> 开头？
浏览器是自上而下解析 HTML 的。如果 loader 写在页面末尾或 </body> 前，DOM 树建完才渲染它——用户先看到白屏、错位内容或布局跳动，200ms 后才“啪”一下弹出动画，体验比没动画还差。
- 正确位置：
<body><div id="loading" style="position: fixed; ...">...</div> - 错误位置：任何在主内容之后、
</body>之前的位置 - 哪怕只晚几行，Safari 和低端 Android 浏览器都可能漏掉首帧
position: fixed 必须配 z-index 和 flex 居中
只写 position: fixed 不够，没 z-index 会被后续 div 遮住；用 text-align: center 或 margin: auto 在 flexbox 时代已不可靠，尤其在移动端横屏或缩放时会偏移。
- 必备样式：
top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; - 居中推荐写法：
display: flex; justify-content: center; align-items: center; - 背景色建议用
#fff或与品牌一致的纯色，避免深色背景下看不见 spinner
动画定义必须塞进 <head> 的 <style> 里
不能指望外链 CSS 加载完再播动画——网络延迟、CDN 故障、Safari 的 CSS 解析卡顿都会导致首帧空白，用户看到的是“加载中…（停顿）→ 突然跳到完整页”。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 必须在
<head>内写内联@keyframes，例如：@keyframes spin { to { transform: rotate(360deg); } } - Safari 兼容关键：
.spinner { transform-style: preserve-3d; backface-visibility: hidden; } - 别用
will-change: transform，旧 iPad 或低端安卓会首帧更慢
隐藏时机只能用 window.addEventListener('load', ...)
DOMContentLoaded 只表示 DOM 就绪，图片、字体、CSS 中的 @import、<iframe> 都还没加载完。这时候隐藏 loader，用户会看到文字先出来、图片后“啪”一下加载，就是典型的 FOUC（无样式闪烁）。
- 正确监听：
window.addEventListener('load', () => document.getElementById('loading').style.display = 'none'); - 必须加 8 秒超时兜底：
setTimeout(() => ..., 8000)，防资源加载失败卡死 - 不要用
opacity: 0或visibility: hidden替代display: none，前者仍占渲染流程，可能干扰后续动画
真正难的不是写动画，而是让动画在所有设备、所有网络条件下，第一帧不丢、最后一帧不卡——这要求 loader 结构、样式、JS 触发三者严格对齐解析顺序。稍一错位，就从“提示等待”变成“暴露性能短板”。
