为什么推荐把<script>元素写在body里面

本文探讨了通过调整&lt;script&gt;标签位置来改善网页加载性能的方法,避免因等待JavaScript文件下载而导致的页面显示延迟,从而提升用户体验。

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

首先我们要知道两点:

  (1) 浏览器在遇到<body>元素才开始显示内容;

  (2) 当HTML页面中含有外部的JavaScript代码引用,会首先对其进行下载,解析。


在最初的写法中,我们都将<script>元素写在HTML页面的<head>元素中。

这样写的好处是:把所有的外部文件(即.css文件和.js文件)的引用都放在了相同的位置。

但是这样就会产生一个问题:

<!DOCTYPE html>
<html>
  <head>
<script type="text/javascript" src="text.js"> </script>
<script type="text/javascript" scr="test.js"> </script>
	 ...
  </head>

<body>
</body>
</html>


由(2)我们知道,当有很多<script>元素时,代码会在<head>标签中等待过长的时间,此时浏览器也不能显示任何页面,这种交互体验...


所以我们推荐将<script>元素写在<body>元素中页面内容的后面。这样在解析包含的JavaScript代码之前,页面的内容都已经完全显示在浏览器中,相应的体验就会好很多。

<html>
<head>
</head>
<body>
...
<script type="text/javascript" src = "test.js">
</script>
</body>
</html>



评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值