preload和prefetch

最新推荐文章于 2024-06-06 17:11:37 发布
最新推荐文章于 2024-06-06 17:11:37 发布
阅读量309 收藏 1
点赞数
文章标签： webpack 开发工具 ViewUI
原文链接：https://juejin.im/post/5bfa04bbe51d454f5b1f90e4
版权

参考资料：

preload

<link>元素的 rel 属性的属性值preload能够让你在你的HTML页面中<head>元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。

试想我们网站使用了一种特殊字体，我们在css里面定义了字体的url。那么直到浏览器开始解析CSS了才会识别出来需要加载这个资源。

如果我们提前让浏览器下载好这个资源呢？那么执行CSS的时候就可以直接用了。就像这样：

<link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
复制代码

如上所示，我们使用这样的语法：

  1. rel="preolad"声明这是一个preload
  2. href指明资源的位置
  3. as指明资源类型（这是为了让浏览器精确设置优先级，设置正确的CSP、Accept头部）
  4. crossorigin 指明使用的跨域设置

preload和onload事件

添加preload声明之后，浏览器初次加载的资源变多了，但preload并不会阻塞onload事件的触发。

preload is a declarative fetch, allowing you to force the browser to make a request for a resource without blocking the document’s onload event. preload是声明式获取，促使浏览器请求资源但不阻塞document的onload事件。

响应式预加载

link标签还可以接收一个media属性，进行简单的媒体查询。例如这样：

<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
复制代码

prefetch

Prefetch is a hint to the browser that a resource might be needed, but delegates deciding whether and when loading it is a good idea or not to the browser. prefetch是对浏览器的暗示，暗示将来可能需要某些资源，但由代理决定是否加载以及什么时候加载这些资源。

场景：用户正在登陆页面，登陆成功之后会跳转到首页。我是否可以在登陆页面就去请求首页的资源呢？

<link rel="prefetch" href="main.js">

复制代码

prefetch跟preload不同在于，用户从A页面进入B页面，preload的会失效，而prefetch的内容可以在B页面使用。

preload VS prefetch

So，什么时候用preload什么时候用prefetch?

preloadPrefetch
语法<link rel="preload" href="bg-image-narrow.png"><link rel="prefetch" href="bg-image-narrow.png" />
适用场景本页面接下来大概率要使用的资源下个页面的资源。下个页面很可能会去访问
浏览器支持情况一般较高
加载时间立即加载（一般而言，跟as有关）浏览器闲置的时候才会加载（一般而言）

浏览器支持如何？

prefetch

可以看到除了safari和Opera Mini，其他浏览器都有较好地支持（全球80.12%，中国66.57%）。

preload

preload支持情况不如prefetch，但已经值得我们使用。

webpack中的应用

webpack 4.6.0+支持prefetch和preload。

使用preload:

import(/* webpackPreload: true */ 'ChartingLibrary');
复制代码

使用prefetch

import(/* webpackPrefetch: true */ 'LoginModal');
复制代码

下面是webpack官方文档对这两种用法的总结：

  • A preloaded chunk starts loading in parallel to the parent chunk. A prefetched chunk starts after the parent chunk finish.
  • A preloaded chunk has medium priority and instantly downloaded. A prefetched chunk is downloaded in browser idle time.
  • A preloaded chunk should be instantly requested by the parent chunk. A prefetched chunk can be used anytime in the future.
  • Browser support is different.
