一、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(跨域资源共享)资源时是必需的。加载过程示例
下面是一个简单的示例,说明如何利用预加载提高页面性能:
span class="hljs-keyword">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
目标不同
提前加载当前页面需要的关键资源
提前加载将来可能需要的资源
优先级不同
高,资源优先加载并阻塞页面渲染
低,资源在空闲时间加载,不会阻塞页面渲染
用途不同
加载当前页面需要的资源(如样式、脚本、字体)