前端性能优化，prefetch与preload的区别是什么？

最新推荐文章于 2024-04-07 06:00:00 发布
最新推荐文章于 2024-04-07 06:00:00 发布
阅读量988 收藏
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45744454/article/details/124244179
版权

prefetch与preload的区别是什么？

<link rel="prefetch" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
  1. preload加载当前路由必须资源，优先级高。一般对于bundle spliting资源与Code spliting资源做preload
  2. prefetch优先级低，在浏览器idle状态时加载资源，一般用于加载其他路由资源，如当页面出现link,可prefetch当前link的路由资源。（next.js 默认会对 link 做懒加载+prefetch，即当某条 Link 出现页面中，即自动 prefetch 该 Link 指向的路由资源）
cassielstc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
让你页面速度飞起来 Web前端性能优化（视频教程+ppt）
11-16
### Web前端性能优化知识点 #### 一、构建优化 **1.1 文件压缩与合并** - **文件压缩**：利用工具如UglifyJS、Terser等对JavaScript、CSS等静态资源进行压缩，减少文件体积，从而加快加载速度。 - **文件合并**：...
webpack 预加载资源preload和prefetch
最新发布
qq_37550440的博客
06-06 1326
webpack 预加载资源 减少首屏绘制时长
详解HTML5中rel属性的prefetch预加载功能使用
张宇的博客
05-22 877
详解HTML5中rel属性的prefetch预加载功能使用 这次项目在使用 pdf.js 这个组件，导出pdf文件，不支持中文，加载一个字体库15M 在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了. 举个例子说明:比如要预先加载某个页面,可以这样: XML/HTML Code 但如果是google的话,要用另外的一个名称,即: XML/
rel=“prefetch”用法简单介绍
weixin_33941350的博客
03-01 1828
此属性可以给其链接的页面预加载一部分资源，可以使其打开速度提高。兼容性较好。 与此类似的rel=“prefetcher”属性加载页面全部资源，迅速打开，兼容不好。 原文发布时间为：2017-3-13本文作者：admin本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落原文链接：rel=“prefetch”用法简单介绍 ...
webpack 打包后 首页有很多 link 标签 ，ref=prefetch 和 ref=preload
xiao_yu_liu的博客
09-20 6174
如图：vue 项目 在 webpack 打包后的 index.html ，里面会出现很多 得 link 标签， 将你的所有打包好的文件都 预加载进来 但是你并不需要，需要通过 配置 webpack 来将其去掉 <link href=css/chunk-02316de6.d6a34d41.css rel=prefetch> <link href=css/chunk-1...
Prefetch
liangshanbo1215的博客
04-07 341
请求和加载预取的模块。当浏览器处于空闲状态并计算出它有足够的带宽时，它将发出请求以加载资源并缓存它。缓存资源可以显著减少加载时间，因为我们不必在用户单击按钮后等待请求完成。） 是一种浏览器优化，它允许我们在需要后续路由或页面之前获取可能需要的资源。它可以在 HTML 中以声明方式完成（例如在下面的示例中），通过 HTTP 头（在展示如何根据可见性或交互导入模块的示例中，我们看到在单击按钮以切换组件和在屏幕上显示实际组件之间经常存在一些延迟。在许多情况下，我们知道用户会在页面初始呈现后不久请求某些资源。
html prefetch的原理,HTML5中rel属性的prefetch预加载功能使用
weixin_31000553的博客
06-03 411
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是:利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了.举个例子说明:比如要预先加载某个页面,可以这样:XML/HTML Code复制内容到剪贴板但如果是google的话,要用另外的一个名称,即:XML/HTML Code复制内容到剪贴板即使在不支持...
WEB前端性能优化测试
06-28
在现代Web开发中，前端性能优化是至关重要的，它直接影响用户体验和网站的转化率。本文档将探讨如何提升WEB前端的性能，通过遵循一系列规则和使用专业的工具来达到最佳效果。我们将详细介绍YSLOW工具，这是一个非常...
web性能优化演示文档
09-15
Web 性能优化演示文档 Web 性能优化是一个非常重要的方面，它对网站的用户体验和商业收入都有着直接的影响。根据 Google 和亚马逊的研究，页面加载时间的增加会导致流量和销售额的损失。因此，网站优化的目标是减少...
前端之前沿优化解决方案
04-18
前端优化是一个持续的过程，涉及到多个方面的技术和策略。以下是一些前沿的前端优化解决方案的简介： 使用IconFont和SVG: IconFont 可以减少请求数量和体积，提供矢量图形，可伸缩不失真，并且可以通过CSS直接修改...
大型网站性能优化方案
12-29
在构建和运营大型网站的...总的来说，大型网站性能优化是一个系统工程，涉及前端、后端、网络等多个层面。通过科学的方法和持续的优化，我们可以让网站在提供丰富功能的同时，保持快速响应，带给用户流畅的浏览体验。
Web性能优化之preload、prefetch
Moon Star
04-11 1361
基本用法 在网络请求中，我们在使用到某些资源比如：图片，JS，CSS 等等，在执行之前总需要等待资源的下载，如果我们能做到预先加载资源，那在资源执行的时候就不必等待网络的开销，这时候就轮到 preload 大显身手的时候了。 preconnect 浏览器要建立一个连接，一般需要经过DNS查找，TCP三次握手和TLS协商（如果是https的话），这些过程都是需要相当的耗时的，所以preconnet，就是一项使浏览器能够预先建立一个连接，等真正需要加载资源的时候就能够直接请求了。 浏览器会进行以下步骤：
rel=“dns-prefetch“和rel=“preconnect“ 结合使用，以及link属性的详细介绍
sinat_38992528的博客
03-25 1278
配对这些提示的逻辑是因为对 dns-prefetch 的支持比对预连接的支持要好。如果不支持的浏览器遇到 dns-prefetch 提示（或任何其他资源提示），则网站不会中断，只是不会获得它提供的好处。虽然 DNS 缓存可以帮助减少此延迟，但 DNS 解析可能会给请求增加明显的延迟。对于打开了与许多第三方的连接的网站，此延迟可能会大大降低加载性能。域上的 DNS 查找有效，因此请避免使用它来指向你的站点或域。这是因为，到浏览器看到提示时，你的站点背后的 IP 已经被解析了。则是建立与服务器的连接。
webpack加载css与js使用link进行优化
qq_43505774的博客
12-18 678
作为元素link 的属性 rel 的值 preload 是告诉浏览器首页页面必定需要的资源，浏览器一定会加载这些资源 prefetch 是告诉浏览器其他页面可能需要的资源，浏览器不一定会加载这些资源 在VUE SSR生成的页面中，首页的资源均使用preload，而路由对应的资源，则使用prefetch prefetch 用了就会去加载 使用as作为告诉浏览器文件加载方式 as=“style" as=“script” <link rel="preload" href="./1 (2).js" as="s
rel=preload进行内容预加载
weixin_42011096的博客
06-15 2545
背景 <link>元素的rel属性的属性值preload能够让你在你的HTML页面中<head>元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。相关文档 一般情况下<link>用来记载css文件 <link rel...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值