嵌入javascript脚本的位置

最新推荐文章于 2021-12-10 11:34:58 发布

转载最新推荐文章于 2021-12-10 11:34:58 发布 · 520 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/caicaidandan/p/4347762.html

文章标签：

#javascript #ViewUI

本文介绍了JavaScript脚本在HTML文档中的不同放置位置及其对页面加载和用户体验的影响，并推荐了最佳实践。

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

JavaScript脚本可以放在HTML文档任何需要的位置。一般来说，可以在<head>与</head>、<body>与</body>标记对之间按需要放置JavaScript脚本代码。

一、放在<head>与</head>标记对之间

放置在<head>与</head>标记对之间的JavaScript脚本代码一般用于提前载入以响应用户的动作，一般不影响HTML文档的浏览器显示内容。如下是其基本文档结构：

 1 <html>
 2 <head>
 3 <title>放置在<head>与</head>标记对之间</title>
 4 <!--直接写JavaScript代码-->
 5 <script type="text/javascript">
 6     //JavaScript代码
 7 </script>
 8 <!--引入外部脚本-->
 9 <script type="text/javascript" src="1.js"></script>
10 </head>
11 <body>
12 </body>
13 </html>

二、放置在<body>与</body>标记对之间

JavaScript脚本也可以放置在<body>与</body>标记对之间，可根据需要写多个独立的脚本代码段并与HTML代码结合在一起。

 1 <html>
 2 <head>
 3 <title>放置在<body>与</body>标记对之间</title>
 4 </head>
 5 <body>
 6　<!--直接写JavaScript代码-->
 7 <script type="text/javascript">
 8     //JavaScript代码
 9 </script>
10 <!--引入外部脚本-->
11 <script type="text/javascript" src="1.js"></script>
12 </body>
13 </html>

注意：在<head>和<body>标签内可以有多个代码块，只要放在<script type="text/javascript">与</script>之间或者引入外部脚本即可。同时，JavaScript脚本也可以放在其他任意HTML标签之间，如<div>、<p>、<span>等。

说明：浏览器一般是从上到下渲染HTML，当遇到JavaScript代码时，浏览器将发生阻塞（不再解析后面的任何代码，包括HTML和JavaScript），有些浏览器在阻塞期间不会解析该JavaScript后面的HTML代码，必须等到该JavaScript代码执行完毕，才继续解析。如果将JavaScript放置在<head>...</head>或者<body>...</body>之间，经常会发生会发生这种现象：浏览器先是呈现一部分页面，再呈现后边的页面，中间间隔时间明显。这样带来的明显结果就是用户体验差。

因此，如无特殊要求，我们强烈建议将JavaScript代码置于<body>...</body>的最后。如：

<body>
<!--HTML代码-->
<script type="text/javascript">
</scirpt>
<script type="text/javascript" src="1.js"></scirpt>
</body>

原文链接：http://www.itxueyuan.org/view/6297.html

转载于:https://www.cnblogs.com/caicaidandan/p/4347762.html