HTML如何预加载资源？link rel="preload"的作用？-html教程-PHP中文网

预加载资源通过link rel="preload"实现，浏览器会提前下载指定资源以提升加载速度；2. 必须正确设置as属性以声明资源类型（如style、script、image等），否则预加载可能无效；3. 跨域资源需添加crossorigin属性（如字体文件需设置crossorigin="anonymous"）；4. 推荐配合type属性声明mime类型以优化资源识别；5. 预加载仅适用于关键渲染路径上的资源，如首屏css、js、字体和关键图片；6. 预加载不会阻塞onload事件，但应避免预加载非必要资源以防带宽浪费；7. 动态添加预加载可通过javascript创建link元素并插入head中实现；8. 验证预加载是否生效可使用开发者工具查看network面板中的initiator或cause字段是否显示preload；9. 预加载资源可被javascript访问，但需确保资源已加载完成并处理跨域问题；10. preload用于当前页面关键资源的高优先级加载，而prefetch用于未来可能需要资源的低优先级预加载，二者用途不同。预加载与浏览器缓存协同工作，预加载加速资源进入缓存，而缓存减少重复下载，共同提升页面性能。

$HTML如何预加载资源？link rel=\$

HTML预加载资源，简单来说，就是告诉浏览器提前下载指定的资源，以便后续更快地使用。这就像你提前把需要的食材准备好，等到真正要做饭的时候，就能节省不少时间。

link rel="preload"

登录后复制

就是实现这个功能的关键。

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="script.js" as="script">
<link rel="preload" href="image.png" as="image">

登录后复制

解决方案

使用

link rel="preload"

登录后复制

预加载资源，可以显著提升页面加载速度，优化用户体验。以下是一些关键点：

立即学习“前端免费学习笔记（深入）”；

```
rel="preload"
```
登录后复制
: 这是声明预加载的关键属性。它告诉浏览器，你希望提前下载指定的资源。
```
href
```
登录后复制
: 指定要预加载的资源的URL。这可以是CSS文件、JavaScript文件、图片等等。
```
as
```
登录后复制
: 这个属性非常重要，它告诉浏览器要预加载的资源类型。常见的类型包括：
- ```
style
```
  登录后复制
  : CSS样式表
- ```
script
```
  登录后复制
  : JavaScript脚本
- ```
image
```
  登录后复制
  : 图片
- ```
font
```
  登录后复制
  : 字体
- ```
fetch
```
  登录后复制
  : 通过
```
fetch
```
  登录后复制
  API 请求的资源
- ```
document
```
  登录后复制
  : HTML文档
- ```
audio
```
  登录后复制
  : 音频文件
- ```
video
```
  登录后复制
  : 视频文件
正确设置
```
as
```
登录后复制
属性，浏览器才能正确处理预加载的资源。例如，如果预加载的是CSS文件，
```
as
```
登录后复制
必须设置为
```
style
```
登录后复制
。否则，浏览器可能不会正确应用样式，或者根本不会预加载资源。
```
crossorigin
```
登录后复制
: 如果你预加载的资源来自不同的域名（跨域请求），你需要设置
```
crossorigin
```
登录后复制
属性。例如，预加载字体文件时，通常需要设置
```
crossorigin="anonymous"
```
登录后复制
。
```
<link rel="preload" href="https://example.com/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
```
登录后复制
```
type
```
登录后复制
: 指定资源的MIME类型。虽然不是必需的，但建议设置，可以帮助浏览器更快地判断资源类型。
```
<link rel="preload" href="style.css" as="style" type="text/css">
<link rel="preload" href="script.js" as="script" type="text/javascript">
```
登录后复制

预加载的优点：

提升页面加载速度: 提前下载关键资源，减少渲染阻塞。
优化用户体验: 更快地显示页面内容，减少用户的等待时间。
控制资源加载优先级: 可以指定哪些资源需要优先加载。

预加载的缺点：

