HTML的src和href的区别

两者分别是什么
href标识超文本引用，全称hypertext reference，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
src表示引用资源，全称source表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

不同点

1.请求资源不同

（1） href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。

（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；
2.作用结果不同

（1）href 用于在当前文档和引用资源之间确立联系；

（2）src 用于替换当前内容；
3.浏览器解析方式不同

（1）若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

（2）当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

link和import的区别

两者都是外部引用CSS的方式，但是存在一定的区别：

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

资料来源于：[href和src的区别] (https://juejin.cn/post/7022979704957173767)
部分来源于 W3C

href和src都是用来引用外部资源的属性。例如：网址、图片、视频、css文件、js文件等。

href（Hypertext Reference）超文本引用，用来建立当前元素和文档之间的连接。常用有link、a标签等。当它引用资源时，浏览器会将其识别为CSS文档，并行下载资源并且不会停止对当前文档的处理。

src（Source）会将指向的资源下载并引用到当前的文档中，常用标签有script、img、ifram等。它会替换掉当前的元素。当浏览器解析src时，会暂停其他资源的下载和处理，直接将该资源下载、编译、执行完毕。

 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”属性加载页面全部资源，迅速打开，兼容不好。