HTML是网页的基础，而JavaScript是最常用的脚本语言之一。所以，在进行前端开发时，我们经常会遇到一个问题：我应该在HTML标记中放<script>标签吗？
HTML中的<script>标签
在HTML中，<script>标签用于嵌入JavaScript代码。它可以出现在文档的<head>或<body>部分，并且可以包含内联脚本或外部脚本文件的引用。下面是一个包含内联脚本的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ------------
--------
-- ---------------
---------
-------
------
-------
-------这个示例中，<script>标签位于<head>标签中，并包含了JavaScript代码。
放在<head>还是<body>?
那么，我们应该将<script>标签放在文档的<head>部分还是<body>部分呢？答案是：取决于你的需求。
放在<head>中
将<script>标签放在<head>中可以确保在页面加载时就加载并解析了所有的JavaScript代码。这也意味着当浏览器开始渲染页面时，所有的JavaScript代码已经准备就绪了。这可以避免因为延迟加载而导致的页面抖动和卡顿。
然而，放在<head>中的JavaScript代码会阻塞文档的渲染，并且会降低页面的性能。如果你的JavaScript代码很多或者很复杂，那么它可能会大大增加页面的加载时间。
放在<body>中
将<script>标签放在<body>中可以使得页面更快地加载和呈现。当浏览器解析到<script>标签时，它会停止解析文档并开始加载JavaScript文件。这意味着在页面渲染时，JavaScript代码不会阻塞页面的渲染。
然而，如果你的JavaScript代码需要在页面加载时执行，那么将<script>标签放在<body>末尾可能会导致JavaScript代码执行太晚，影响用户体验。
最佳实践
综上所述，我们可以得出以下的最佳实践：
- 将
<script>标签放在页面的底部，除非需要在页面加载时立即执行脚本。 - 如果需要在页面加载时立即执行脚本，将
<script>标签放在<head>中，并使用defer或async属性来异步加载脚本。
下面是一个示例，展示如何使用defer属性异步加载脚本：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- ------------ ------- ----- --------------------------- ------- ------ ------- -------
在这个示例中，<script>标签会异步地下载并执行myscript.js脚本，而不会阻塞页面的渲染。
结论
在HTML标记中放<script>标签是前端开发中常见的问题之一。我们可以根据需要和最佳实践来决定将<script>标签放在文档的哪个部分。如果需要在页面加载时立即执行脚本，则应该将<script>标签放在<head>中，并使用defer或async属性来异步加载脚本
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/7307