增加HTTP请求: 预加载会增加额外的HTTP请求，如果滥用，可能会适得其反。
浏览器兼容性: 虽然现代浏览器都支持
```
rel="preload"
```
登录后复制
，但一些旧版本浏览器可能不支持。
需要谨慎使用: 如果预加载了不必要的资源，会浪费带宽。

总的来说，

link rel="preload"

登录后复制

是一个强大的工具，可以帮助你优化页面加载速度。但是，需要谨慎使用，避免过度预加载。

如何确定需要预加载哪些资源？

预加载策略应该基于页面关键渲染路径（Critical Rendering Path）分析。简单来说，就是确定哪些资源是页面首次渲染所必需的。

识别关键资源: 哪些资源直接影响页面的首次渲染？通常包括：
- CSS文件：用于渲染页面的基本样式。
- JavaScript文件：用于处理用户交互和动态内容。
- 字体文件：用于显示文本内容。
- 首屏图片：用户首次看到的图片。
分析资源加载顺序: 浏览器通常会按照HTML文档的顺序加载资源。但是，可以通过预加载来改变这个顺序，优先加载关键资源。
使用开发者工具: Chrome DevTools 或 Firefox Developer Tools 可以帮助你分析页面的加载性能，找出瓶颈。
- Performance 面板: 可以记录页面的加载过程，查看资源的加载时间和优先级。
- Network 面板: 可以查看每个资源的HTTP请求，以及资源的MIME类型和大小。
考虑用户体验: 优先加载用户最先看到的内容。例如，如果页面包含一个大的背景图片，可以考虑预加载这张图片，以便更快地显示页面。
避免过度预加载: 只预加载关键资源，避免浪费带宽。如果预加载了太多资源，可能会导致页面加载速度变慢。

举个例子，假设你的页面包含以下资源：

```
style.css
```
登录后复制
: 用于渲染页面的基本样式。
```
app.js
```
登录后复制
: 用于处理用户交互和动态内容。
```
logo.png
```
登录后复制
: 页面顶部的logo图片。
```
background.jpg
```
登录后复制
: 页面的背景图片。

在这种情况下，你应该优先预加载

style.css

登录后复制

和

logo.png

登录后复制

，因为它们直接影响页面的首次渲染。

app.js

登录后复制

可以稍后加载，

background.jpg

登录后复制

可以使用懒加载（lazy loading）。

<head>
  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="logo.png" as="image">
  <link rel="stylesheet" href="style.css">
  <img src="logo.png" alt="Logo">
  <script src="app.js"></script>
</head>

登录后复制

预加载字体文件时需要注意什么？

预加载字体文件需要特别注意

crossorigin

登录后复制

属性，以及字体文件的格式和MIME类型。

```
crossorigin
```
登录后复制
属性: 如果字体文件来自不同的域名，你需要设置
```
crossorigin="anonymous"
```
登录后复制
。这是因为字体文件是一种敏感资源，浏览器需要进行跨域检查。
```
<link rel="preload" href="https://example.com/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
```
登录后复制
字体格式: 现代浏览器支持多种字体格式，包括 WOFF2、WOFF、TTF 和 OTF。WOFF2 是推荐的格式，因为它具有更好的压缩率和性能。
MIME类型: 正确设置字体文件的MIME类型，可以帮助浏览器更快地判断资源类型。常见的字体MIME类型包括：
- ```
font/woff2
```
  登录后复制
  : WOFF2字体
- ```
font/woff
```
  登录后复制
  : WOFF字体
- ```
font/ttf
```
  登录后复制
  : TTF字体
- ```
font/otf
```
  登录后复制
  : OTF字体
字体加载策略: 可以使用
```
font-display
```
登录后复制
属性来控制字体的加载行为。常见的
```
font-display
```
登录后复制
值包括：
- ```
swap
```
  登录后复制
  : 先显示备用字体，字体加载完成后再替换。
