- 作者:老汪软件技巧
- 发表时间:2024-12-09 11:07
- 浏览量:
一、Preload 是什么?
是 HTML 中的一种资源预加载机制,它允许浏览器在解析页面时预先加载特定的资源(如样式表、脚本、图像等),以提高页面加载性能。
二、Preload 的原理
为了详细分析 preload 的加载原理,我们首先需要理解浏览器渲染网页的基本原理和过程。这个过程可以分为以下几个主要阶段:
简化流程图
在这个简化的流程图中,preload 资源的加载发生在 解析HTML 的阶段,并优先于构建DOM树和CSSOM树的过程。通过提前加载这些关键资源,preload 帮助浏览器更高效地完成页面渲染。
预加载的原理流程分析
在 HTML 中声明: 当你在 HTML 中使用 标签并指定资源的类型和地址时,浏览器会意识到这个资源是需要优先加载的。
触发时机:preload 标签会在浏览器解析 HTML 文件时就开始加载资源,即在 HTML 解析的过程中就会被识别和触发。
加载优先级:preload 提供的资源加载优先级高于普通的外部资源加载(例如常规的 JS 或 CSS 文件)。它会在浏览器的资源加载队列中占据优先位置。
提高性能:通过 preload 提前加载当前页面关键的资源(如 CSS、JS、字体等),在构建渲染树时,这些资源已准备就绪,可以减少后续请求中的延迟,从而避免页面渲染的阻塞,提高页面加载的效率。
三、使用
的基本用法如下:
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="app.js" as="script">
<link rel="preload" href="image.jpg" as="image">
主要属性:
总共有3种,分别为href、as和crossorigin,它们对应的功能说明分别如下:
crossorigin: 这个比较少见,经常用在内嵌的iframe或微前端中,用于指定跨域请求的凭证(如 anonymous 或 use-credentials)。这在涉及 CORS(跨域资源共享)资源时是必需的。加载过程示例
下面是一个简单的示例,说明如何利用预加载提高页面性能:
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preload Exampletitle>
<link rel="preload" href="styles.css" as="style">
<link rel="stylesheet" href="styles.css">
<link rel="preload" href="main.js" as="script">
head>
<body>
<h1>Hello, World!h1>
<script src="main.js">script>
body>
html>
四、预加载与其他加载策略的比较Preload vs Prefetch:
这也是面试题常见的问题,相信大家在八股文中也经常碰到。preload 和 prefetch 都是 HTML 中用于优化资源加载的技术,但它们的用途和时机有所不同。具体区别如下:
特性preloadprefetch
目标不同
提前加载当前页面需要的关键资源
提前加载将来可能需要的资源
优先级不同
高,资源优先加载并阻塞页面渲染
低,资源在空闲时间加载,不会阻塞页面渲染
用途不同
加载当前页面需要的资源(如样式、脚本、字体)