首屏文本必须直接写在HTML最前面且位于<body>内，禁用wrapper、隐藏样式、template和data-*占位；关键CSS仅内联LCP所需基础样式；字体与图片需提权并预加载；弱网探测应基于fetch响应时间而非navigator.onLine。
首屏文本必须写死在HTML最前面，不能靠JS或CSS控制显隐
弱网下用户看到白屏或骨架屏，往往不是因为JS没加载完，而是文本节点根本没进渲染树——浏览器解析HTML是流式的，<h1>、<p>、<button>如果被包在<div class="container">或<section data-lazy="true">里，哪怕只多一层wrapper，就会延迟文本进入渲染流程。更糟的是用visibility: hidden、opacity: 0或display: none控制首屏文案，这些样式仍需等CSSOM构建完成才能生效，等于把文本卡在“不可见”状态。
-
<h1>、<p>、<button>必须直接出现在<body>内，且位于<main>最靠前位置 - 禁用
<template>、<slot>承载首屏文本——Safari 15.4以下版本会丢内容 - 避免
data-*占位（如<div data-content="title"></div>），JS未执行前就是空节点 - 所有文本级元素必须带
lang属性（如<p lang="zh-CN">），否则字体fallback时易触发CLS
关键CSS必须内联，但只内联LCP所需最小样式集
把整个style.css内联进<head>是典型误区：体积大、无法卸载、仍阻塞渲染。真正要内联的，只是LCP元素（比如<h1>父容器、正文段落）的font-size、line-height、color、margin等基础布局规则。动画、栅格、悬停效果、@keyframes、复杂媒体查询全部剥离。
- 用
critters或类似工具提取LCP元素所需样式，内联为<style> - 非关键CSS改用
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">延迟注入 - 绝对禁用
@import：它强制串行加载，在3G网络下可能多拖800ms - 外链CSS加
fetchpriority="low"，避免和文本资源争带宽
字体与图片必须提权，否则fallback会撑开布局
弱网下.woff2字体加载慢，系统字体fallback时字宽不同，会引发布局位移（CLS）；背景图若没及时加载，也会让<h1>所在容器高度塌缩，拖慢文本可见时间。这不是“样式没出来”，而是DOM结构已经错位了。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 所有字体文件必须加
fetchpriority="high"，并配合<link rel="preload" as="font">提前声明 - 首屏
<h1>所在<section>的背景图，加fetchpriority="high"+loading="eager" - 图片必须带
decoding="async"，防止解码阻塞主线程 - 小图标优先用inline SVG，绕过HTTP请求
- 非可视资源（埋点脚本、广告SDK）统一设
fetchpriority="low"
弱网探测必须基于fetch响应时间，不能依赖navigator.onLine
navigator.onLine返回true不代表网络可用——它只反映操作系统层面的连接状态，Wi-Fi连着但路由器断网、4G信号满格但DNS挂了，它都报true。真正在弱网下起作用的，是真实请求的耗时反馈。
立即学习“前端免费学习笔记（深入）”；
- 用
fetch()发起轻量探测请求（如/ping?ts=xxx），超时阈值设为1.5–2s - 连续两次探测失败，才判定为弱网，触发降级样式注入
- 降级样式必须用JS动态注入，不能写进CSS里——SSR会污染SEO，CSS超时再fallback已晚于用户关页
- 降级逻辑要包含：简化字体栈、关闭背景图、降低box-shadow强度、禁用transition
<h1>写在HTML前面不够，如果它依赖的字体没加载，浏览器会等，等不到就fallback，一fallback就重排。这两件事必须同步做，缺一不可。 
