src与href

src与href这两个标签内属性大家应该不陌生，但是两者有何区别呢？可能很多初学前端的人没有思考过这个问题，本文将讲述一些关于两者的知识点，提高大家对其的认知，不停留在表面。

1. src与href的区别

在页面上，一般我们用href加载css，位置在头部；src加载javascript，并置与body尾部。

1.1 src

src是source的缩写，是资源，页面必不可少的一部分，src指向的内容会嵌入到文档中当前标签的位置。常用的有img, script, iframe。当浏览器解析到src引用时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部的原因。

1.2 href

href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。浏览器会识别href引用的文档并行下载该文档，并且不会停止对当前文档的处理。

2. css放在头部，js放在尾部的原因

CSS放头部
在加载html生成DOM tree的时候，就可以同时对DOM tree进行渲染。
这样可以防止闪跳，白屏或者布局混乱。

js放在后面
javascript可能会改变DOM tree的结构，所以需要一个稳定的DOM tree。
javascript加载后会立即执行，同时会阻塞后面的资源加载。（javascript加载和执行的特点）

3. 小结

本文对常见的src与href进行了梳理，给出了两者各自代表的含义与两者区别，从而引申出为何将css放在头部，而js放在body尾部的原因。通过本文，希望能给读者一些益处，谢谢阅读。