- ```
fallback
```
  登录后复制
  : 先显示备用字体，短时间内（通常是3秒）如果字体加载完成则替换，否则一直显示备用字体。
- ```
optional
```
  登录后复制
  : 浏览器自行决定是否加载字体，通常用于低优先级字体。
避免FOIT/FOUT: FOIT（Flash of Invisible Text）是指字体加载完成前，文本不可见。FOUT（Flash of Unstyled Text）是指字体加载完成后，文本样式发生变化。可以使用
```
font-display
```
登录后复制
属性来避免这两种情况。

一个完整的字体预加载示例：

<head>
  <link rel="preload" href="https://example.com/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <style>
    @font-face {
      font-family: 'MyFont';
      src: url('https://example.com/font.woff2') format('woff2');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    body {
      font-family: 'MyFont', sans-serif;
    }
  </style>
</head>

登录后复制

这个示例中，我们首先使用

link rel="preload"

登录后复制

预加载字体文件，然后使用

@font-face

登录后复制

声明字体，并设置

font-display: swap

登录后复制

来避免FOIT/FOUT。

预加载与浏览器缓存有什么关系？

预加载和浏览器缓存是两个不同的概念，但它们可以一起工作，以提高页面加载速度。

预加载: 告诉浏览器提前下载指定的资源，以便后续更快地使用。预加载的资源会被存储在浏览器的缓存中。
浏览器缓存: 浏览器会自动缓存一些资源，例如图片、CSS文件和JavaScript文件。当用户再次访问同一个页面时，浏览器可以直接从缓存中加载这些资源，而不需要重新下载。

预加载可以帮助浏览器更快地将资源添加到缓存中。例如，如果预加载了一个CSS文件，浏览器会在解析HTML文档之前就开始下载这个文件。当浏览器解析到

<link>

登录后复制

标签时，可以直接从缓存中加载这个文件，而不需要重新下载。

但是，预加载并不能完全替代浏览器缓存。浏览器缓存是自动的，而预加载是手动的。浏览器会根据HTTP头信息（例如

Cache-Control

登录后复制

和

Expires

登录后复制

）来决定是否缓存资源。预加载只是告诉浏览器优先下载某些资源，并不能强制浏览器缓存这些资源。

以下是一些需要注意的点：

HTTP头信息: 确保你的服务器设置了正确的HTTP头信息，以便浏览器可以正确缓存资源。
缓存失效: 浏览器缓存的资源可能会失效。例如，如果服务器更新了资源，浏览器会重新下载这个资源。
Service Worker: 可以使用Service Worker来更精细地控制缓存行为。Service Worker是一个在浏览器后台运行的脚本，可以拦截HTTP请求，并从缓存中返回响应。

总的来说，预加载和浏览器缓存是互补的。预加载可以帮助浏览器更快地将资源添加到缓存中，而浏览器缓存可以帮助浏览器更快地加载资源。

豆绘AI

豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情

如何使用JavaScript动态添加预加载链接？

有时候，你可能需要在JavaScript中动态添加预加载链接。例如，你可能需要根据用户的设备类型或网络状况来动态加载不同的资源。

可以使用以下代码来动态添加预加载链接：

function preload(href, as, type, crossorigin) {
  const link = document.createElement("link");
  link.rel = "preload";
  link.href = href;
  link.as = as;
  if (type) {
    link.type = type;
  }
  if (crossorigin) {
    link.crossOrigin = crossorigin;
  }
  document.head.appendChild(link);
}

// 示例：预加载一个CSS文件
preload("style.css", "style", "text/css");

// 示例：预加载一个字体文件
preload("https://example.com/font.woff2", "font", "font/woff2", "anonymous");

登录后复制

这个函数接受四个参数：

```
href
```
登录后复制
: 要预加载的资源的URL。
```
as
```
登录后复制
: 资源的类型（例如 "style"、"script"、"image"）。
```
type
```
登录后复制
: 资源的MIME类型（可选）。
```
crossorigin
```
登录后复制
: 是否需要跨域请求（可选）。

这个函数会创建一个

<link>

登录后复制

元素，并设置相应的属性，然后将这个元素添加到

<head>

登录后复制

标签中。

需要注意的是，动态添加预加载链接可能会有一些性能问题。因为浏览器需要在解析JavaScript代码之后才能创建预加载链接。所以，最好在HTML文档中静态添加预加载链接，除非你有特殊的需求。

动态添加预加载链接的示例：

// 根据设备类型动态加载不同的CSS文件
if (isMobile()) {
  preload("mobile.css", "style", "text/css");
} else {
  preload("desktop.css", "style", "text/css");
}

function isMobile() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

登录后复制

这个示例中，我们根据用户的设备类型动态加载不同的CSS文件。如果用户使用的是移动设备，我们会加载

mobile.css

登录后复制

，否则我们会加载

desktop.css

登录后复制

。

预加载会阻塞

onload

登录后复制

事件吗？

预加载不会阻塞

onload

登录后复制

事件，因为预加载是异步的。

onload

登录后复制

事件会在页面所有资源（包括图片、CSS文件和JavaScript文件）加载完成后触发。预加载只是告诉浏览器提前下载指定的资源，并不会改变资源的加载顺序。

但是，如果预加载的资源是JavaScript文件，并且这个JavaScript文件包含了阻塞渲染的代码，那么预加载可能会间接影响

onload

登录后复制

事件的触发时间。例如，如果JavaScript文件包含了

document.write

登录后复制

或

document.open

登录后复制

方法，那么浏览器需要先执行这些代码，才能继续解析HTML文档。

以下是一些需要注意的点：

避免阻塞渲染的代码: 尽量避免在JavaScript文件中使用阻塞渲染的代码。
使用
```
async
```
登录后复制
或
defer
登录后复制
属性: 可以使用
```
async
```
登录后复制
或
```
defer
```
登录后复制
属性来异步加载JavaScript文件。
```
async
```
登录后复制
属性表示JavaScript文件会并行下载和执行，
```
defer
```
登录后复制
属性表示JavaScript文件会并行下载，但在HTML文档解析完成后再执行。
优化JavaScript代码: 优化JavaScript代码，减少执行时间。

总的来说，预加载本身不会阻塞

onload

登录后复制

事件，但如果预加载的资源包含了阻塞渲染的代码，那么预加载可能会间接影响

onload

登录后复制

事件的触发时间。

如何验证预加载是否生效？

验证预加载是否生效，可以使用 Chrome DevTools 或 Firefox Developer Tools。

Chrome DevTools:
- 打开 Chrome DevTools (F12 或右键 -> 检查)。
- 切换到 "Network" 面板。
- 刷新页面。
- 查看资源的 "Initiator" 列。如果资源是通过
```
link rel="preload"
```
  登录后复制
  加载的，那么 "Initiator" 列会显示 "preload"。
- 查看资源的 "Timing" 列。预加载的资源通常会比其他资源更早开始下载。
Firefox Developer Tools:
- 打开 Firefox Developer Tools (F12 或右键 -> 检查)。
- 切换到 "Network" 面板。
- 刷新页面。
- 查看资源的 "Cause" 列。如果资源是通过
```
link rel="preload"
```
  登录后复制
  加载的，那么 "Cause" 列会显示 "Preload"。
- 查看资源的 "Timeline" 列。预加载的资源通常会比其他资源更早开始下载。

此外，还可以使用 Lighthouse 来分析页面的性能。Lighthouse 会检查页面是否使用了预加载，并给出相应的建议。

除了使用开发者工具，还可以通过查看HTTP请求来验证预加载是否生效。如果预加载生效，浏览器会发送一个HTTP请求来下载预加载的资源。

需要注意的是，预加载的效果可能会受到多种因素的影响，例如浏览器缓存、网络状况和服务器配置。所以，即使预加载生效，也可能无法显著提升页面加载速度。

预加载的资源可以被JavaScript访问吗？

预加载的资源可以被JavaScript访问，但需要注意资源加载完成的时间。

如果预加载的是JavaScript文件，可以使用

<script>

登录后复制

标签来加载这个文件。但是，需要确保

<script>

登录后复制

标签在

link rel="preload"

登录后复制

标签之后。

<head>
  <link rel="preload" href="script.js" as="script">
  <script src="script.js"></script>
</head>

登录后复制

如果预加载的是其他类型的资源，例如图片或CSS文件，可以使用JavaScript来访问这些资源。但是，需要确保资源已经加载完成。可以使用

onload

登录后复制

事件来监听资源的加载完成事件。

const image = new Image();
image.onload = function() {
  // 图片加载完成
  console.log("Image loaded");
};
image.src = "image.png";

登录后复制

需要注意的是，如果预加载的资源来自不同的域名，你需要设置

crossorigin

登录后复制

属性，才能使用JavaScript访问这些资源。

总的来说，预加载的资源可以被JavaScript访问，但需要注意资源加载完成的时间和跨域问题。

预加载和prefetch有什么区别？

preload

登录后复制

和

prefetch

登录后复制

都是用于优化页面加载速度的技术，但它们的目的和使用场景有所不同。

```
preload
```
登录后复制
: 告诉浏览器提前下载当前页面需要的资源。
```
preload
```
登录后复制
是一种强制性的指令，浏览器会尽可能快地下载指定的资源。
```
preload
```
登录后复制
主要用于加载当前页面立即需要的关键资源，例如CSS文件、JavaScript文件和字体文件。
```
prefetch
```
登录后复制
: 告诉浏览器提前下载将来可能需要的资源。
```
prefetch
```
登录后复制
是一种提示性的指令，浏览器会根据自身的资源调度策略来决定是否下载指定的资源。
```
prefetch
```
登录后复制
主要用于加载用户将来可能会访问的页面或资源，例如下一页的HTML文档或图片。

以下是一些关键区别：

优先级:
```
preload
```
登录后复制
的优先级比
```
prefetch
```
登录后复制
高。浏览器会优先下载
```
preload
```
登录后复制
指定的资源。
使用场景:
```
preload
```
登录后复制
用于加载当前页面需要的关键资源，
```
prefetch
```
登录后复制
用于加载将来可能需要的资源。
强制性:
```
preload
```
登录后复制
是一种强制性的指令，浏览器会尽可能快地下载指定的资源。
```
prefetch
```
登录后复制
是一种提示性的指令，浏览器会根据自身的资源调度策略来决定是否下载指定的资源。
缓存:
```
preload
```
登录后复制
加载的资源会被存储在浏览器的缓存中，以便后续使用。
```
prefetch
```
登录后复制
加载的资源也会被存储在浏览器的缓存中，但可能会被浏览器更早地清除。

总的来说，

preload

登录后复制

适用于优化当前页面的加载速度，而

prefetch

登录后复制

适用于优化用户体验，减少用户在不同页面之间的切换时间。

一个简单的例子：

假设你有一个电商网站，用户在浏览商品列表页面时，可能会点击某个商品进入详情页面。你可以使用

preload

登录后复制

来加载商品列表页面需要的CSS文件和JavaScript文件，并使用

prefetch

登录后复制

来加载商品详情页面的HTML文档。

<!-- 商品列表页面 -->
<head>
  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="app.js" as="script">
  <link rel="prefetch" href="product.html" as="document">
</head>

登录后复制

这样，当用户点击某个商品进入详情页面时，浏览器可以直接从缓存中加载商品详情页面的HTML文档，而不需要重新下载。

以上就是HTML如何预加载资源？link rel="preload"的作用？的详细内容，更多请关注php中文网其它相关文章！