preload、prefetch、defer的介绍

于 2024-07-17 12:33:45 发布
阅读量346 收藏 6
点赞数 4
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feixin369/article/details/140491646
版权

preload

preload 是 <link> 标签 rel 属性的属性值，同时需要配合 as 属性使用。

as 指定将要预加载的内容的类型，使得浏览器能够：

  1. 更精确地优化资源加载优先级。
  2. 匹配未来的加载需求，在适当的情况下，重复利用同一资源。
  3. 为资源应用正确的内容安全策略。
  4. 为资源设置正确的 Accept 请求头。

看一下这个示例：

<link rel="preload" href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" as="script">

这种做法将把 <link> 标签塞入一个预加载器中。

这个预加载器在不阻塞页面 onload 事件的情况下，去加载资源。

我们可以通过以下两个示例来作一个对比：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.time('load')
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/2.1.10/chart/bar.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<script>
window.onload = () => {
    console.timeEnd('load') // load: 1449.759033203125ms
}
</script>
</body>
</html>

上面这个示例从加载到触发 onload 事件需要大概 1400 ms 的时间。再看一下使用 preload 预加载的时间：

<link rel="preload" href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" as="script">
<link rel="preload" href="https://cdn.bootcdn.net/ajax/libs/echarts/2.1.10/chart/bar.js" as="script">
<link rel="preload" href="https://unpkg.com/element-ui/lib/index.js" as="script">
<link rel="preload" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" as="style">

window.onload = () => {
    console.timeEnd('load') // load: 10.8818359375ms
}

用 preload 来加载资源，只需要 10 ms 就触发了 onload 事件。

说明同样是下载文件，使用 preload 不会阻塞 onload 事件。

#prefetch

prefetch 和 preload 不同，使用 prefetch 属性指定的资源将在浏览器空闲时间下下载。

在资源的请求头如果发现有下面这个属性，就代表它是通过 prefetch 加载的：

purpose: prefetch

另外，空闲时间是如何确定、如何获取的，目前还没有相关 API。

#preload 和 defer 的区别

preload 和 defer 的相同点是异步下载。那它们的不同点是什么呢？

preload 下载的资源只有在遇到同样的 script 标签时，才会执行对应的脚本。例如下面预加载的 vue.js：

<link rel="preload" as="script" href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">

只有在遇到下面的标签时，才会执行加载的 vue.js：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

defer 则是异步下载资源，在所有元素解析完成后，触发 DOMContentLoaded 事件前执行。

