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 错误
• 示例：

  <link rel="preload" href="main.js" as="script">

  ，但注意：它只下载，不执行
• 不要对非首屏 JS 或大图滥用 preload，会挤占带宽，反而延长关键资源加载

用 display: none + DOMContentLoaded 控制显示时机

所谓“隐藏技巧”，本质是避免白屏或闪烁，核心在于分离加载与呈现：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 初始给 加 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）。