href和src的区别?

href：
　　href是HypertextReference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
　　浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。
　　这也是建议使用link，而不采用@import加载css的原因。
　　
src：
　　src是source的缩写，src的内容是页面必不可少的一部分，是引入。
　　src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。
　　当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。【阻塞程序】
　　这也是将js脚本放在底部而不是头部得原因。

补充link的特殊用法

1、通过 rel=“preload” 进行内容预加载

<link rel="preload" href="styles/index.css" as="style">
<link rel="preload" href="main.js" as="script" />

好处

元素的 rel 属性的属性值 preload 能够让你在你的 HTML 页面中 元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。

link中使用as的好处

1、更精确地优化资源加载优先级。
2、匹配未来的加载需求，在适当的情况下，重复利用同一资源。
3、为资源应用正确的内容安全策略。
4、为资源设置正确的 Accept 请求头。

参考 https://www.jianshu.com/p/d293a4330246

2、rel=“prefetch”

<link rel="prefetch" href="/assets/js/10.0437ec43.js">

此属性可以给其链接的页面预加载一部分资源，可以使其打开速度提高。兼容性较好。
与此类似的rel=“prefetcher”属性加载页面全部资源，迅速打开，兼容不好。