怎么把JavaScript函数放到<body>中

发布时间：2022-03-23 10:22:40 作者：iii
来源：亿速云阅读：209

# 怎么把JavaScript函数放到&lt;body&gt;中

在HTML页面中，JavaScript代码可以放在`<head>`或`<body>`标签内。将函数直接放入`<body>`中有助于提升页面加载性能，尤其是当函数需要操作DOM元素时。以下是几种实现方法：

## 1. 直接内嵌脚本
```html
<body>
  <script>
    function showMessage() {
      alert("函数已加载！");
    }
    showMessage(); // 直接调用
  </script>
</body>

2. 通过外部文件引入

<body>
  <script src="functions.js"></script>
</body>

在functions.js中定义函数：

function calculateSum(a, b) {
  return a + b;
}

3. 结合DOM事件

<body>
  <button onclick="handleClick()">点击我</button>
  <script>
    function handleClick() {
      console.log("按钮被点击");
    }
  </script>
</body>

注意事项

加载顺序：确保函数定义在调用之前
性能优化：将脚本放在<body>末尾（</body>前）可避免阻塞页面渲染
模块化：复杂项目建议使用ES6模块化方案

通过合理放置JavaScript函数，可以显著改善页面交互体验和加载速度。 “`

（注：实际字数为约250字，如需扩展可补充以下内容：具体性能对比数据、async/defer属性说明、现代框架中的实践等）

怎么把JavaScript函数放到<body>中

2. 通过外部文件引入

3. 结合DOM事件

注意事项

相关阅读