页面加载完毕js怎么写

页面加载完毕后执行JavaScript代码的方法有多种：使用window.onload、document.addEventListener('DOMContentLoaded')、或使用现代JavaScript框架的生命周期钩子。推荐使用document.addEventListener('DOMContentLoaded')因为它比window.onload更早触发，确保用户体验更好。

document.addEventListener('DOMContentLoaded')在页面的DOM完全加载和解析完成后立即触发，而不必等待样式表、图片和子框架的完全加载。相比之下，window.onload会在整个页面（包括所有依赖资源）完全加载后才触发。详细来说，document.addEventListener('DOMContentLoaded')能够更早地执行代码，从而提升页面响应速度和用户体验。

一、使用window.onload方法

window.onload是一个最早被广泛使用的方式，用于在页面完全加载后执行JavaScript代码。然而，它的缺点是需要等待所有资源（如图片、样式表等）加载完毕，这可能导致用户体验不佳，特别是当页面资源较多时。

window.onload = function() {
    // 你的代码
    console.log("页面完全加载");
};

这个方法虽然简单直接，但在现代Web开发中已经不再是最佳实践，尤其是在需要更快响应的场景中。

二、使用document.addEventListener('DOMContentLoaded')方法

相比之下，document.addEventListener('DOMContentLoaded')更加灵活和高效。它会在DOM完全加载和解析完成后立即执行指定的代码，而不必等待其他资源。

document.addEventListener('DOMContentLoaded', function() {
    // 你的代码
    console.log("DOM完全加载和解析");
});

这种方法不仅更早触发，还能提升页面加载速度和用户体验。

三、使用jQuery的$(document).ready()方法

如果你使用jQuery库，$(document).ready()是一个简洁的选择。它的功能和document.addEventListener('DOMContentLoaded')类似，能够确保代码在DOM完全加载后执行。

$(document).ready(function() {
    // 你的代码
    console.log("jQuery: DOM完全加载和解析");
});

虽然jQuery简化了许多操作，但在现代前端开发中，原生JavaScript的使用越来越普遍，因为它不需要额外加载jQuery库，从而减少了页面加载时间。

四、使用现代前端框架的生命周期钩子

在现代前端框架如React、Vue和Angular中，通常会使用框架提供的生命周期钩子来执行页面加载完毕后的操作。例如，在React中，你可以使用componentDidMount，在Vue中，你可以使用mounted。

React示例：

class MyComponent extends React.Component {
    componentDidMount() {
        // 你的代码
        console.log("React: 组件挂载完成");
    }
    render() {
        return <div>我的组件</div>;
    }
}

Vue示例：

new Vue({
    el: '#app',
    mounted() {
        // 你的代码
        console.log("Vue: 组件挂载完成");
    }
});

这些生命周期钩子提供了更细粒度的控制，允许你在不同的组件生命周期阶段执行特定操作。

五、使用异步函数和事件

在某些场景下，你可能需要等待特定的异步操作完成后执行代码。例如，等待某个API请求完成后再更新DOM。这时可以结合async/await和事件监听。

document.addEventListener('DOMContentLoaded', async function() {
    const data = await fetchData();
    updateDOM(data);
});
async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    return response.json();
}
function updateDOM(data) {
    // 更新DOM的代码
    console.log("数据已加载并更新DOM", data);
}

这种方法不仅保证代码在DOM加载后执行，还能处理异步操作，进一步提升代码的灵活性和可维护性。

六、性能优化和用户体验提升

在实际开发中，除了选择适当的页面加载完毕方法外，性能优化和用户体验也是需要考虑的重要因素。以下是一些提升性能和用户体验的建议：

1. 代码拆分和按需加载

将JavaScript代码拆分为多个模块，并按需加载，能够减少初始加载时间。例如，使用Webpack或其他打包工具进行代码拆分。

2. 延迟加载非关键资源

通过延迟加载非关键资源（如图片、第三方脚本等），可以提升页面初始加载速度。可以使用IntersectionObserver API实现图片的懒加载。

const lazyImages = document.querySelectorAll('img.lazy');
const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.remove('lazy');
            observer.unobserve(img);
        }
    });
});
lazyImages.forEach(img => {
    observer.observe(img);
});

3. 缓存和CDN

利用缓存和内容分发网络（CDN）可以显著提升资源加载速度。确保静态资源（如CSS、JavaScript文件和图片）使用缓存策略，并将其托管在CDN上。

七、总结

在现代Web开发中，选择适当的页面加载完毕方法能够显著提升用户体验。推荐使用document.addEventListener('DOMContentLoaded')，因为它比window.onload更早触发，确保代码在DOM完全加载后立即执行。此外，结合现代前端框架的生命周期钩子和异步函数，可以更灵活地处理复杂场景。通过代码拆分、延迟加载和使用缓存与CDN等性能优化策略，可以进一步提升页面加载速度和用户体验。