css-in-js在ssr中易出现样式闪烁或错位，根本原因是服务端与客户端class名生成逻辑不一致，需确保缓存实例、插件配置及style标签属性完全统一，并避免useinsertioneffect等ssr不执行的注入方式。

HTML语义化不是“加个 <article></article> 就完事”

语义标签只有在 DOM 结构、辅助技术、样式继承三者对齐时才真正生效。比如用 <section></section> 包裹无标题内容，或把 <button></button> 换成带 onclick 的 <div>，都会破坏可访问性与样式复用逻辑。<ul> <li> <code><nav></nav> 必须包含导航链接，不能只放 logo 或搜索框

<time></time> 要带 datetime 属性，否则屏幕阅读器无法解析时间语义

自定义组件（如 <user-card></user-card>）若未声明 role 或 aria-live，不会被无障碍树识别

浏览器对 <main></main> 的隐式 ARIA role 有严格校验：页面只能有一个，且不能嵌套在 <article></article> 或 <aside></aside> 内

语义错误不会报错，但会拖慢 CSS 选择器匹配——浏览器引擎对非标准结构需回退到通用匹配路径。

CSS 选择器性能陷阱常藏在“看起来很合理”的写法里

.header .nav .item a 这类多层后代选择器，在现代浏览器中仍可能触发重排重绘，尤其当父级频繁增删子节点时。真正影响执行效率的不是“写了多少行 CSS”，而是选择器是否迫使浏览器反复向上遍历 DOM 树。

• 避免使用通配符 <em></em> 或属性选择器 [class="btn"] 作为关键选择器（即最右边那个）
• :not() 的参数如果是复杂选择器（如 :not(.foo.bar[data-id])），会显著增加计算开销
• input[type="text"]:focus 比 .input-text:focus 更慢，因为需检查每个 input 的 type 属性值
• 使用 will-change: transform 前确认该元素确实频繁动画，否则反而增加内存占用和图层合成负担

Chrome DevTools 的 Coverage 面板能直接标出未执行的 CSS 规则，比靠经验猜更可靠。

“CSS-in-JS” 在 SSR 场景下容易漏掉关键样式水合

服务端渲染时，如果 JS 框架（如 Next.js、Remix）没正确同步 CSS-in-JS 的 class 名生成逻辑，客户端 hydration 后会出现样式闪烁或错位。根本原因是服务端与客户端的哈希算法或插件配置不一致。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• Emotion 需确保 cache 实例在服务端与客户端完全相同（包括 key 和 stylisPlugins）
• Styled-components 要启用 StyleSheetManager 的 disableVendorPrefixes 选项，否则服务端生成的前缀可能与客户端不匹配
• 所有动态插入的 <style></style> 标签必须带 data-emotion 或 data-styled 属性，否则 SSR 提取工具（如 @emotion/server）无法识别并内联
• 若使用 useInsertionEffect 注入样式，它在 SSR 中不执行，必须改用 useEffect + 客户端检测

这类问题通常只在构建后暴露，开发模式下因热更新掩盖了水合差异。

字体加载策略不当会让首屏渲染卡在“空白等字”阶段

font-display: swap 看似万能，但在中文字体场景下极易引发布局抖动（FOIT → FOUT → FOIT 循环）。因为中文字体体积大、字重多，浏览器常放弃等待而 fallback 到系统字体，等真实字体加载完成又回填，造成两次重排。

• 对于中文站点，优先用 font-display: optional + preload 关键字字体（如标题用的 font-family: "PingFang SC", sans-serif）
• 不要对整套 @font-face 都设 display: swap，应按使用频率分级：正文用 block（短暂停顿可接受），图标字体用 optional
• preload 的 as="font" 必须带 type="font/woff2"，否则 Chrome 可能忽略预加载
• Webpack/Vite 构建时若用 url() 引用字体，确保 assetInlineLimit 设置足够低（如 0），避免字体被 base64 内联导致 HTML 体积暴涨

字体加载不是纯前端问题，CDN 缓存策略、HTTP/2 多路复用、以及字体子集化（subset）都直接影响首屏感知速度。