HTML5无预加载插件能力，预加载靠link rel="preload"、display:none+DOMContentLoaded及谨慎用JS实现；插件非必需，滥用反拖慢首屏。
HTML5 本身不提供“预加载插件”的能力，所谓“页面预加载”实际是通过原生 HTML 属性、CSS 隐藏策略和 JS 执行时机协同控制的——JS 插件只是辅助手段，不是必需项，盲目引入反而拖慢首屏。
用 link rel="preload" 提前加载关键资源
这是最直接、最轻量的预加载方式，浏览器在解析 HTML 时就发起请求，不阻塞渲染：
-
rel="preload"只支持as指定类型的资源（如script、style、font、image），不能用于任意 URL - 必须配合
as和（必要时）crossorigin，否则可能被忽略或触发 CORS 错误 - 示例：，但注意：它只下载，不执行
- 不要对非首屏 JS 或大图滥用
preload，会挤占带宽，反而延长关键资源加载
用 display: none + DOMContentLoaded 控制显示时机
所谓“隐藏技巧”，本质是避免白屏或闪烁，核心在于分离加载与呈现：
- 初始给
加style="display:none"，或用 class 控制（如class="loading"+ CSS.loading { display: none; }） - 在
DOMContentLoaded或更稳妥的load事件中移除隐藏状态：document.addEventListener('DOMContentLoaded', () => { document.body.style.display = 'block'; }); - 不要在
DOMContentLoaded里执行耗时 JS 逻辑，否则仍会卡住显示；复杂初始化应 defer 到setTimeout(..., 0)或requestIdleCallback - 慎用
visibility: hidden替代display: none，前者仍占用布局流，可能引发重排
JS 插件不是加速关键，选错反而拖慢
市面上很多“预加载插件”（如 animsition、preloader.js）本质是加动画遮罩，和性能无关，甚至因 DOM 操作+定时器+冗余 CSS 增加开销：
立即学习“前端免费学习笔记（深入）”；
- 如果只是为了隐藏闪动，纯 CSS + 原生事件足够，无需插件
- 若需自定义加载动画，优先用 CSS
@keyframes+opacity过渡，避免 JS 驱动帧动画 - 插件加载本身要走网络请求，应内联最小化代码（如仅 10 行 toggle class 的逻辑），或通过
type="module"+defer控制执行顺序 - 检查插件是否监听了
window.onload—— 它比DOMContentLoaded晚得多，等所有图片、iframe 加载完才触发，极易造成人为延迟
真正影响“打开速度”的是资源体积、HTTP 请求链路、CDN 覆盖和缓存策略；所谓“隐藏技巧”只是掩盖问题，而非解决。最容易被忽略的是：把 display: none 写在内联 style 里，却忘了在 JS 执行失败时提供降级方案（比如用 no-js class + CSS fallback）。
