# 前端资源加载属性对比

前端性能优化中经常会遇到两类配置：一类控制脚本什么时候下载、执行，另一类提示浏览器提前建立连接或获取资源。它们解决的问题不同，不能简单地认为“越早加载越快”。

你提到的 `refer/sync` 通常是指脚本的 `defer/async` 属性，下面将它们和常用的 Resource Hints（资源提示）放在一起比较。

## 一张表看懂异同

| 属性或写法 | 作用对象 | 下载时机 | 执行或生效时机 | 是否阻塞 HTML 解析 | 适用场景 | 主要注意点 |
| --- | --- | --- | --- | --- | --- | --- |
| `<script src="app.js" defer>` | 经典脚本 | HTML 解析同时下载 | HTML 解析完成后，按文档顺序执行 | 否 | 有依赖关系的业务脚本、入口脚本 | 脚本会在 `DOMContentLoaded` 前执行；只对外部经典脚本有意义 |
| `<script src="app.js" async>` | 经典脚本 | HTML 解析同时下载 | 下载完成后立即执行 | 执行时会短暂阻塞 | 独立的统计、广告、监控脚本 | 多个 `async` 脚本执行顺序不确定，不能依赖 DOM 或其他脚本 |
| `<script src="app.js">` | 经典脚本 | 解析到标签时下载 | 下载完成后立即执行 | 是 | 必须同步执行的极少数脚本 | 会暂停 HTML 解析，通常不建议用于大型脚本 |
| `<script type="module" src="app.js">` | ES Module 脚本 | 默认异步下载 | 默认延迟到解析完成后执行 | 否 | 现代模块化应用 | 默认行为接近 `defer`；模块依赖会继续被解析和加载 |
| `<script nomodule src="legacy.js">` | 经典脚本 | 由不支持 Module 的浏览器下载 | 按普通经典脚本规则执行 | 通常会阻塞 | 为旧浏览器提供降级脚本 | 通常与 `type="module"` 成对使用 |
| `<link rel="preload" as="script">` | 当前页面很快需要的资源 | 页面解析后立即高优先级下载 | 资源被真正引用时使用 | 否 | 首屏关键字体、CSS、脚本、图片 | 必须填写正确的 `as`；预加载后长期不用会浪费带宽 |
| `<link rel="modulepreload">` | ES Module 及其依赖 | 尽早下载模块资源 | 模块执行时直接使用缓存资源 | 否 | 需要尽快启动的模块化应用 | 只适用于模块资源，不能替代普通 `preload as="script"` 的所有场景 |
| `<link rel="prefetch" as="script">` | 未来页面可能需要的资源 | 浏览器空闲时低优先级下载 | 未来导航或交互需要时使用 | 否 | 下一路由、下一步操作的资源 | 资源不一定会下载；不要用它抢占当前页面关键资源 |
| `<link rel="preconnect" href="https://cdn.example.com">` | 目标源站连接 | 尽早完成 DNS、TCP、TLS 建连 | 后续请求可复用连接 | 否 | 即将请求的跨域 CDN、字体或 API | 只给真正会访问的源站使用，过多连接会浪费资源 |
| `<link rel="dns-prefetch" href="//cdn.example.com">` | 目标域名 | 空闲时优先解析 DNS | 后续请求复用 DNS 结果 | 否 | 仅需提前解析、但不确定是否立即请求的第三方域名 | 只解决 DNS，不建立 TCP/TLS；优先级低于 `preconnect` |
| `fetchpriority="high"` | 图片、脚本、链接等请求 | 浏览器调度时提高优先级 | 影响资源请求调度 | 否 | LCP 主图、首屏关键资源 | 只是提示，不是强制命令；滥用高优先级会降低整体性能 |
| `fetchpriority="low"` | 图片、脚本、链接等请求 | 浏览器调度时降低优先级 | 影响资源请求调度 | 否 | 非首屏图片、低优先级脚本 | 不代表一定延迟加载，只是降低调度优先级 |
| `<img loading="lazy">` / `<iframe loading="lazy">` | 图片、iframe | 接近视口时再下载 | 下载完成后正常展示或加载 | 否 | 长列表、首屏以下图片和 iframe | 不适合首屏 LCP 图片；首屏图片可使用 `loading="eager"` |
| `<img decoding="async">` | 图片解码 | 不改变网络下载时机 | 允许浏览器异步解码 | 否 | 不希望图片解码阻塞渲染的场景 | 只是解码提示，不等于网络异步加载 |
| `blocking="render"` | 脚本、样式等资源 | 按元素自身规则下载 | 下载后允许阻塞渲染直到资源处理完成 | 可能阻塞渲染 | 必须在首屏绘制前完成的动态资源 | 谨慎使用，阻塞渲染会直接影响 FCP/LCP |
| `crossorigin="anonymous"` | 跨域字体、脚本、图片等 | 不改变下载时机 | 以 CORS 模式请求资源 | 否 | 跨域字体、需要 Timing-Allow-Origin 的资源 | `preload` 和实际引用必须使用一致的 `crossorigin`，否则可能重复下载 |
| `referrerpolicy="no-referrer"` 等 | 资源请求 | 不改变下载时机 | 控制请求发送的 Referer 信息 | 否 | 第三方资源、隐私和安全控制 | 它控制来源信息，不控制资源优先级或执行顺序 |

