重学 html の link标签

link元素规定了外部资源与当前文档的关系。常用于链接样式表，创建网站图标，预加载资源等。

链接样式表 

创建站点图标

预加载

用于前端界面性能优化，rel 的属性值可以为preload、prefetch、dns-prefetch。

prefetch 预获取

用户在使用当前界面时，浏览器空闲时先把下个界面要使用的资源下载到本地缓存。浏览器下不下载不可知。
举个例子： 网站有A，B 两个界面。当用户访问界面 A 时有很大的概率会访问 B 界面（比如登录跳转）那么我们可以在用户访问界面 A 的时候，提前将 B 界面需要的某些资源下载到本地，性能会得到很大的提升。那么我们只需要在界面 A.html 文件中设置如下代码：

preload 

控制当前界面的资源下载优先级，浏览器必须下载资源。
举个例子： 网站的一个界面 A的 css 样式文件中使用了外部字体文件，正常情况下该字体的下载是在 css 解析的时候完成的。想想字体文件好像在 css 样式文件解析之前下载到本地比较好。那么我们就可以在head标签设置字体的 preload。

dns-prefetch

按照字面理解即可，先把要跳转的域名解析，减少时间。

prefetch & preload 对比

• 关注的页面不同： prefetch 关注要使用的页面，preload 关注当前页面
• 资源是否下载：prefetch 的资源下载情况未知（只在浏览器空闲时会下载），preload 肯定下载

media 属性

media 属性规定被链接文档将显示在什么设备上。

注意： 当界面加载时，两个样式表都会下载到客户端，只是会根据场景不同使用不同的样式。

TODO

script 标签的 async 和 defer 属性的区别和目的？

引用

preload & prefetch
一步前端