骨架屏生成是结构解析+节点替换+静态导出的过程：用DOMParser解析HTML/JSX为隔离Document，遍历替换内容为带样式的占位符，内联CSS后导出为可部署的skeleton.html。
直接用 DOM 节点操作生成并发布骨架屏，不是“先写 HTML 再改”，而是把骨架逻辑嵌进页面构建流程里——它本质是一次结构解析 + 节点替换 + 静态导出的过程。关键不在于手动操作单个元素，而在于让浏览器自动把原始结构“骨化”成可落地的静态资源。
用 DOMParser 解析原始 HTML 字符串
骨架生成的第一步不是操作真实页面 DOM，而是安全地解析你提供的 HTML 或简化 JSX 字符串。浏览器原生的 DOMParser 是核心入口：
- 调用
new DOMParser().parseFromString(htmlString, 'text/html')，得到一个干净、隔离的 Document 对象，完全不污染当前页面 - 这个 Document 就是原始结构的“副本树”，后续所有骨架化操作都在它内部进行，比如遍历所有
<div>、<p>、<img>节点 - 注意：JSX 需预处理（如去掉
onClick、{value}等动态表达式），只保留标签结构和基础属性（class、style、width/height），否则parseFromString会报错或解析失败
递归遍历并替换节点为骨架占位符
拿到解析后的 Document 后，对它的 body 子树做深度优先遍历，按规则把内容节点替换成带尺寸样式的灰色块：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 遇到文本节点（
node.nodeType === 3），直接移除或设为空 - 遇到元素节点，保留其
class和内联style（用于继承宽高、flex 布局等），但清空子内容；再插入一个<span class="skeleton-block"></span>占位元素 - 对图片、按钮、输入框等语义化元素，可做特殊处理：比如
<img>替换为带aspect-ratio的骨架容器，<button>替换为带圆角和宽度的灰色块 - 所有新插入的骨架节点都加上统一的 CSS 类（如
skeleton）和动画类（如animate-pulse），样式由 Tailwind 或自定义 CSS 变量驱动
导出完整静态 HTML 文件供发布
骨架 DOM 树构建完成后，不需要走服务端渲染，直接在前端完成静态化打包：
立即学习“前端免费学习笔记（深入）”；
- 调用
documentElement.outerHTML获取整个骨架文档的字符串表示 - 把骨架 CSS（含动画关键帧、变量定义）内联进
<style>标签，确保脱离构建环境也能运行 - 用
URL.createObjectURL(new Blob([htmlString], {type: 'text/html'}))创建下载链接，触发浏览器保存为skeleton.html - 该文件可直接部署到 CDN 或静态托管平台（如 GitHub Pages、Vercel Static Assets），零依赖、免构建、开箱即用
保持可访问性与语义结构不丢失
骨架屏不是纯视觉装饰，它仍需承载基本语义，这对 SEO 和屏幕阅读器很重要：
- 保留原始元素的标签名（
<article>不变成<div>），仅替换内容 - 为每个骨架块添加
aria-hidden="true"，同时在父容器加role="status"和说明性文字（如 “正在加载内容…”） - 避免使用
display: none隐藏原始内容——应通过 CSS 类切换（如.loading .content { visibility: hidden; }）来控制显隐，保证 DOM 结构始终存在
