html5的仅在html5+环境下生效，旧版html中被忽略；需配合as属性，且不支持浏览器（如ie）会跳过该标签。
HTML5 的 <link rel="preload"> 在旧版 HTML 中不可用
HTML4 或 XHTML1 文档中写 <link rel="preload"> 不会报错，但浏览器会忽略——它只在 HTML5+ 环境下被解析并触发预加载行为。这意味着如果你的页面声明了 （即 HTML5），才能真正启用资源优先级控制；若用 <code>..>，即使语法正确，preload 也无效。
常见错误现象：开发者在调试时发现字体或关键 CSS 始终延迟加载，检查后发现文档类型是 XHTML1，却误以为 preload 是“通用属性”。
-
preload必须配合as属性（如as="font"、as="script"），否则可能被降级为普通link - 不支持
preload的老浏览器（如 IE 全系、Android Browser 4.4）会直接跳过该标签，无副作用，但也不起作用 - 不要对非关键资源滥用
preload，它会抢占带宽，反而拖慢首屏渲染
async 与 defer 的行为差异在 HTML4/HTML5 中一致，但解析时机依赖 HTML5 解析器
虽然 async 和 defer 属于 HTML5 新增的 <script></script> 属性，但它们的执行逻辑（异步下载 + 执行 vs 异步下载 + DOM 构建完成后执行）在所有支持它们的浏览器中表现一致。不过，HTML5 规范定义了更严格的解析顺序和脚本执行队列机制，旧版 HTML 解析器（如 IE9 及更早）根本不识别这两个属性，会退化为同步加载。
使用场景：首屏 JS 框架（如 Vue、React）建议用 defer；统计类、非阻塞工具脚本适合 async。
立即学习“前端免费学习笔记（深入）”；
-
async脚本不保证执行顺序，多个async脚本可能乱序完成 -
defer脚本按出现顺序执行，且一定在DOMContentLoaded前完成 - 只有外部脚本（含
src）才生效；内联脚本写async或defer会被忽略
资源内联策略受 HTML5 <template></template> 和 <picture></picture> 影响显著
HTML5 新增的语义化标签本身不提速，但让资源内联变得更可控、更可维护。比如用 <picture></picture> + <source srcset></source> 替代单一 <img src alt="HTML和HTML5性能优化途径同否_资源加载策略【精要】" >，能避免在 HTML4 中靠 JS 动态判断 DPR/viewport 后再插入图片——减少重排、降低 JS 依赖。
另一个典型是 <template></template>：它让大段 HTML 片段（如模态框结构、列表项模板）可声明式预加载而不执行，比 HTML4 中用 <script type="text/template"></script> 字符串拼接更安全、更易调试。
-
<picture></picture>中的srcset和sizes属性需配合响应式设计，否则可能加载过大图 -
<template></template>内容不会被解析、不触发资源加载，直到显式调用.content.cloneNode(true) - 内联 SVG 图标在 HTML4/HTML5 中都可行，但 HTML5 支持直接嵌入
<svg></svg>标签并用 CSS 控制样式，无需 base64 或外部引用
<!-- HTML5 推荐的响应式图片写法 --> <picture> <source media="(min-width: 1024px)" srcset="hero-large.webp" type="image/webp"> <source media="(min-width: 768px)" srcset="hero-medium.jpg"> @@##@@ </picture>
HTML 和 HTML5 的性能优化路径并非“是否相同”，而是“能否落地”。很多现代策略（如 preload、fetchpriority、<link rel="preconnect">）强依赖 HTML5 文档类型与现代解析器行为。如果项目还维持 XHTML1 声明或需要兼容 IE9，就别强行套用这些标签——它们看起来像优化，实则无效甚至引入冗余解析开销。
