页面加载前执行js函数怎么写

在网页加载前执行JavaScript函数的几种方法包括：在标签中添加脚本、使用DOMContentLoaded事件、利用defer和async属性。 这些方法可以确保在页面加载完成之前执行特定的JavaScript代码，优化用户体验和页面性能。

在标签中添加脚本是一种常见的方法，可以确保脚本在页面解析之前加载和执行。例如，可以在标签中直接插入JavaScript代码，这样浏览器会在解析内容之前执行这些脚本。以下是详细的说明和示例。

一、在标签中添加脚本

在网页的标签中添加JavaScript脚本是最直接的方法之一。通过这种方式，浏览器在开始解析标签前就会执行这些脚本。以下是一个简单的例子：

<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>
    <script>
        // 你的JavaScript代码
        console.log('在<head>标签中执行的脚本');
    </script>
</head>
<body>
    <h1>页面内容</h1>
</body>
</html>

这种方法确保脚本在页面内容加载之前执行，有助于初始化某些全局变量或配置。

二、使用DOMContentLoaded事件

使用DOMContentLoaded事件是另一种确保脚本在页面内容加载之前执行的方法。这种方式确保脚本在DOM完全加载和解析完毕后立即执行，而无需等待样式表、图片等资源加载完成。以下是一个示例：

<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>页面内容</h1>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 你的JavaScript代码
            console.log('DOMContentLoaded事件触发的脚本');
        });
    </script>
</body>
</html>

三、利用defer和async属性

在