src 与 href 及 link 与 @import 的区别

src和href区别：

1）请求资源类型不同

href 属性设置外部资源的路径，指定被链接资源的URL。 URL 可以是绝对的，也可以是相对的。 应用场景： link 、a ；

src 属性指定了包含请求的资源，在请求 src 资源时会将其指向的资源下载并应用到文档中。 应用场景：img、iframe、js；

2）作用结果不同

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

src 用于替换当前内容；

3）浏览器解析方式不同

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

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

link和@import的区别：

link标签和@import导入css文件是不同的，两者都是外部引用 CSS 的方式，但是存在一定的区别：

（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS；

（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载；

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

（4）link支持使用js控制DOM改变样式；而@import不支持。

参考资料：https://blog.csdn.net/lhjuejiang/article/details/80795081