页面全部加载完才执行js

当页面全部加载完毕后才执行JavaScript代码，通常是通过将<script>标签放在HTML文档的底部，紧邻</body>标签之前，或者通过使用window.onload事件来实现。以下是相关的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案：

基础概念

DOM加载完成：指的是HTML文档被完全加载和解析完成后，DOM树构建完毕。
资源加载完成：除了HTML文档，还包括图片、样式表、脚本等所有外部资源都已加载完成。

优势

提高页面加载速度：将脚本放在底部可以确保页面内容优先加载，提升用户体验。
避免阻塞渲染：脚本执行可能会阻塞页面的渲染，放在底部可以减少这种影响。

类型

将<script>放在</body>之前：这是最简单的方法。
使用window.onload事件：该事件会在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。
使用DOMContentLoaded事件：该事件在DOM完全加载和解析完成后触发，不需要等待样式表、图片等其他资源加载完成。

应用场景

页面初始化脚本：需要在页面完全加载后执行的脚本，如初始化插件、绑定事件等。
第三方脚本：如统计分析、广告等，这些脚本不需要在页面渲染初期就执行。

可能遇到的问题及解决方案

问题1：脚本执行顺序

如果多个脚本之间存在依赖关系，需要确保它们按正确的顺序执行。

解决方案：

使用模块化系统（如ES6模块）来管理依赖。
使用defer属性来确保脚本按顺序执行，同时不会阻塞页面渲染。

<script src="script1.js" defer></script>
<script src="script2.js" defer></script>

问题2：性能问题

如果页面中有大量资源需要加载，使用window.onload可能会导致用户等待时间过长。

解决方案：

使用DOMContentLoaded事件来尽早执行脚本。
优化资源加载，如使用懒加载、压缩资源等。

问题3：脚本错误处理

在脚本执行过程中可能会遇到错误，导致后续脚本无法正常执行。

解决方案：

使用try...catch语句来捕获和处理错误。
使用脚本加载库（如RequireJS）来管理脚本依赖和错误处理。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 页面内容 -->
    <script>
        // 使用DOMContentLoaded事件
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM fully loaded and parsed');
            // 执行初始化脚本
        });

        // 或者使用window.onload事件
        window.onload = function() {
            console.log('All resources fully loaded');
            // 执行需要等待所有资源加载完成的脚本
        };
    </script>
</body>
</html>

通过以上方法，可以确保JavaScript代码在页面加载完毕后执行，同时优化页面加载速度和用户体验。