## 脚本加载示例

### `defer`：保持顺序，等待解析完成

```html
<script src="/js/vendor.js" defer></script>
<script src="/js/app.js" defer></script>
```

两个脚本可以并行下载，但会按照它们在 HTML 中出现的顺序执行。适合 `app.js` 依赖 `vendor.js` 的情况。

### `async`：下载完成就执行

```html
<script src="https://analytics.example.com/analytics.js" async></script>
<script src="https://ads.example.com/ads.js" async></script>
```

两个脚本谁先下载完成谁先执行，因此它们应当彼此独立，不要依赖执行顺序，也不要假设目标 DOM 已经完成渲染。

### Module 与旧浏览器降级

```html
<script type="module" src="/js/app.mjs"></script>
<script nomodule defer src="/js/legacy.js"></script>
```

支持 ES Module 的浏览器使用 `app.mjs`，旧浏览器使用 `legacy.js`。Module 脚本默认具有延迟执行特征。

## Resource Hints 示例

```html
<head>
  
  <link
    rel="preload"
    href="/fonts/inter-latin.woff2"
    as="font"
    type="font/woff2"
    crossorigin
  />

  
  <link rel="modulepreload" href="/js/app.mjs" />

  
  <link rel="prefetch" href="/js/settings.mjs" as="script" />

  
  <link rel="preconnect" href="https://cdn.example.com" crossorigin />

  
  <link rel="dns-prefetch" href="//img.example.com" />
</head>
```

### `preload` 与实际引用要匹配

```html
<link
  rel="preload"
  href="/fonts/inter-latin.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/> 

<style>
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter-latin.woff2") format("woff2");
    font-display: swap;
  }
</style>
```

字体的预加载和 `@font-face` 请求需要保持相同的 URL、CORS 模式和资源类型，否则浏览器可能把它们当成两个请求。

## 图片加载示例

```html

<img
  src="/images/hero.webp"
  width="1280"
  height="720"
  fetchpriority="high"
  decoding="async"
  alt="首页主视觉"
/> 


<img
  src="/images/article-cover.webp"
  width="800"
  height="450"
  loading="lazy"
  decoding="async"
  fetchpriority="low"
  alt="文章配图"
/> 
```

图片最好显式设置 `width` 和 `height`，这样浏览器可以提前预留空间，减少布局偏移（CLS）。

## 选择建议

