href 和src 的区别

最新推荐文章于 2025-02-15 23:43:10 发布

weixin_33725239

最新推荐文章于 2025-02-15 23:43:10 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mjbin/p/6592334.html

本文详细解释了HTML中href和src属性的区别，href用于定义文档之间的链接关系，如引入CSS；src则用于嵌入资源，如JavaScript文件。文章还介绍了如何优化资源加载方式，包括使用async和defer属性。

转载地址：http://www.58maisui.com/2016/08/03/30/?utm_source=tuicool&utm_medium=referral

href和src的区别：

我们在可替换的元素上使用src，然而把href用于在涉及的文档和外部资源之间建立一个关系。

href (Hypertext Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者��系。当我们写下：

<link href=”app.css” rel=”stylesheet” />

浏览器明白当前资源是一个样式表，页面解析不会暂停（由于浏览器需要样式规则去画或者渲染页面，渲染过程可能会被被暂停）。这与把css文件内容写在<style>标签里不相同，因此建议使用link标签而不是@import来吧样式表导入到html文档里。

src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置。当浏览器找到：

<script src=”app.js”></script>

在浏览器下载，编译，执行这个文件之前页面的加载和处理会被暂停。这个过程与把js文件放到<script>标签里类似。这也是建议把JS文件放到底部加载的原因。当然，img标签页与此类似。浏览器暂停加载直到提取和加载图像。

PS:

HTML5实现了script的async属性，这个新的属性可以让js在浏览器中以非阻塞的模式加载，另外script还有一个defer属性，这个属性目前所有浏览器都已实现（除了firefox和chrome的早期版本），IE这方面做得好，从一开始就支持些属性。

async和defer的区别：
带有async或者defer的script都会立刻下载并不阻塞页面解析,而且都提供一个可选的onload事件处理, 在script下载完成后调用,用于做一些和此script相关的初始化工作。它的不同之处在于async一旦下载完成就立即执行（在window.onload事件之前），不确保执行的顺序，而defer能确保js是在按照其在页面中的顺序执行（在DOMContentLoaded事件之前）。

转载于:https://www.cnblogs.com/mjbin/p/6592334.html