首先，从基本原理上讲，“打开页面时自动执行的JavaScript”通常涉及到两种主要方式：一是将脚本直接放置于HTML文档<head>部分或者<body>标签底部；二是利用事件监听器如window.onload或DOMContentLoaded来触发函数调用。
1. **内联/外部脚本位置**：
当我们在HTML文件中的`<head>`区域插入 `<script>` 标签并引用JS文件（或者是嵌入js代码），这些脚本会在DOM构建过程中同步解析与执行。若将其置于`<body>`元素末尾，则确保所有 DOM 元素已经完成加载后才开始执行 JavaScript 代码，这对于那些依赖特定DOM结构进行操作的情况尤为适用。
2. **使用事件监听器**:
- `DOMContentLoaded`: 这个是document对象的一个事件，它将在初始 HTML 文档被完全加载且解析完毕(不等待样式表、图像等非文字资源)之后立即触发。因此，绑定在这个事件上的任何JavaScript代码都会在DOM树准备就绪的时候被执行。
javascript
document.addEventListener('DOMContentLoaded', function() {
// 页面已加载，可以对DOM进行修改或者其他相关操作...
});
- `window.onload`: 此事件则是在整个页面的所有内容包括图片、iframe等内容都已完成下载后才会触发。相较于上述方法，这可能会导致更长时间的延迟，但能保证所有的视图层组件都已经可用：
window.onload = function() {
// 整个页面及其关联资源全部加载完成后执行的操作...
};
或是采用addEventListener形式:
window.addEventListener("load", function(){
// 同样的逻辑...
});
这两种策略可以根据具体应用场景选择合适的时机去执行所需的自动化任务——可能是设置全局变量、调整布局风格、动态注入额外的内容、启动Ajax请求获取后台数据乃至初始化各类库及框架等等。
此外，随着异步编程模式的发展，诸如async属性配合defer属性的应用也在优化"页面加载时执行Js"的行为表现方面发挥着作用。它们分别用于指示浏览器如何优先级排队和何时执行<script>标记内的外部脚本，并能在不影响渲染性能的前提下有效管理各个脚本间的依赖关系。
总之，巧妙运用各种手段实现在页面加载阶段便能够自动执行JavaScript程序已成为现今前端开发领域的基础技能之一。这一特性不仅极大地丰富了网站的表现能力，同时也有力地推动了 Web 应用向更高响应度、更低延迟的方向发展。对于追求极致体验感和服务质量的项目而言，理解并掌握此部分内容至关重要。
标签： 打开页面就执行js
