<main>比<div id="main">更优：浏览器原生支持（IE需document.createElement('main')兜底），减少JS查询开销和冗余ARIA属性，屏幕阅读器可直接定位；必须唯一，禁用重复、嵌套及多余class/id，配合tabindex="-1"和<a href="#main">实现可靠跳转。
用 <main> 而不是 <div id="main">
语义化标签本身不提升性能，但能减少 JS 查询开销、避免冗余 ARIA 属性，同时让屏幕阅读器直接定位核心内容。浏览器原生支持 <main>（IE 除外，需 document.createElement('main') 兜底），比靠 role="main" 模拟更轻量。
- 每个页面只用一个
<main>，重复使用会触发可访问性检查工具报错 - 不要给
<main>加id或class再配 JS 选择器——直接document.querySelector('main')更快 - 若需兼容 IE11，加一行
document.createElement('main')在脚本最前即可，无需引入 polyfill 库
跳过导航链接必须用 <a href="#main"> 且目标存在
键盘用户按 Tab 键时，第一个焦点元素常是「跳至主内容」链接，但它失效的常见原因是：锚点不存在、ID 拼写错误、或目标元素未设置 tabindex="-1"。
- 确保
<a href="#main">跳至主内容</a>和<main id="main" tabindex="-1">的 ID 完全一致（区分大小写） -
tabindex="-1"让<main>可被程序性聚焦，否则焦点会落在首个可聚焦子元素上，可能跳过标题 - 该链接应放在
<body>最开头，避免被 CSS 隐藏（用position: absolute; left: -999px; top: auto;而非display: none）
避免在 <header> 里嵌套多个 <h1>
一个页面理想只有一个 <h1>，它定义文档层级起点。多 <h1> 不影响渲染性能，但会混淆 AT（辅助技术）的结构解析，导致朗读顺序错乱或跳过章节。
- 组件化开发中，子组件若自带
<h1>，需由父级通过 props 控制降级为<h2>或用aria-labelledby关联 - SSR 渲染时，服务端要校验最终 HTML 中
<h1>出现次数，超过 1 个就抛 warning 日志 - 不要依赖 CSS 把
<h2>视觉放大来“假装”是<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">（Chrome 98+ 支持），旧版仍得靠 IntersectionObserver 手动控制。 
