• 作者:老汪软件技巧
  • 发表时间: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

目标不同

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

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

优先级不同

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

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

用途不同

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