href和src的区别/把CSS放头部,script放下方的原因(文档加载问题)

本文详细解释了HTML中href和src属性的区别,包括它们在加载CSS和JavaScript时的不同行为,以及为什么通常将CSS置于头部而JavaScript置于底部的原因。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

href和src的区别

一般加载CSS用href,并放在头部;加载script用src,放在body内的下方。

href

是hypertext reference的缩写,表示超文本引用,用来建立当前元素和文档间的链接。常用的有link,a。

当CSS使用href引用,浏览器会识别该文档问CSS,并行下载,不会停止对当前文档的加载。

src

是source的缩写,是资源,页面必不可少的一部分,src指向的内容会嵌入到文档中当前标签的位置。常用的有img, script, iframe。

当script使用src引用,浏览器解析到该元素时会停止对文档的渲染,直到该资源加载完成。这也是将script放底部而不是头部的原因。


把CSS放头部,script放下方的原因

CSS放头部

在加载html生成DOM tree的时候,就可以同时对DOM tree进行渲染。

这样可以防止闪跳,白屏或者布局混乱。

javascript放在后面

javascript可能会改变DOM tree的结构,所以需要一个稳定的DOM tree。

javascript加载后会立即执行,同时会阻塞后面的资源加载。(javascript加载和执行的特点


下面是渲染引擎在取得内容之后的基本流程:

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树




评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值