JavaScript中script元素的位置

过去,所有<script>元素都被放在页面的<head>标签内,如下面的例子所示:

<!DOCTYPE html>
<html>
  <head>
  <title>Example HTML Page</title>
  <script src="example1.js"></script>
  <script src="example2.js"></script>
  </head>
  <body>
  <!-- 这里是页面内容 -->
  </body>
</html>

这样做的好处是把外部的 CSS 和 JavaScript 文件都集中放在一起,缺点就是,必须把所有的 </head> 标签之前的 JavaScript 文件都下载、解析和解释执行完成后,才能开始渲染 <body> 标签后的页面内容。对于需要很多 JavaScript 的页面,这会导致页面渲染明显延迟,在此期间浏览器窗口完全空白。为了解决此问题,可将所有或者部分 <script> 元素放在结束标签 </body> 的紧挨着前面,如下所示:

<!DOCTYPE html>
<html>
  <head>
  <title>Example HTML Page</title>
  </head>
  <body>
  <!-- 这里是页面内容 -->
  <script src="example1.js"></script>
  <script src="example2.js"></script>
  </body>
</html>

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/experience/javascripte/2217.html

(0)
上一篇 2020年10月3日
下一篇 2020年12月12日

相关推荐

发表回复

登录后才能评论