js init 加载顺序

在JavaScript中，init通常指的是初始化函数或初始化过程，用于在应用程序或页面加载时执行必要的设置和配置。init函数的加载顺序取决于它在代码中的位置以及浏览器的执行机制。以下是一些关于init加载顺序的基础概念和相关信息：

基础概念

脚本加载顺序：
- 内联脚本：在HTML元素中直接定义的脚本，按照它们在文档中的出现顺序执行。
- 外部脚本：通过<script src="..."></script>引入的脚本，按照它们在文档中的出现顺序加载和执行。

DOMContentLoaded事件：
- 当HTML文档被完全加载和解析完成后，DOMContentLoaded事件会被触发，不需要等待样式表、图片和子框架的加载。
window.onload事件：
- 当整个页面及所有依赖资源如样式表和图片都已完成加载时，window.onload事件会被触发。

`init`函数的加载顺序

内联脚本中的init：
- 如果init函数定义在内联脚本中，它会在脚本执行时立即运行。

外部脚本中的init：
- 如果init函数定义在外部脚本中，它会在脚本文件加载并执行时运行。
事件监听器中的init：
- 如果init函数被绑定到DOMContentLoaded或window.onload事件上，它会在相应的事件触发时运行。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Init Example</title>
    <script>
        // 内联脚本中的init
        function initInline() {
            console.log('Inline init function called');
        }
        window.onload = initInline;
    </script>
    <script src="external.js"></script>
</head>
<body>
    <h1>Init Example</h1>
    <script>
        // 内联脚本中的init
        function initBody() {
            console.log('Body init function called');
        }
        document.addEventListener('DOMContentLoaded', initBody);
    </script>
</body>
</html>

external.js文件内容：

// 外部脚本中的init
function initExternal() {
    console.log('External init function called');
}
window.onload = function() {
    initExternal();
};

加载顺序解释

内联脚本：
- initInline函数绑定到window.onload事件，将在页面完全加载后执行。

外部脚本：
- initExternal函数也绑定到window.onload事件，将在页面完全加载后执行。
DOMContentLoaded事件：
- initBody函数绑定到DOMContentLoaded事件，将在HTML文档完全加载和解析完成后立即执行。

输出顺序

initBody（DOMContentLoaded事件触发）
initInline和initExternal（window.onload事件触发）

注意事项

如果多个init函数绑定到同一个事件，它们会按照绑定的顺序依次执行。
如果init函数中有异步操作（如AJAX请求），需要确保这些操作在适当的时机执行。

解决常见问题

init函数未执行：
- 确保脚本文件正确加载，没有404错误。
- 确保init函数在正确的事件上绑定，或者在正确的位置定义和调用。
init函数执行顺序问题：
- 使用DOMContentLoaded和window.onload事件来控制执行时机。
- 确保脚本按照正确的顺序加载和执行。

通过理解这些基础概念和示例代码，你可以更好地控制和管理init函数的加载顺序，确保应用程序或页面在加载时正确初始化。