weixin_34109408
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
prefetch 和preload_Prefetch&Preload预加载方案总结
weixin_29407885的博客
12-24 860
为了提高网页首次加载响应速度，对移动端预加载方案进行调研整理。方案大体分为三类：浏览器机制 - prefetch & preload；webpack魔法注释 - 通过魔法注释可以直接通过 webpack 实现 prefetch & preload；应用框架工具库 - 因为我们是 react 技术栈故选择 react-loadable；prefetch是一种浏览器机制，其利用浏览器空...
prefetch 和preload_资源预加载preload和资源预读取prefetch简明学习
weixin_39834205的博客
12-24 148
前面的话基于VUE的前端小站改造成SSR服务器端渲染后，HTML文档会自动使用preload和prefetch来预加载所需资源，本文将详细介绍preload和prefetch的使用资源优先级在介绍preload和prefetch之前，首先要介绍浏览器的资源优先级在Chrome浏览器中，不同的资源在浏览器渲染的不同阶段进行加载的优先级不同一共分成五个级别Highest 最高Hight 高Medium...
prefetch 和preload_preload和prefetch
weixin_29214715的博客
12-24 1621
1、 preload和prefetch的出现为我们提供了可以更加细粒度地控制浏览器加载资源的方法2、preload：link标签的preload是一种声明式的资源获取请求方式，用于提前加载一些需要的依赖，并且不会影响页面的onload事件；使用方式如下： // css加载后立即生效其中，rel属性值为preload；as属性用于规定资源的类型，并根据资源类型设置Accep请求头，以便能够使用正常...
prefetch 和preload_使用 Preload/Prefetch 优化你的应用
weixin_32869031的博客
12-24 1524
衡量网站的性能的指标有很多，其中有项重要的指标就是网站的首屏时间，为此前端工程师们都是绞尽脑汁想尽办法进行优化自己的应用，诸如像服务端渲染，懒加载，CDN 加速，ServiceWorker 等等方法，今天介绍的 preload/prefetch 是一种简单，但却事半功倍的优化手段。基本用法在网络请求中，我们在使用到某些资源比如：图片，JS，CSS 等等，在执行之前总需要等待资源的下载，如果我们能做...
webpack 预加载资源preload和prefetch
最新发布
qq_37550440的博客
06-06 1326
webpack 预加载资源 减少首屏绘制时长
preload与prefetch对比
热门推荐
落枫秋歌
03-12 1万+
前言 在preload和prefetch之前，我们一般根据编码需求通过link或者script标签引入页面渲染和交互所依赖的js和css等；然后这些资源由浏览器决定优先级进行加载、解析、渲染等。 然而，有些情况我们需要某些依赖在浏览器进入渲染的主进程之前就希望被加载，但是实际资源加载的状况并不受我们控制，而是根据浏览器内部决定资源的优先级等状况进行加载的。即使我们将需要的资源按照希望的那样放在期望...
preload 和 prefetch 区别
我的博客简介
02-20 707
的方式引入资源，告诉浏览器哪些资源是未来页面可能会使用到的，可以在浏览器空闲时提前加载这些资源，以减少未来页面加载时的延迟。prefetch 适用于未来可能会被访问到的资源，可以在一定程度上提高用户的后续页面加载速度。总的来说，preload 是针对当前页面的关键资源进行提前加载的，而 prefetch 则是针对未来可能会被访问到的资源提前加载。的方式引入资源，告诉浏览器哪些资源是页面加载过程中需要优先加载的。preload 适用于当前页面需要的资源，可以帮助加快关键资源的加载速度，提高首屏渲染性能。
prefetch 和preload_preload_prefetch
weixin_30486717的博客
12-24 212
浏览器资源优先级image.png不同的资源在浏览器渲染的不同阶段进行加载的优先级不同, 一共分成五个级别Highest 最高Hight 高Medium 中等Low 低Lowest 最低其中主资源HTML和CSS的优先级最高，其他资源根据情况的不同优先级不一JS脚本根据它们在文件中的位置是否异步、延迟或阻塞获得不同的优先级：1、网络在第一个图片资源之前阻塞的脚本在网络优先级中是中级2、网络在第一个...
laravel-mix-preload：根据您的Mix清单添加预加载和预取链接
02-03
声明应该预加载或预取的内容很简单，只需确保preload或prefetch是块名称的一部分即可。 如果这是您的混合清单： { " /js/app.js " : " /js/app.js " , " /css/app.css " : " /css/app.css " , " /css/prefetch...
prefetch-image:为您的网络应用预取所有图片，尤其是 mobileh5 推广页面
08-04
npm install prefetch-image --save或yarn add prefetch-image const prefetchImages = require ( 'prefetch-image' ) ; //or //import prefetchImages from 'prefetch-image'; const images = [ '/1.png' , '/2...
preload-webpack-plugin：请改用https：github.comvuejspreload-webpack-plugin
02-18
preload-webpack-plugin 弃用：该项目的分支可以代替使用。 一个Webpack插件，用于使用<link rel='preload'>自动连接异步（和其他类型）JavaScript块。 这有助于延迟加载。 注意：这是的扩展插件，该插件可...
使用preload预加载页面资源时注意事项
11-21
`preload` 是一种现代网页优化技术，用于提前加载页面中关键资源，以便在需要时能够更快地执行。...在实际应用中，结合其他优化技术如 `async`、`defer` 和 `prefetch`，可以构建更加高效的网页加载方案。
preload_cache.js:预加载缓存
05-16
HTML5提供了多种方式来控制资源的加载，除了`<link rel="preload">`外，还有`<link rel="prefetch">`和`<link rel="prerender">`等。它们之间的区别在于： - **预加载（preload）**：主要用于即时需要的资源，比如...
qwebkit 网页无法加载图片_打开网页速度慢的原因和解决方法
weixin_39969143的博客
12-05 271
1、原因一：加载资源过多，http请求太多，占用服务器资源越多，时间越久，支持不了并发量，服务器承受不了太多请求，开始丢弃部分数据，网页无法打开，报错404解决：减少http请求次数2、原因二：接收数据时间过长，如下载资源过大解决：对HTTP传输进行压缩，即在js，css、图片等资源已经压缩的基础上，在HTTP传输过程中的再次压缩。客户端可以通过Accept-Encoding头来声明浏览器支持的压...
学会preload和prefetch
10-01 1908
-- 新增 -->
Preload与Prefetch的区别以及webpack项目中如何优化
周陆军的博客，分享it技术。
04-13 1170
preload 与prefetch 的区别 preload是一个声明式 fetch，可以强制浏览器在不阻塞 document 的 onload 事件的情况下请求资源。 preload 顾名思义就是一种预加载的方式，它通过声明向浏览器声明一个需要提交加载的资源，当资源真正被使用的时候立即执行，就无需等待网络的消耗。 prefetch告诉浏览器这个资源将来可能需要，但是什么时间加载这个资源是由浏览器来决定的。 若能预测到用户的行为，比如懒加载，点击到其它页面等则相当于提前预加载了需要..
使用 Preload&Prefetch 优化前端页面的资源加载
包磊磊的博客
11-13 1950
对于前端页面来说，静态资源的加载对页面性能起着至关重要的作用。本文将介绍浏览器提供的两个资源指令-preload/prefetch，它们能够辅助浏览器优化资源加载的顺序和时机，提升页面性能。 一、从一个实例开始 如上图所示，我们开发了一个简单的收银台，支付过程中可以展开优惠券列表选择相应的券。从动图可以看到，列表第一次展开时，优惠券背景有一个逐渐显示的过程，体验上不是很好。 问题的原因也很明显，由于背景使用了视觉特意设计的图片，优惠券列表展开时需要去加载图片，背景渐显的过程实际上就是图片加载的过程
预加载属性 preload 与 prefetch 区别
weixin_41571491的博客
02-13 2631
原文链接：https://waynegong.cn/posts/40528.htmlTLDR: preload 告诉浏览器立即加载资源; prefetch 告诉浏览器在空闲时才开始加载资源； preload、prefetch 仅仅是加载资源，并不会“执行”; preload、prefetch 均能设置、命中缓存； 正确使用 preload、prefetch 不会导致重复请求； 测试 Demowaynegongcn/preload-prefetch 优先级修改 index.html 为如下内容：...
webpack系统学习（六）打包分析，Preload和Prefetch
Niall_Tonshall的博客
02-14 3224
1. 打包分析 我们需要在使用webpack的时候添加一些配置： webpack --profile --json > stats.json 这个配置会在打包完成之后生成一个stats.json文件，这个文件中就包含了一些打包过程和打包结果的很多信息，我们可以借助下面的几个网站来上传该文件并分析： http://webpack.github.com/analyse/； http://alexkuz.github.io/webpack-chart/； 这里我推荐使用Webpack Bundle Ana
css preload
05-23
CSS Preload 的实现方式有两种：Link Prefetch 和 Link Preload。其中，Link Prefetch 是通过预加载来实现，而 Link Preload 则是通过预解析来实现。Link Prefetch 适用于那些资源消耗较小、对页面影响较小的情况，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值