href和src的区别

关于href和src一直都有用，可是一直都是惯性思维，在遇到link和a时就用href，在遇到img和script时就用src，一直都不知道为什么，以及两者有什么区别。今天就来简单的总结下：

---

（1）href用在link和a等标签上，src用在img和script等标签上；
（2）两者在使用时的差异

• href是引用和页面关联，是在当前元素和引用资源之间建立联系，比如点击a标签时，页面会跳转到href所指定的路径的页面；

• src表示引用资源，表示要引用的资源会替换当前元素，所要引用的内容是页面上要加载显示的，比如img标签会显示src里引用的图片资源；

（3）两者在性能上的差异

• 当浏览器解析到src时会暂停其他资源的下载和对页面的加载，直至将资源加载，编译，执行完毕才会下载其他资源加载页面，所以在优化网页时，建议将js文件放在页面的最底部；

• 当浏览器解析文档遇到href时，会下载href所引用的文件，但是不会停止对当前文档的处理，所以为了使页面更快的出现在用户的面前，不建议使用@import来导入CSS文件，而是使用href来导入CSS文件。

---

上面有提到link和@import，下面补充说明下link和@import的区别：

（1）link是html标签，可以定义自己的属性，可以进行DOM操作，而且没有兼容性的问题，而@import是CSS的内容，不能进行DOM操作，是在CSS2.1提出的，低版本的浏览器可能不支持；

（2）link引入CSS样式时和页面的加载同时执行，@import需要页面完全载入后加载，会使页面发生闪烁（即文档加载完成没有样式，过一会就好了）。