weifont
关注
javascript常见100问|知识广度|defer 和 async，preload prefetch dns-prefetch，前端攻击，xss,csrf,ddos，sql注入，csp
VAN
04-03 788
/ 的 defer 和 async 属性有何区别。
dns-prefetch、preconnect、prefetch、prerender、preload和async、defer
01-05 415
1、页面解析的大致流程 浏览器自上而下读取html文档（此过程叫html parser），当发现css文件时，浏览器parser停下来去下载解析css，等css下载并解析完毕，浏览器继续parser。紧接着发现js， 于是parser又停了，浏览器下载并执行完js，继续parser。此时屏幕上还什么都没有。然后解析body内的标签。如果又发现js，浏览器又停下parser，下载并执行完js继续parser，直到页面渲染完毕。 我们假设js中只有一行代码console.log('header')， 但服务
preload.js图片预加载插件
06-17
图片预加载插件。包含有序加载和无序加载两种。具体使用方法，参考https://blog.csdn.net/yang1393214887/article/details/92582715
【JavaScript 基础】-- JS 加载引入方式（defer、async、prefetch、preload）
野生松
03-08 3745
JavaScript是个单线程语言，渲染引擎和JS引擎不是同时进行的。所以提前引入js文件可能会造成堵塞，从而影响页面加载，出现闪屏等情况。于是为了解决这种情况，就出现了js在body最后引入、script标签中defer和async异步加载JS的方式。 defer：如果script标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染。如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script。defer脚本会在文档渲染完毕后，DOMContentLoade
【第1159期】CSS预加载Preload
前端早读课
01-05 4745
前言看天气预报，今天好多地方都开始下雪了。今日早读文章由@李斌分享。正文从这开始～Preload 作为一个新的web标准，旨在提高性能和为web开发人员提供更细粒度的加载控制。Preload使开发者能够自定义资源的加载逻辑，且无需忍受基于脚本的资源加载器带来的性能损失。在 HTML 代码中，它看上去大概是下面这样的一段声明式获取指令(declaratiev fetch directive)。 re
async, defer 以及 preload
ado64978的博客
10-09 455
Js脚本会改变DOM，在执行完脚本后HTML才会重新开始解析。CSS 可能会阻塞解析，取决于外部样式表和脚本在文档中的顺序。如果在文档中外部样式表放置在脚本之前，DOM 对象和 CSSOM 对象的构建可以互相干扰。 当解析器获取到一个 script 标签，DOM 将无法继续构建直到 JavaScript 执行完毕，而 JavaScript 在 CSS 下载完，解析完，并且 CSSOM 可...
用 preload 预加载页面资源
zz_jesse的博客
10-01 1598
本文已收藏至公众号《好文推荐》作者：felixhttps://github.com/ProtoTeam/blog/blob/master/201802/1.md本文主要...
前端优化 - 资源预加载技术(Prefetch, Preload, DNS-Prefetch，defer和async)
Daioo 随笔
01-22 1641
前端优化 - 资源预加载技术(Prefetch, Preload, DNS-Prefetch，defer和async) 当提到前端性能优化时，我们首先会联想到文件的合并、压缩，文件缓存和开启服务器端的 gzip 压缩等，这使得页面加载更快，用户可以尽快使用我们的 Web 应用来达到他们的目标。资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。引用 Patrick Hamann 的解释： >预加载是浏览器对将来可能被使用资源的一种暗示，一些资源可以在当前页面
06-defer和async.md
03-31
面试官可能通过具体问题来考察面试者是否了解现代浏览器的页面加载优化策略，包括但不限于`defer`、`async`、`preload`、`prefetch`、`dns-prefetch`和`preconnect`。 除了这些知识点，文档还强调了现代前端工程师...
使用preload预加载页面资源时注意事项
11-21
`preload` 是一种现代网页优化技术，用于提前加载页面中关键资源，以便在需要时能够更快地执行。...在实际应用中，结合其他优化技术如 `async`、`defer` 和 `prefetch`，可以构建更加高效的网页加载方案。
Preload基础使用方法详解
10-15
preload 顾名思义就是一种预加载的方式，它通过声明向浏览器声明一个需要提交加载的资源，当资源真正被使用的时候立即执行，就无需等待网络的消耗
【译】更快地构建 DOM: 使用预解析, async, defer 以及 preload
chiyitu7904的博客
09-20 217
译者：Mactavish 博主本人 链接：http://www.zcfy.cc/article/4224 原文：https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-de...
资源提示关键词（defer 、async、preload、prefetch）
俊刚的博客
01-12 1611
当浏览器解析HTML文档时，如果遇到一个普通的脚本标签（不带async或defer属性），浏览器会立即下载并执行该脚本，同时阻塞HTML解析过程。这意味着，如果脚本文件较大或者网络连接较慢，页面加载速度会受到影响。
前端资源文件加载失败_前端性能优化：preload 预加载页面资源
weixin_39923623的博客
11-22 812
网上看到一篇来自蚂蚁金服数据体验团队的文章，觉得不错，分享给大伙：https://juejin.im/post/5a7fb09bf265da4e8e785c38本文主要介绍preload的使用，以及与prefetch的区别。然后会聊聊浏览器的加载优先级。preload 提供了一种声明式的命令，让浏览器提前加载指定资源(加载后并不执行)，在需要执行的时候再执行。提供的好处主要是将加载和执行分离开，可...
使用 Preload&Prefetch 优化前端页面的资源加载
vivo互联网技术
11-11 7397
对于前端页面来说，静态资源的加载对页面性能起着至关重要的作用。本文将介绍浏览器提供的两个资源指令-preload/prefetch，它们能够辅助浏览器优化资源加载的顺序和时机，提升页面性能。 一、从一个实例开始 如上图所示，我们开发了一个简单的收银台，支付过程中可以展开优惠券列表选择相应的券。从动图可以看到，列表第一次展开时，优惠券背景有一个逐渐显示的过程，体验上不是很好。 问题的原因也很明显，由于背景使用了视觉特意设计的图片，优惠券列表展开时需要去加载图片，背景渐显的过程实际上就是图片加载的过程
link 标签和 script 标签中 dns-prefetch、prefetch、preload、defer、async 字段有什么区别？
guoqkmiss的博客
05-14 1658
标签中 dns-prefetch、prefetch、preload、defer、async 的区别 1、dns-prefetch 域名转化为 ip 是一个比较耗时的过程，dns-prefetch 能让浏览器空闲的时候帮你做这件事。尤其大型网站会使用多域名，这时候更加需要 dns 预取。 <link rel="dns-prefetch" href="//m.baidu.com"> 2、prefetch prefetch 一般用来预加载可能使用的资源，一般是对用户行为的一种判断，浏览器会在空闲的时
webpack 预加载资源preload和prefetch
最新发布
qq_37550440的博客
06-06 1643
webpack 预加载资源 减少首屏绘制时长
前端 prefetch 和 preload 的区别？
liangshanbo1215的博客
04-01 957
总体而言，prefetch 和 preload 都可以帮助优化页面的加载性能。prefetch 用于获取非关键资源，而 preload 用于获取关键资源。选择使用哪种提示取决于资源的重要性以及是否需要在页面加载时立即使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weifont

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值