在编写前端页面时，我们通常会将JavaScript代码嵌入到HTML文档中。而这些代码通常会被放置在<head>标签内或<body>标签内。但是，你也可以将JavaScript代码放置在HTML文档的顶部或底部。本文将介绍顶部和底部脚本的用途、区别以及如何使用它们。
顶部脚本
顶部脚本是指将JavaScript代码放置在HTML文档的<head>标签内，例如：
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------------
--------
-- ---------- ---- ---- ----
---------
-------
------
---
-------
-------顶部脚本的优点是可以让浏览器在渲染页面之前先加载和执行JavaScript代码，确保页面中需要使用的函数和变量已经定义好了。此外，顶部脚本还可以帮助搜索引擎更好地识别页面内容，提升SEO效果。
然而，顶部脚本可能会导致页面加载速度变慢，因为浏览器必须要先加载和执行JavaScript代码，才能继续渲染页面内容。如果JavaScript代码非常复杂，可能会阻塞页面的加载，导致用户等待时间过长。
底部脚本
底部脚本是指将JavaScript代码放置在HTML文档的<body>标签内，例如：
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------------
-------
------
---
--------
-- ---------- ---- ---- ----
---------
-------
-------底部脚本的优点是可以让页面先渲染出基本内容，然后再加载和执行JavaScript代码。这样可以提高页面加载速度，因为浏览器不必等待JavaScript代码的加载和执行。此外，在某些情况下，底部脚本还可以帮助提高性能和安全性。
但是，底部脚本可能会导致页面出现闪烁或延迟加载的问题，因为JavaScript代码需要在页面渲染完成后才能加载和执行。如果JavaScript代码中包含一些操作DOM元素的代码，可能会出现闪烁或者无法正确渲染页面的情况。
如何选择顶部或底部脚本
选择使用顶部或底部脚本应该根据具体情况而定。如果JavaScript代码非常简单，并且需要在页面渲染之前就执行，那么可以考虑使用顶部脚本。反之，如果JavaScript代码比较复杂，并且不需要立即执行，那么可以考虑使用底部脚本。
当然，如果你不确定该使用哪种类型的脚本，可以先使用底部脚本进行测试。根据实际情况再决定是否需要改为顶部脚本。
示例代码
以下是一个简单的示例代码，演示如何在HTML文档中使用顶部和底部脚本：
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------------
--------
-- --- ------ ---- ----
----------------- -- - --- ---------
---------
-------
------
----------- -- -- ------------
------- -- - --------------
--------
-- ------ ------ ---- ----
----------------- -- - ------ ---------
---------
-------
-------在这个例子中，我们将一个简单的console.log语句
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11337
