HTML5 中首次调用 JavaScript 函数的几种方法

在 HTML5 中，有多种方式可以在页面加载时首次调用 JavaScript 函数。以下是常见的方法：

一、基本方法

1. DOMContentLoaded 事件（推荐）

2. window.onload 事件

3. defer 属性

二、不同位置调用对比

1. 在 中调用

2. 在 末尾调用（传统方法）

<script>
    // 此时 DOM 元素已加载，可直接操作
    document.getElementById('content').style.color = 'red';
</script>

三、现代最佳实践

1. 使用模块模式

2. 立即执行函数表达式 (IIFE)

四、完整示例

<style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
    }
    .status {
        padding: 10px;
        margin: 10px 0;
        background-color: #f0f0f0;
        border-radius: 4px;
    }
    button {
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
</style>

<script>
    // 记录初始化步骤
    const log = (message) => {
        const logElement = document.getElementById('log');
        if (logElement) {
            const p = document.createElement('p');
            p.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
            logElement.appendChild(p);
        }
        console.log(message);
    };
    
    // 主初始化函数
    function initializeApp() {
        log('应用初始化开始...');
        
        // 初始化 UI
        document.getElementById('status').textContent = '应用已初始化';
        document.getElementById('status').style.backgroundColor = '#d4edda';
        
        // 绑定事件
        document.getElementById('testBtn').addEventListener('click', function() {
            log('按钮被点击');
        });
        
        log('应用初始化完成');
    }
    
    // 页面加载完成后的初始化
    function onPageLoaded() {
        log('页面完全加载（包括图片等资源）');
    }
    
    // DOM 准备好时初始化
    document.addEventListener('DOMContentLoaded', function() {
        log('DOMContentLoaded: DOM 已解析完成');
        initializeApp();
    });
    
    // 页面完全加载
    window.addEventListener('load', onPageLoaded);
    
    // 记录脚本执行顺序
    log('脚本开始执行（DOM 可能还未完全解析）');
</script>

HTML5 首次调用 JavaScript 函数示例

<div class="status" id="status">等待初始化...</div>

<button id="testBtn">测试按钮</button>

<h3>执行日志：</h3>
<div id="log" class="status"></div>

<!-- 模拟大资源加载，观察 load 事件触发时机 -->
<img src="https://via.placeholder.com/800x400" alt="示例图片" 
     onload="log('大图片加载完成')" 
     style="width: 100%; max-width: 800px; margin-top: 20px;">

<script>
    // 内联脚本执行
    log('内联脚本执行（在 body 末尾）');
</script>

五、执行时机总结

方法 执行时机 是否等待图片/样式 推荐程度

4. 考虑使用现代框架的生命周期：
   // Vue.js
   new Vue({
   el: ‘#app’,
   mounted() {
   // 相当于 DOMContentLoaded
   }
   });

// React
useEffect(() => {
// 组件挂载后执行
}, []);

七、兼容性说明

• DOMContentLoaded：IE9+ 支持

• defer/async：HTML5 特性，现代浏览器支持

• 如需支持旧浏览器，可使用 polyfill 或 fallback：
document.onreadystatechange = function() {
if (document.readyState === ‘interactive’) {
// 类似 DOMContentLoaded
}
if (document.readyState === ‘complete’) {
// 类似 window.onload
}
};

选择合适的方法取决于具体需求，但大多数情况下，使用 DOMContentLoaded 事件是最佳选择。