最轻量解法是body初始opacity:0并设transition，DOMContentLoaded时加loaded类实现淡入；须避免display:none导致重排，用opacity+visibility组合；配合font-display:swap防字体闪白；Safari需用包裹div替代body。

用 CSS opacity + transition 控制初始透明度

页面一打开就全白闪一下再显示，是因为浏览器默认立刻渲染 DOM，没给视觉过渡留时间。最轻量的解法是让 <body> 或根容器初始为 opacity: 0，加载完成后再切到 1，配合 transition 实现淡入。

关键点在于：必须在样式表里提前写好初始状态和过渡规则，不能等 JS 加载完才加 class，否则首屏仍会“硬出现”。

• 在 <head> 的 <style> 或外链 CSS 中定义：

  body {
    opacity: 0;
    transition: opacity 0.4s ease-out;
  }
  body.loaded {
    opacity: 1;
  }

• JS 放在 </body> 前，用 DOMContentLoaded 触发（不是 load，避免等图片）：

  document.addEventListener('DOMContentLoaded', () => {
    document.body.classList.add('loaded');
  });

• 如果页面有内联脚本或第三方 SDK 拖慢 JS 执行，DOMContentLoaded 可能延迟，此时淡入会滞后——建议把该逻辑抽成最小化内联 script，不依赖外部 bundle

避免 display: none 导致的布局抖动

有人习惯用 display: none 配合 JS 切成 block 来“隐藏再显示”，这会导致浏览器跳过首次布局计算，后续显示时重排（reflow），尤其在字体加载、图片尺寸未定的情况下，页面可能先塌缩再撑开，破坏淡入体验。

• 永远用 opacity + visibility 组合替代 display 切换：

  body {
    opacity: 0;
    visibility: hidden; /* 防止点击/聚焦 */
    transition: opacity 0.4s ease-out;
  }
  body.loaded {
    opacity: 1;
    visibility: visible;
  }

• visibility: hidden 不触发重排，且保持文档流位置，比 display: none 更安全
• 注意：若页面含 position: fixed 元素（如导航栏），它们不受 body 的 visibility 影响，需单独加类控制

处理字体加载导致的“闪白”或“跳动”

即使 DOM 渲染淡入了，如果 Web 字体还没加载完成，浏览器会先用系统字体渲染，等字体就绪后突然替换，造成文字大小/行高变化，看起来像二次闪烁。这不是淡入失效，而是字体加载时机问题。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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

• 用 @font-face 的 font-display: swap 让浏览器立即用后备字体显示，等自定义字体加载完再无感替换：

  @font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2');
    font-display: swap;
  }

• 更彻底的方案是监听 document.fonts.load()，等关键字体就绪后再加 loaded 类，但需考虑超时兜底（比如 3s 后强制淡入，避免用户干等）
• 如果用了 Google Fonts，确保链接中包含 &display=swap 参数，例如：https://fonts.googleapis.com/css2?family=Inter&display=swap

移动端 Safari 的 transition 兼容性细节

iOS 15.4 之前，Safari 对 body 上的 transition 支持不稳定，有时直接跳变。这不是 bug，而是它对根元素动画做了优化限制。

• 绕过方式：不直接作用于 <body>，改用包裹一层 <div id="app">，把 opacity 和 transition 移到这个 div 上
• 同时确保该 div 设置 height: 100vh，否则在 Safari 中可能出现滚动条异常或底部留白
• 若项目已用框架（如 Vue/React），通常已有根容器，直接对其操作即可，无需动 body

实际效果是否平滑，取决于你是否把动画属性写在 CSS 里、是否避开重排、以及是否处理了字体和移动端的特殊限制。最容易被忽略的是：把淡入逻辑绑在 window.onload 上——这时图片、字体、第三方脚本都可能还没完，用户已经看到白屏好几秒了。