过去，所有<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
微信扫一扫 
支付宝扫一扫