在网页加载时自动运行js的方法（2025最新）
在网页加载时自动运行JavaScript方法有多种实现方式，以下是常见的几种方法：
1. 使用 DOMContentLoaded 事件
当初始HTML文档完全加载和解析后触发（无需等待图片等资源加载）：
document.addEventListener('DOMContentLoaded', function() {// 你的代码console.log('DOM已加载完毕！');
});2. 使用 window.onload 事件
等待页面所有资源（图片、样式表等）加载完成后触发：
window.onload = function() {// 你的代码console.log('页面完全加载完毕！');
};3. 直接在 <script> 标签中执行
将脚本放在 <body> 末尾，确保DOM已解析：
<body><!-- 页面内容 --><script>// 直接执行的代码console.log('脚本立即执行！');</script>
</body>4. 使用 defer 属性
延迟脚本执行，直到HTML解析完成（按顺序执行）：
<head><script defer src="your-script.js"></script>
</head>5. 使用 async 属性（异步加载）
脚本异步加载，下载完成后立即执行（不保证顺序）：
<head><script async src="your-script.js"></script>
</head>6. IIFE（立即调用函数表达式）
自动执行的匿名函数，适合模块化代码：
(function() {console.log('立即执行！');
})();7. 现代框架的生命周期钩子
-
Vue.js: 使用
mounted钩子new Vue({el: '#app',mounted() {console.log('Vue实例已挂载！');} }); -
React: 使用
useEffect（函数组件）或componentDidMount（类组件）useEffect(() => {console.log('组件已渲染！'); }, []);
注意事项：
- 执行顺序：
DOMContentLoaded比window.onload更早触发。 - 性能：避免在加载阶段执行耗时操作，以免阻塞渲染。
- 框架兼容性：现代前端框架通常有自定义的生命周期方法。
根据你的需求选择合适的方式即可！