html文件的js代码什么时候被执行
html文件的js代码什么时候被执行
JavaScript在HTML文档中的角色
JavaScript（JS）作为网页开发的重要组成部分，能够为静态的HTML文档添加动态功能。无论是表单验证、用户交互还是动画效果，JS都在其中扮演着不可或缺的角色。JS代码的执行时机对于页面的加载性能、用户体验及功能实现至关重要。
JavaScript执行的时机
JavaScript代码可以嵌入到HTML文档的多个位置，其执行时机也因此会有所不同。通常，JS可以放置在
标签内或标签内。下面将详细分析两种情况下，JS代码的执行顺序。1. **在
标签中**: 将JavaScript代码放置在标签中时，浏览器会在页面内容开始呈现之前就执行这些脚本。这意味着，如果你的JS脚本中涉及对DOM元素的操作，可能会因为DOM尚未完全加载而导致错误。因此，通常建议在中添加如事件监听器等初始化代码，而将实际的DOM操作放在文档完全加载后执行。2. **在
标签中**: 将JavaScript代码放置在标签中时，尤其是在最底部，浏览器会在所有HTML元素都加载完成后再加载和执行JS。这是提高页面加载性能的好方法，因为这样可以避免在DOM元素未加载时执行可能出错的代码。DOMContentLoaded事件与window.load事件
为了解决JS执行时机的问题，JavaScript提供了一些事件来帮助开发者更好地控制代码执行的时机。最常用的两个事件为DOMContentLoaded和window.load。
1. **DOMContentLoaded事件**: 当浏览器完成初始的HTML文档加载并解析时触发，而不必等待样式表、图像和子框架的加载。因此，开发者可以在这个事件触发时执行操作，通常适合需要快速访问DOM元素的代码段。
2. **window.load事件**: 与DOMContentLoaded不同，window.load事件会在整个页面，包括所有依赖的资源（如图片和CSS）都加载完成后才触发。这个事件适合那些依赖于页面全部资源的操控，比如需要获取外部图像高度、宽度等信息的情况下。
使用defer和async属性
除了上述提到的基本时机外，还有两种属性可以用于提高JavaScript文件的加载性能，分别是defer和async。
1. **defer属性**: 当在
