该用 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 懒加载逻辑，比如需要监听滚动后触发动画、或需配合占位图尺寸计算的场景。

• 必须显式设置 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> 多一层网络往返和解析依赖，极易成为首屏瓶颈。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

常见错误现象：在主 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。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！