link与@import的区别,基于link的性能优化

1,461 阅读2分钟

区别

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 解析做好。
总结一下

  1. preload 更关注当前页面的资源加载优先级,为当前显示的页面做优化
  2. prefetch 关注其他页面的资源加载,为未来用户可以进入的页面做显示优化
  3. dns-prefetch 关注跨域资源的请求,提前做好 DNS 解析