比更优：浏览器原生支持（ie需document.createelement('main')兜底），减少js查询开销和冗余aria属性，屏幕阅读器可直接定位；必须唯一，禁用重复、嵌套及多余class/id，配合tabindex="-1"和实现可靠跳转。
用 <main></main> 而不是 <div id="main">
<p>语义化标签本身不提升性能，但能减少 JS 查询开销、避免冗余 ARIA 属性，同时让屏幕阅读器直接定位核心内容。浏览器原生支持 <code><main></main>（IE 除外，需 document.createElement('main') 兜底），比靠 role="main" 模拟更轻量。
- 每个页面只用一个
<main></main>，重复使用会触发可访问性检查工具报错
- 不要给
<main></main> 加 id 或 class 再配 JS 选择器——直接 document.querySelector('main') 更快
- 若需兼容 IE11，加一行
document.createElement('main') 在脚本最前即可，无需引入 polyfill 库
跳过导航链接必须用 @#@#@#@#@#@#@#@#@#@0 和 <main id="main" tabindex="-1"></main> 的 ID 完全一致（区分大小写）
<main></main>，重复使用会触发可访问性检查工具报错<main></main> 加 id 或 class 再配 JS 选择器——直接 document.querySelector('main') 更快document.createElement('main') 在脚本最前即可，无需引入 polyfill 库@#@#@#@#@#@#@#@#@#@0 和 <main id="main" tabindex="-1"></main> 的 ID 完全一致（区分大小写）
tabindex="-1" 让 <main></main> 可被程序性聚焦，否则焦点会落在首个可聚焦子元素上，可能跳过标题position: absolute; left: -999px; top: auto; 而非 display: none）避免在 <header></header> 里嵌套多个 <h1></h1>
一个页面理想只有一个 <h1></h1>，它定义文档层级起点。多 <h1></h1> 不影响渲染性能，但会混淆 AT（辅助技术）的结构解析，导致朗读顺序错乱或跳过章节。
- 组件化开发中，子组件若自带
<h1></h1>，需由父级通过 props 控制降级为<h2></h2>或用aria-labelledby关联 - SSR 渲染时，服务端要校验最终 HTML 中
<h1></h1>出现次数，超过 1 个就抛 warning 日志 - 不要依赖 CSS 把
<h2></h2>视觉放大来“假装”是<h1></h1>——语义和样式必须分离
图片加载策略：<img> 的 loading + decoding + fetchpriority
骨架页里图片占大部分初始字节数，但多数不在首屏。现代属性能显著降低主线程阻塞，且不增加额外请求。
- 首屏关键图（如 logo、hero 图）加
loading="eager" fetchpriority="high"；其余一律loading="lazy" -
decoding="async"让解码不阻塞渲染，尤其对大 PNG/WebP 有效，几乎所有现代浏览器已支持 - 慎用
fetchpriority="low"：它仅建议，浏览器可能忽略；真正低优先级图建议用 CSS background-image +@media (prefers-reduced-data: reduce)条件加载
tabindex="-1" 的缺失和 loading="lazy" 对 iframe 的无效性——后者需改用 <iframe loading="lazy"></iframe>（Chrome 98+ 支持），旧版仍得靠 IntersectionObserver 手动控制。
