在 HTML 页面中，我们可以通过在 <script> 标签内定义 JavaScript 函数来实现各种功能。但是，脚本标签的位置会对这些函数产生一定的影响。
脚本标签的位置
在 HTML 页面中，通常有两种位置放置脚本标签：头部和尾部。
头部
在页面头部，所有的 JavaScript 代码都会在页面渲染之前被加载和执行。这意味着，在页面显示出来之前，所有的函数都已经被定义好了。例如：
-- -------------------- ---- -------
--------- -----
------
------
--------
-------- ------- -
------------- ---------
-
---------
-------
------
------- --------------------------------
-------
-------在这个例子中，greet() 函数被定义在页面头部的 <script> 标签内。由于它在页面渲染之前被加载和执行，所以在 <button> 标签中的 onclick 事件能够引用到这个函数并正常工作。
尾部
相比之下，将脚本标签放在页面尾部，所有的 JavaScript 代码都会在页面渲染之后才被加载和执行。这意味着，在页面显示出来之前，所有的函数都还没有被定义，无法被调用。例如：
-- -------------------- ---- -------
--------- -----
------
-------------
------
------- --------------------------------
--------
-------- ------- -
------------- ---------
-
---------
-------
-------在这个例子中，greet() 函数被定义在页面尾部的 <script> 标签内。由于它是在页面渲染之后才被加载和执行的，所以在 <button> 标签中的 onclick 事件无法引用到这个函数，导致程序抛出异常。
指导意义
从上面的例子可以看出，脚本标签的位置对 JavaScript 函数的定义和调用产生了重要的影响。为了避免出现类似于第二个例子中的错误，我们通常将脚本标签放在页面头部，并将函数定义放在其他代码的前面。这样可以确保所有的函数都能被正确地加载和执行，从而保证程序的正常运行。
此外，在实际开发中，我们还应该注意以下几点：
- 尽可能缩小函数作用域，避免全局变量污染。
- 合理使用模块化技术，提高代码复用性和可维护性。
- 避免在循环或大量递归函数中使用闭包，防止内存泄漏和性能问题。
总之，合理地使用脚本标签和 JavaScript 函数，是前端开发中非常重要的一部分。在实际项目中，我们需要根据具体情况进行选择，以保证程序运行的正确性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25673