1. 业务入口脚本优先考虑 `defer` 或 `type="module"`，需要保持顺序时不要使用 `async`。
2. 独立统计、监控脚本可以使用 `async`，避免它们影响主业务脚本。
3. 只有当前页面很快且确定会使用的关键资源才使用 `preload`。
4. 下一页面或未来交互才会使用的资源使用 `prefetch`，并接受它可能不执行的事实。
5. 只对少量确定会访问的跨域源使用 `preconnect`；其他第三方域名可考虑 `dns-prefetch`。
6. 用 `loading="lazy"` 延后非首屏图片，用 `fetchpriority="high"` 明确首屏关键图片，避免同时把大量资源标记为高优先级。
7. 这些属性大多是浏览器提示，不是绝对命令；最终效果需要结合 Performance 面板、LCP、CLS 和真实网络环境验证。

对比 async、defer、preload、prefetch、preconnect 等脚本与资源加载属性，并提供可直接使用的 HTML 示例。

前端资源加载属性对比：async、defer、preload 与 prefetch


# meta viewport 是做什么用的，怎么写？

用法

```html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
```

| 属性            | 值示例                  | 作用                                             |
| ------------- | -------------------- | ---------------------------------------------- |
| width         | device-width 或 600px | 设置视口的宽度。device-width 表示完美适配当前设备的屏幕宽度（最重要）。     |
| initial-scale | 1.0                  | 页面首次加载时的初始缩放比例。1.0 表示不缩放（1:1 显示）。              |
| minimum-scale | 1.0                  | 允许用户的最小缩放比例。                                   |
| maximum-scale | 1.0                  | 允许用户的最大缩放比例。                                   |
| user-scalable | yes 或 no             | 是否允许用户手动缩放（no 表示禁止）                            |
| viewport-fit  | cover 或 contain      | 设置视口的适应模式。cover 表示视口会完全覆盖页面，contain 表示视口会包含页面。 |

---

“meta viewport 是移动端适配的‘基石’，它的核心作用是告诉浏览器，当前页面的宽度应该以设备的物理宽度为基准，而不是以桌面端的 980px 默认宽度为基准。”

“在没有这个标签的时候，移动端浏览器会默认在一个虚拟的‘布局视口’（通常 980px）下渲染页面，然后把页面缩小塞进手机屏幕里，所以文字会变得特别小。

加上这个标签后，浏览器会采用‘理想视口’，让 CSS 像素与设备宽度匹配，这样 1px 在手机上显示的大小就正常了，我们才能顺利地写 rem、vw 等响应式布局。”


## 追问 viewport 和 CSS 像素、DPR 的关系


## 追问其他关键的 <meta> 标签
1. 字符编码（必备）
<meta charset="UTF-8">
确保页面不出现乱码，必须放在 <head> 的最顶部（在 <title> 之前）。

2. SEO 优化（针对 C 端项目）
<meta name="description" content="页面描述"> 和 <meta name="keywords" content="关键词">
虽然百度权重降低，但在社交媒体分享时，配合 OG 协议（Open Graph）可以控制分享出去的标题、描述和缩略图，这对运营非常重要。”

## 移动端 1px 边框问题

###  方案一：rem + 动态根字体
  1. 动态根字体：根据根字体大小
  2. rem 单位：根据根字体大小，计算元素的 rem 值
缺点
  问题： 边框问题：在移动端，1px 边框在手机上显示的大小是 1px，而不是 2px
  影响其他UI元素的显示效果

###  方案二：vw/vh 纯 CSS 方案（无 JS，更优雅）
直接写基于750px 设计稿的像素值，postcss 会自动将 px 转 vw。（375px->50vw;）

默认使用vw 单位, 将750 默认为设计稿宽度，计算元素的 vw 值
```css
..box {
  width: 375px;    /* 构建后自动转成 50vw */
  height: 200px;   /* 构建后自动转成 26.67vw */
  border: 1px solid #ccc; /* 构建后自动转成 0.133vw，自动适配 DPR */
}
```

