前言
本系列主要整理前端面试中需要掌握的知识点。本节介绍src和href的区别以及defer和async的区别的相关知识。
文章目录
一、src和href的区别
1、src解释
src表示引用资源，src指向的内容会嵌入到文档中当前标签所在的位置，替换当前元素，用在img , script , iframe上。
<script src="script.js"></script>
当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。
2、href解释
href表示超文本引用，用来建立当前元素和文档之间的链接，常用的有link,a。
<link href="reset.css" rel="stylesheet"></script>
当浏览器解析到该元素时，会并行下载该文档，但不会停止对当前文档的解析。
3、总结src和href
src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。
4、补充：link和@import的区别
两者都是外部引用CSS的方式，存在以下区别：
（1）link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
（2）link引入CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。（因此更推荐link引入CSS）
（3）link是XHTML标签，无兼容问题；@import是CSS2.1提出的，低版本浏览器不支持。
（4）link支持使用Javascript 控制DOM去改变样式；@import不支持。
二、defer和async的区别
1、defer和async的相同之处
defer和async都是用来异步加载外部的JS脚本文件的，不会阻碍页面的解析。 如果没有defer或async属性，浏览器会立即加载并执行相应的脚本，不会等待后续加载的文档元素，读取到就会开始加载和执行，这样会阻塞后续文档的加载。
2、defer和async的不同之处
defer要等到整个页面正常渲染结束才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。 如果有多个defer脚本，会按照他们的在页面出现的顺序进行加载，而多个async脚本不能保证加载的顺序。