首屏能渲染出来的html块所依赖的关键css和js必须在domcontentloaded前完成加载与解析；内联关键css需置于外部link之前且gzip后≤14kb，preload字体须配font-display:swap，首屏js宜动态导入并确保dom挂载后执行。
DOMContentLoaded 之前哪些资源必须就位
首屏能渲染出来的 HTML 块，其依赖的 CSS 和 JS 必须在 DOMContentLoaded 触发前完成加载与解析。不是“所有资源”，而是“首屏 DOM 渲染链上的关键路径资源”——比如 hero.jpg 的 <img> 标签若没配 loading="eager" 或没被 <link rel="preload"> 提前捞，浏览器可能等它下载完才 paint；而 main.css 若含 @import 或体积超 14KB，会直接卡住 DOM 构建。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 内联关键 CSS（
<style></style>）必须放在所有外部<link rel="stylesheet">之前，且 gzip 后 ≤14KB -
<link rel="preload" as="font">必须搭配 CSS 中的font-display: swap，否则预加载反而加剧 FOIT - 首屏用到的 JS 模块（如轮播初始化逻辑）应通过
import('./carousel.js')动态加载，并确保调用时机在对应 DOM 节点挂载后（比如用IntersectionObserver监听容器可见性）
HTML 中 defer 和 async 的执行边界在哪
很多人以为把 <script></script> 放到
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
