区别
1.加载时机不同
link 是 html 标签加载 dom 时会同步加载 link 标签的内容,@import引入的资源需要等 dom 加载完成之后加载
2.js的可操作性不同
link 标签可以通过 js 动态插入到文档中,@import不可以
基于link的性能优化
link rel 的属性值可以为preload、prefetch、dns-prefesh
preload
MDN官方说明
<link>
元素的rel
属性的属性值preload
能够让你在你的HTML页面中<head>
元素内部书写一些声明式的资源获取请求,可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源,你可能希望在页面加载的生命周期的早期阶段就开始获取,在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用,且更不易阻塞页面的初步渲染,进而提升性能。本文提供了一个如何有效使用preload
机制的基本说明。
翻译一下:告知浏览器当前页面某些资源需要优先加载,当页面使用到这些资源的时候可以达到更流畅的效果
e.g
<head>
<meta charset="utf-8">
<title>JS and CSS preload example</title>
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>bouncing balls</h1>
<canvas></canvas>
<script src="main.js"></script>
</body>
这里我们预先 style.css 和 main.js 当页面使用到他们的时候就可以立即可用
prefetch
MDN官方说明
关键字
prefetch
作为元素<link>
的属性rel
的值,是为了提示浏览器,用户未来的浏览有可能需要加载目标资源,所以浏览器有可能通过事先获取和缓存对应资源,优化用户体验。
翻译一下:告知浏览器其他页面有可能会用到某些资源,网络线程空闲时可以优先加载这些资源
e.g
pageA.html
<head>
<meta charset="utf-8">
<title>page A</title>
<link rel="prefetch" href="pageB/images/B.png">
</head>
<body>
<h1>page A</h1>
</body>
这里我们在 pageA 页面预先把 pageB 页面的 B.png 加载好,当用户跳转到B页面时就可以快速的显示 B.png
dns-prefetch
MDN官方说明
DNS-prefetch
(DNS 预获取) 是尝试在请求资源之前解析域名。这可能是后面要加载的文件,也可能是用户尝试打开的链接目标。
翻译一下:当浏览器需要到其他域名请求资源时,会先进行 DNS 解析,dns-prefetch就是预先把 DNS 解析做好,当请求这些第三方域名下的资源时,可以达到一个更快速的体验
e.g
<link rel="dns-prefetch" href="https://fonts.googleapis.com/">
这里我们请求了第三方域名下的字体文件,就可以优先把 DNS 解析做好。
总结一下
- preload 更关注当前页面的资源加载优先级,为当前显示的页面做优化
- prefetch 关注其他页面的资源加载,为未来用户可以进入的页面做显示优化
- dns-prefetch 关注跨域资源的请求,提前做好 DNS 解析