怎么设置页面加载js

要设置页面加载时执行JavaScript代码，可以通过以下几种方式：在HTML中直接嵌入、在外部文件引用、使用事件监听器、使用库或框架。本文将详细介绍这些方法，并提供一些实际应用中的建议与技巧。

一、在HTML中直接嵌入

1、内联JavaScript

内联JavaScript是最简单的方法之一。在HTML文档的<head>或<body>标签中直接嵌入<script>标签。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>页面加载JS示例</title>
    <script>
        window.onload = function() {
            alert("页面加载完成！");
        };
    </script>
</head>
<body>
    <h1>欢迎访问我的网站</h1>
</body>
</html>

这种方法适用于简单的脚本，但不推荐用于复杂的项目，因为会使HTML文件变得混乱且难以维护。

2、外部JavaScript文件

将JavaScript代码保存在单独的文件中，然后在HTML文档中引用它。这种方法有助于代码的组织和重用。

<!DOCTYPE html>
<html>
<head>
    <title>页面加载JS示例</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>欢迎访问我的网站</h1>
</body>
</html>

在script.js文件中：

window.onload = function() {
    alert("页面加载完成！");
};

二、使用事件监听器

1、DOMContentLoaded事件

DOMContentLoaded事件在HTML文档完全加载和解析后立即触发，不等待样式表、图像和子框架的完成加载。适用于需要在文档结构加载完成后立即执行的脚本。

<!DOCTYPE html>
<html>
<head>
    <title>页面加载JS示例</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            alert("DOM完全加载和解析完毕");
        });
    </script>
</head>
<body>
    <h1>欢迎访问我的网站</h1>
</body>
</html>

2、load事件

load事件在页面完全加载（包括所有依赖资源，如样式表和图片）后触发。适用于需要在所有资源加载完毕后执行的脚本。

<!DOCTYPE html>
<html>
<head>
    <title>页面加载JS示例</title>
    <script>
        window.addEventListener("load", function() {
            alert("页面完全加载");
        });
    </script>
</head>
<body>
    <h1>欢迎访问我的网站</h1>
</body>
</html>

三、使用库或框架

1、jQuery

jQuery提供了简化的文档准备函数$(document).ready()，用于在DOM准备好后执行代码。

<!DOCTYPE html>
<html>
<head>
    <title>页面加载JS示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            alert("DOM准备就绪");
        });
    </script>
</head>
<body>
    <h1>欢迎访问我的网站</h1>
</body>
</html>

2、React、Vue等框架

现代前端框架如React和Vue在组件挂载时提供生命周期钩子函数，可以在这些钩子中执行代码。

React示例

import React, { useEffect } from 'react';
function App() {
    useEffect(() => {
        alert("组件挂载完成");
    }, []);
    return (
        <div>
            <h1>欢迎访问我的网站</h1>
        </div>
    );
}
export default App;

Vue示例

<template>
  <div>
    <h1>欢迎访问我的网站</h1>
  </div>
</template>
<script>
export default {
  mounted() {
    alert("组件挂载完成");
  }
};
</script>

四、实际应用中的建议与技巧

1、优化加载性能

在设置页面加载JavaScript时，优化加载性能非常重要。将脚本放在页面底部可以确保HTML内容先加载，从而提高页面的响应速度。

<!DOCTYPE html>
<html>
<head>
    <title>页面加载JS示例</title>
</head>
<body>
    <h1>欢迎访问我的网站</h1>
    <script src="script.js"></script>
</body>
</html>

2、异步加载脚本

使用async或defer属性异步加载外部脚本，可以进一步优化页面加载性能。

<!DOCTYPE html>
<html>
<head>
    <title>页面加载JS示例</title>
    <script src="script.js" async></script>
</head>
<body>
    <h1>欢迎访问我的网站</h1>
</body>
</html>

3、使用现代工具和框架

使用Webpack等现代工具打包和优化JavaScript代码，确保高效的加载和执行。现代前端框架如React、Vue和Angular提供了优化代码组织和性能的强大功能。

4、项目团队管理系统

在大型项目中，使用项目团队管理系统如研发项目管理系统PingCode和通用项目协作软件Worktile，可以有效地组织和管理项目进度、任务分配和代码质量。

研发项目管理系统PingCode：PingCode专为研发团队设计，提供了强大的需求管理、任务管理、缺陷管理等功能，帮助团队高效协作。

通用项目协作软件Worktile：Worktile适用于各种类型的项目团队，提供了任务管理、项目跟踪、文件共享等功能，帮助团队提高工作效率。

5、代码分割和懒加载

通过代码分割和懒加载技术，可以将大型JavaScript文件拆分成更小的块，按需加载，从而提高页面加载性能。

Webpack代码分割示例

import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => {
    const element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    document.body.appendChild(element);
});

6、使用浏览器缓存

利用浏览器缓存可以显著提高重复访问的加载速度。配置服务器响应头以启用缓存。

Cache-Control: max-age=31536000

7、监控和分析加载性能

使用工具如Google Lighthouse、WebPageTest和New Relic等，定期监控和分析页面加载性能，识别和解决性能瓶颈。

结论

通过本文的介绍，您应该已经掌握了设置页面加载JavaScript的多种方法，包括在HTML中直接嵌入、在外部文件引用、使用事件监听器以及使用库或框架。同时，本文还提供了一些实际应用中的建议与技巧，如优化加载性能、异步加载脚本、使用现代工具和框架、项目团队管理系统、代码分割和懒加载、使用浏览器缓存以及监控和分析加载性能。

希望这些内容能够帮助您在实际项目中更高效地设置和优化页面加载JavaScript，提升用户体验和页面性能。