在项目中配置 postcss-px-to-viewport，写 CSS 时直接写 px，构建工具自动转成 vw：
```js
// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 750,   // 设计稿宽度
      unitPrecision: 5,     // 转换精度
      viewportUnit: 'vw',
      minPixelValue: 1,     // 小于 1px 不转换
    }
  }
}
```

### 方案三：基于 DPR 的缩放方案（适用于活动页/大屏展示）

原理：用 JS 获取 window.devicePixelRatio，动态缩放整个页面容器。

```js
 const designWidth = 750;
  const deviceWidth = document.documentElement.clientWidth;
  const scale = deviceWidth / designWidth;
  
  const app = document.getElementById('app');
  app.style.transform = `scale(${scale})`;
  app.style.transformOrigin = 'top left';
```


缺点： 整页缩放，滚动有问题

## canvas 中的dpr问题

1. 获取canvas 的 css 逻辑像素 以及dpr
2. 设置canvas 中的 canvas 容器尺寸为 css 逻辑像素 * dpr
3. 设置canvas 的scale 为 dpr(方便绘制的时候设置)


介绍 meta viewport 的常用属性及其对移动端页面视口和缩放的影响。

meta viewport 是做什么用的，怎么写？


# HTML

## HTML 语义化

语义化是使用能够表达内容含义的 HTML 标签来组织页面，例如用 `h1`-`h6` 表示标题、`p` 表示段落、`article` 表示文章、`main` 表示主要内容、`aside` 表示边栏、`nav` 表示导航。

语义化有两个主要作用：有利于搜索引擎理解页面内容，也便于人阅读和团队维护。

## HTML5 新增标签

- 文章结构：`header`、`main`、`footer`、`nav`、`section`、`article`、`figure`、`mark`。
- 多媒体和图形：`video`、`audio`、`svg`、`canvas`。
- 表单类型：`email`、`tel` 等。

## Canvas 与 SVG

Canvas 主要通过绘图上下文使用笔刷绘制二维图形；SVG 主要通过标签描述不规则的矢量图形。两者都可用于二维绘图。

SVG 的节点支持分层和事件处理，但节点过多时渲染可能变慢；Canvas 通常有更好的绘制性能，但代码组织更复杂，事件和分层能力需要额外处理或借助库实现。

## DOM 事件模型

事件传播先经过从上到下的捕获阶段，再经过从下到上的冒泡阶段。`addEventListener` 的第三个参数可以选择监听阶段，`event.stopPropagation()` 可以阻止事件继续捕获或冒泡。

## SEO

页面内部优化包括：设置合理的 `title`、`description`、`keywords`，使用语义化 HTML，为非装饰图片添加 `alt`，谨慎使用 `display: none` 隐藏重要内容，将重要内容放在 HTML 前部，并减少使用 `iframe`，因为搜索引擎通常无法直接抓取其中的内容。外部优化包括向各个搜索网站提交网站。

原笔记中的建议是：标题一般不超过 80 个字符，描述一般不超过 150 个字，关键词一般设置 3 个左右。

## 微格式

微格式是在已有、广泛采用的标准上建立的一组开放数据格式。它把语义嵌入 HTML，例如给链接增加 `rel="home page"` 等语义属性，使标签具备更明确的结构和含义。

## 替换元素与页面可见性

替换元素的内容不由 CSS 直接控制，原笔记列举了 `iframe`、`img`、`audio`、`video`。

页面可见性可以通过 `document.hidden` 和 `document.visibilityState` 判断。`visible` 表示页面处于当前激活标签且窗口未最小化；`hidden` 表示标签未激活或窗口被最小化；`prerender` 表示页面正在重新生成、用户暂时不可见。`visibilitychange` 事件用于监听状态变化。


整理 HTML 语义化、HTML5 标签、Canvas、SVG、DOM 事件与页面可见性等知识。

HTML学习笔记

前端资源加载属性对比：async、defer、preload 与 prefetch

meta viewport 是做什么用的，怎么写？

HTML 基础与语义化笔记