link小结(js的预加载方式)

link 元标签 学习小结 分享给大家

  1. rel 预处理类link
    预处理类link标签就是允许我们控制浏览器,提前针对一些资源去做这些操作,以提高性能
    列举link类型:
  • dns-prefetch 型link提前对一个域名做dns查询,这样的link里面的href实际上只有域名有意义
<link rel="dns-prefetch" href=""带dns的域名"">
 下边的用法基本都是这样就不一一举例了
  • preconnect型link 提前对一个服务器建立tcp链接
  • prefetch型link提前取href指定的url的内容
  • preload型link提前渲染href指定的url
  • prerendner 型link提前渲染href 指定的url
  1. relmodulepreload 型的link
    modulepreload 型的link作用预先加载一个js模块 .这可以保证js模块不必等到执行时才加载(只加载不运行 存储在内存中)
<link rel="modulepreload " href="main.js">
<link rel="modulepreload " href="main-need1.js">
<link rel="modulepreload " href="main-need2.js">
<link rel="modulepreload " href="main-need3.js">
//  等价于
<script type="module" src="main.js">

我们假设main.js中有 import main-need1.js main-need2.js main-need3.js 虽然直接引入 main.js 也能直接实现 但是我们使用link 预先加载这三个文件,可以提高浏览器工作效率.
3. rel stylesheet 型link
这个最常用 但是必须注意 这类link type假如有的话 必须是 “text/css”

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值