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

2. 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”