HTML结构与样式处理不产生并发请求，但不当写法会拖慢启动、阻塞渲染、放大高并发首屏延迟；关键在于无效结构拖累单个请求响应。
HTML结构与样式处理本身不产生并发请求，但写法不当会直接拖慢页面启动、阻塞渲染、放大高并发下的首屏延迟——关键不在“并发数”，而在“每个请求的响应是否被无效结构拖累”。
为什么
浏览器解析HTML时，遇到
-
<style>内容随HTML一起传输，无法被CDN或浏览器长期缓存（Cache-Control: no-store常被隐式应用） - 多个页面共用按钮/卡片样式，却在各自
<style>里重复定义.btn，导致HTTP响应体膨胀，带宽争抢加剧 - 服务端模板渲染时动态注入
<style>，容易因变量拼接出语法错误，返回500或空白页，失败率在高并发下成倍放大
如何让HTML在高并发下仍保持可预测的解析速度
核心是减少HTML文档体积 + 避免解析中断。结构语义化不是为了好看，而是让浏览器能快速建立DOM树，尽早触发后续资源加载。
- 删掉所有无意义的
div嵌套，用<header>、<article>、<aside>等语义标签替代——浏览器对语义标签的解析路径更短 - 禁止在HTML中写
style="margin: 10px;"这类内联样式，它强制浏览器在解析阶段计算优先级，打断流式渲染 -
<meta charset="UTF-8">必须放在<head>最顶部，否则浏览器可能重解析整页HTML（尤其含中文/emoji时） - 移除开发期遗留的
<!-- TODO: 重构这里 -->注释，它们虽不执行，但占用网络字节和解析内存
Shadow DOM隔离样式时容易忽略的逃逸点
微前端或Web Component中用shadowRoot.innerHTML = htmlString注入HTML，会导致其中的<style>和<script>逃逸到全局作用域——高并发下多个子应用同时挂载，样式互相污染，出现不可复现的UI错乱。
立即学习“前端免费学习笔记（深入）”；
- 必须用
DOMParser解析HTML字符串，再用adoptedStyleSheets显式注入样式表，而非依赖innerHTML -
attachShadow({ mode: 'closed' })是硬性要求，mode: 'open'等于放弃样式隔离，外部脚本可通过el.shadowRoot直接篡改内部样式 - 若子应用使用CSS-in-JS（如Emotion），需确认其底层是否支持
adoptedStyleSheets，否则仍会注入全局<style>
真正卡住高并发首屏的，往往不是某个接口慢了200ms，而是HTML里多了一个没闭合的<div>，导致浏览器反复重排DOM树；也不是样式写了100行，而是这100行被复制进了50个页面的<style>块里——结构与样式的物理分离，本质是为并发流量留出确定性缓冲。
