我们之前提及过link rel 里面有preload和prefetch、modulepreload,都是用于预加载资源

<link rel="preload" href="..." as="...">
<link rel="modulepreload" href="...">
<link rel="prefetch" href="...">

注意preload需要写上正确的as属性,才能正常工作喔(prefetch不需要)。

1. 但是preload和prefetch有什么区别呢?

我们翻看w3c的preload规范,里面有提及:

大致意思就是:

  preload是用于预加载当前页的资源,浏览器会优先加载它们

  prefetch是用于预加载后续导航使用的资源,浏览器也会加载它们,但优先级不高

补充:

值得注意的是preload的as如果是video,现在浏览器还是没有支持,可以改用as=“fetch”替代 或者 video本身的preload="auto"属性代替

<!-- video的preload -->
<video src="..." controls="controls" preload="auto"></video> <!-- link的preload,as不要写video,因为浏览器还没有支持 -->
<link rel="preload" as="fetch" href="...">
<video src="..." controls="controls"></video>

2. modulepreload和preload

既然有了preload,为什么还有新增一个modulepreload呢?

我们看到developers.google.com有一篇文章专门介绍modulepreload,里面有一段专门的解释:

大概意思是说,使用link preload来预加载JavaScript Module会有2个问题:

1. 预加载如果是跨域并需要开启credentials模式(跨域带cookies),会遇到一些麻烦(具体什么麻烦,没太看懂

html预加载之link标签的更多相关文章

  1. HTML5的页面资源预加载技术(Link prefetch)加速页面加载

    不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...

  2. js原生图片懒加载 或 js原生图片预加载,html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

  3. HTML5 预加载

    原文地址: HTML5 Link Prefetching 原文日期: 2010年07月07日 翻译日期: 2013年08月13日 浏览器厂商和开发者之间共同努力的一个方向就是让网站更快.现在已有很多广 ...

  4. 页面资源预加载(Link prefetch)功能加速你的页面加载速度

    有了浏览器缓存,为何还需要预加载? 用户可能是第一次访问网站,此时还无缓存 用户可能清空了缓存 缓存可能已经过期,资源将重新加载 用户访问的缓存文件可能不是最新的,需要重新加载 页面资源预加载/预读取 ...

  5. HTML5 prefetch即预加载

    原文地址 声明:此文带着自己的理解,不完全按原文翻译 prefetch 即预加载,在用户需要前我们就将所需的资源加载完毕. 有了浏览器缓存,为何还需要预加载? 用户可能是第一次访问网站,此时还无缓存 ...

  6. 发光加载环动画-纯CSS动画效果-如何创建CSS3旋转预加载器(参照https://www.bilibili.com/video/BV1V4411C7z5?from=search&seid=9741275927942612817)

    //css部分 body{ margin:; padding:; background: #262626; } .ring{ position: absolute; top:50%; left: 50 ...

  7. 使用link标签进行预加载

    概述 html中的link标签一般用来引入css文件.但是也可以通过rel属性来进行预加载.本文记录下相关方法,供以后开发时参考,相信对其他人也有用. 参考资料: mdn 通过rel="pr ...

  8. 通过link的preload进行内容预加载

    Preload 作为一个新的web标准,旨在提高性能和为web开发人员提供更细粒度的加载控制.Preload使开发者能够自定义资源的加载逻辑,且无需忍受基于脚本的资源加载器带来的性能损失. <l ...

  9. 使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度

    不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...

随机推荐

  1. Sparse PCA 稀疏主成分分析

    Sparse PCA 稀疏主成分分析 2016-12-06 16:58:38 qilin2016 阅读数 15677 文章标签: 统计学习算法 更多 分类专栏: Machine Learning   ...

  2. java 字符串处理的

    @Test public void testString(){ /*字符串处理 */ String email="123456789@qq.com"; System.out.pri ...

  3. 怎样理解window.name

    window.name表示当前窗口的名字, 而非网页的名字, 网页的名字需要使用: document.title; window.name一般是空的字符串, 他的作用其实是配合配合超链接和表单的tar ...

  4. hdu 5212 反向容斥或者莫比

    http://acm.hdu.edu.cn/showproblem.php?pid=5212 题意:忽略.. 题解:把题目转化为求每个gcd的贡献.(http://www.cnblogs.com/z1 ...

  5. JS OOP -01 面向对象的基础

    JS面向对象的基础: 1.用定义函数的方式定义类 2.用new操作符获得一个类的实例 3.使用 [ ] 引用对象的属性和方法 4.动态添加,修改,删除对象的属性和方法 5.使用 { } 语法创建无类型 ...

  6. PHP常见算法

    算法的概念:解决特定问题求解步骤的描述,在计算机中表现为指令的有限序列,并且每条指令表示一个或多个操作.一个问题可以有多种算法,每种算法都不同的效率.一个算法具有的特征:有穷,确切,输入,输出,可行 ...

  7. 内涵段子——脑筋急转弯——spider

    # python 3.7 from urllib.request import Request,urlopen import re,time class Neihan(object): def __i ...

  8. MySQL无法启动问题解决Warning: World-writable config file ‘/etc/my.cnf’ is ignored

    今天重启一台内网服务器,发现mysql无法正常重启,执行systemctl start mysql,报错如下 Starting LSB: start and stop MySQL... Dec 11 ...

  9. 用cef Python打造自己的浏览器

    背景 项目需要做一个客户端的壳,内置浏览器,访问指定 的url 采用技术 python3.5 cefpython https://github.com/cztomczak/cefpython#inst ...

  10. Nginx系列1.2:nginx-rtmp流媒体服务器添加权限认证(推流权限和播放权限)

    用到的工具:OBS Studio(推流).nginx-rtmp流媒体服务器.VLC(拉取流播放) Nginx系列1:ubuntu16.04编译出适合自己的nginx服务器 Nginx系列1.1:ubu ...