目录一、前言二、preload2-1.定义:2-2.好处:2-3注意:2-4.特殊用法三、prefetch3-1.定义:3-2.实例:四、preload 和 prefetch 的区别
在使用@Vue/cli工具构建的项目,打包上线之后,一般都能看到<link rel="preload">和<link rel="prefetch">这样的标签,对于preload与prefetch的作用和区别一直以来都不是太了解,所以文本就详细介绍一下。
想要了解preload与prefetch的作用和区别,就不得不先熟悉浏览器加载资源的优先级。
如图:
<link rel="preload" href="https://tiven.cn/js/test.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" as="javascript" onload="preloadHandle()">
<link rel="preload" href="demo.css" rel="external nofollow" onload="this.rel=stylesheet">
<link rel="preload" as="style" crossorigin href="Https://test.com/css/test.css" rel="external nofollow" >
<link rel="preload" href="https://tiven.cn/img/bg.png" rel="external nofollow" as="image" media="(max-width: 640px)">
<link>元素的 rel 属性的属性值prefetch能够让你在你的HTML页面中<head>元素内部书写一些声明式的资源获取请求,告诉浏览器加载下一页面可能会用到的资源,注意是下一页面,而不是当前页面。因此该方法的加载优先级非常低,也就是说该方式的作用是加速下一个页面的加载速度。
<link rel="prefetch" href="./js/01.js" rel="external nofollow" >
<link rel="prefetch" href="./js/02.js" rel="external nofollow" >
注意: 使用 preload 和 prefetch 的逻辑可能不是写到一起,但一旦发生对用一资源 preload 或 prefetch 的话,会带来双倍的网络请求。
<link rel="preload" href="https://tiven.cn/js/test.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" as="javascript">
<link rel="prefetch" href="https://tiven.cn/js/test.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" as="javascript">
以上就是preload对比prefetch的使用区别详解的详细内容,更多关于preload对比prefetch区别的资料请关注编程网其它相关文章!
--结束END--
本文标题: preload对比prefetch的功能区别详解
本文链接: https://www.lsjlt.com/news/153109.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0