一、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

目标不同

提前加载当前页面需要的关键资源

提前加载将来可能需要的资源

优先级不同

高,资源优先加载并阻塞页面渲染

低,资源在空闲时间加载,不会阻塞页面渲染

用途不同

加载当前页面需要的资源(如样式、脚本、字体)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。