js 首先加载的函数怎么写

在网页中首先加载特定的JavaScript函数，可以通过使用window.onload、document.addEventListener、defer属性或async属性来实现。 在开发过程中，确保关键的JavaScript函数在页面加载时优先执行，可以有效提高用户体验和网页的性能。以下是几种常见的方法，详细讲解其中一种：

使用`window.onload`

window.onload事件是在页面及所有资源（如图像、脚本文件等）完全加载后触发的。通过将函数赋值给window.onload，可以确保该函数在页面加载完成后执行。

window.onload = function() {
    // 要首先加载的函数
    myInitFunction();
};
function myInitFunction() {
    console.log("页面加载完成，初始化函数已执行");
}

详细描述： 当页面及其所有资源完全加载后，window.onload事件触发，执行函数myInitFunction。这种方法保证了页面的所有部分（包括图像、嵌入资源等）加载完成后，才执行指定的JavaScript函数。

一、使用`document.addEventListener`

1.1 `DOMContentLoaded`事件

DOMContentLoaded事件是在HTML文档被完全加载和解析完成后触发的，而不必等待样式表、图像和子框架的完成加载。

document.addEventListener('DOMContentLoaded', function() {
    // 要首先加载的函数
    myInitFunction();
});
function myInitFunction() {
    console.log("DOM 已完全加载和解析，初始化函数已执行");
}

1.2 优点和缺点

优点： 与window.onload相比，DOMContentLoaded更早触发，因为它不必等待所有资源加载完成。这可以加快关键JavaScript代码的执行速度，提升用户体验。
缺点： 可能在某些情况下，依赖外部资源的代码（如图像大小计算）需要等待资源加载完成，这时DOMContentLoaded可能不适用。

二、使用`defer`属性

2.1 在`<script>`标签中使用`defer`属性

defer属性告诉浏览器立即下载脚本，但在整个文档解析完成后才执行它。适用于外部脚本文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="script.js" defer></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

2.2 优点和缺点

优点： 脚本文件在后台下载，且在HTML文档解析完成后才执行，不会阻塞页面渲染。
缺点： 仅适用于外部脚本文件，内联脚本无法使用defer属性。

三、使用`async`属性

3.1 在`<script>`标签中使用`async`属性

async属性告诉浏览器立即下载脚本，并在下载完成后立即执行。适用于外部脚本文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="script.js" async></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

3.2 优点和缺点

优点： 脚本文件在后台下载，且下载完成后立即执行，不会阻塞页面渲染。
缺点： 可能导致脚本执行顺序不确定，适用于不依赖其他脚本的独立脚本。

四、使用自定义事件

4.1 创建和触发自定义事件

可以通过创建和触发自定义事件来实现特定函数在页面加载后执行。

document.addEventListener('DOMContentLoaded', function() {
    var event = new Event('pageLoaded');
    document.dispatchEvent(event);
});
document.addEventListener('pageLoaded', function() {
    // 要首先加载的函数
    myInitFunction();
});
function myInitFunction() {
    console.log("页面加载完成，自定义事件触发，初始化函数已执行");
}

4.2 优点和缺点

优点： 可以灵活控制事件触发时机，适用于复杂的加载逻辑。
缺点： 需要额外的代码实现事件创建和触发，增加了代码复杂性。

五、结合多种方法

5.1 综合使用多种方法

在实际开发中，可能需要综合使用多种方法来确保关键JavaScript函数优先加载。例如，使用defer属性加载外部脚本文件，同时在脚本文件中使用DOMContentLoaded事件触发关键函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="script.js" defer></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

document.addEventListener('DOMContentLoaded', function() {
    // 要首先加载的函数
    myInitFunction();
});
function myInitFunction() {
    console.log("DOM 已完全加载和解析，初始化函数已执行");
}

5.2 优点和缺点

优点： 灵活结合多种方法，确保关键JavaScript函数优先加载，提高页面性能和用户体验。
缺点： 增加了代码复杂性，需要根据具体需求选择合适的方法组合。

六、优化页面加载性能

6.1 缓存脚本文件

通过设置适当的缓存策略，可以减少脚本文件的加载时间，提升页面加载性能。可以在服务器端配置缓存策略，或在HTML中使用cache-control头。

<meta http-equiv="Cache-Control" content="max-age=31536000">

6.2 代码拆分和懒加载

将大型脚本文件拆分为多个小文件，按需加载，减少初始加载时间。可以使用工具如Webpack进行代码拆分和懒加载。

// 使用动态import进行懒加载
import('./module.js').then(module => {
    module.init();
});

6.3 优化图像和资源加载

通过压缩图像、使用合适的图像格式（如WebP）、延迟加载非关键图像等方式，可以减少资源加载时间，提升页面加载性能。

<img src="image.webp" loading="lazy" alt="Lazy Loaded Image">

七、监控和调试页面加载性能

7.1 使用浏览器开发者工具

浏览器开发者工具提供了丰富的页面性能监控和调试功能，可以帮助分析和优化页面加载性能。

7.2 使用性能监控工具

通过使用性能监控工具如Google Lighthouse、WebPageTest等，可以全面分析页面性能，提供优化建议。

7.3 持续优化和测试

持续监控和测试页面加载性能，根据测试结果进行优化，不断提升用户体验和页面性能。

总之，通过使用window.onload、document.addEventListener、defer属性、async属性、自定义事件等多种方法，可以确保关键JavaScript函数在页面加载时优先执行，提升页面性能和用户体验。同时，结合多种优化策略和性能监控工具，可以持续优化页面加载性能，提供更好的用户体验。