过去,所有<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