该用 preload 时用于当前导航明确需要的关键资源（如首屏字体、CSS），prefetch 则用于下一页可能用到的资源；混淆会导致首屏卡顿或带宽浪费。
什么时候该用 link rel="preload" 而不是 link rel="prefetch"
预加载（preload）是告诉浏览器“这个资源马上就要用，现在就去下”，而 prefetch 是“可能以后会用，空闲时再下”。混淆两者会导致关键资源被延迟或带宽被浪费。
常见错误现象：prefetch 被误用于首屏字体、关键 CSS，结果首屏渲染卡顿；或者 preload 用在用户几乎不会触发的页面模块里，白白抢占 HTTP/2 流。
-
preload只用于当前导航中明确需要的资源：比如<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>（注意必须加as和crossorigin，否则字体不生效） -
prefetch适合下一页可能用到的 JS 或图片，比如用户进入详情页前预取评论组件comments.js - Chrome DevTools 的 Network 面板里，
preload请求会标为Priority: high，prefetch则是low—— 这是验证是否写对的最快方式
loading="lazy" 对图片和 iframe 的兼容性陷阱
原生懒加载简单，但不是所有场景都适用。它只对 img 和 iframe 生效，且默认行为依赖 Intersection Observer，老版本 Safari 和部分安卓 WebView 不支持。
使用场景：列表页大量头像、文章内嵌图、非首屏广告位。但它不能替代 JS 懒加载逻辑，比如需要监听滚动后触发动画、或需配合占位图尺寸计算的场景。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 必须显式设置
width和height属性，否则懒加载会引发布局偏移（CLS）——这是 Core Web Vitals 扣分重灾区 - Safari 15.4+ 才支持
loading="lazy"对iframe的支持，旧版需回退到data-src+ JS 方案 - 不要对
img同时设src和loading="lazy"再加 JS 监听：浏览器可能先加载src，造成重复请求
CSS 中 @import 怎么悄悄拖慢首屏
@import 是阻塞式加载，且无法并行，浏览器必须下载并解析完导入的 CSS 后，才继续处理后续样式表。它比 <link> 多一层网络往返和解析依赖，极易成为首屏瓶颈。
常见错误现象：在主 style.css 里用 @import "reset.css"，导致整个 CSS 树延迟构建，FCP 延迟 300ms+；或在媒体查询里滥用 @import，让响应式样式也失去并行加载能力。
- 所有
@import必须放在文件最顶部，否则会被忽略 —— 但即便放对位置，也建议直接改用<link rel="stylesheet"> - 构建工具（如 PostCSS）可自动将
@import内联展开，但要注意路径解析和 source map 断点问题 - 若必须条件加载（如暗色主题 CSS），优先用
media属性的<link>，而非@import (prefers-color-scheme: dark)
script 标签的 defer 和 async 到底谁等谁
defer 等 DOM 解析完、按顺序执行；async 下载完立刻执行、不保证顺序。选错一个，就可能让 init.js 在 utils.js 加载前运行，报 ReferenceError。
使用场景：defer 适合有依赖关系的业务脚本（如 Vue app + 插件）；async 适合完全独立的统计、埋点脚本。
- 只有外部脚本（带
src）才支持这两个属性；内联<script>console.log(1)</script>不受控制 -
defer脚本不会阻塞 HTML 解析，但会阻塞DOMContentLoaded，直到它执行完 —— 所以别在里面写耗时同步逻辑 - 多个
async脚本之间无执行顺序保障，哪怕它们在 HTML 中前后排列，也可能因网络波动导致后下载的先执行
复杂点在于：现代打包工具（如 Webpack）生成的 chunk 通常已做 code splitting 和 preload hint，手动加 defer 或 async 反而可能干扰这些优化。真正要调的，往往是第三方 SDK 的加载时机，而不是自己打包出来的 main.js。
