向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式，第一种直接在script标签之间插入js代码，第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染，对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟，为了避免这个问题，建议把全部的js引用放在</body>标签之前。
script标签存在两个属性，defer和async，因此script标签的使用分为三种情况：
1.[removed][removed]
没有defer或async属性，
在JavaScript的世界里，`<script>`标签是引入和执行脚本的关键。为了优化网页加载性能，HTML5引入了两个重要属性：`defer`和`async`。这些属性为开发者提供了更多的控制，使得JavaScript的加载和执行更加灵活，避免了因脚本加载导致的页面渲染延迟。
1. **没有defer或async属性**：
当`<script>`标签没有这两个属性时，浏览器会立即下载脚本，并在解析到该标签时执行。这意味着在执行脚本的过程中，浏览器会暂停HTML的解析，直到脚本执行完毕。这种方法对于小脚本或者不依赖于DOM的脚本可能是合适的，但对于大脚本或需要DOM的脚本，可能会阻塞页面渲染，影响用户体验。
2. **async属性**：
添加`async`属性后，脚本将异步加载，不会阻塞页面解析。脚本的加载和执行是并行的，一旦脚本加载完成，不论HTML解析到何处，都会立即执行。这可能导致脚本的执行顺序不可预测，尤其是当有多个`async`脚本时。因此，如果脚本之间有依赖关系，不建议使用`async`，因为它不能保证执行顺序。
3. **defer属性**：
使用`defer`属性，脚本也会异步加载，但其执行会在整个HTML文档解析完成后，DOMContentLoaded事件触发之前进行。这意味着脚本会按照在HTML中出现的顺序执行。这样既保证了页面的正常渲染，又确保了脚本执行的顺序性，适合那些依赖于DOM但不需要在DOM加载时立即执行的脚本。
在理解了这三个不同的加载模式后，我们可以根据实际需求来选择合适的策略。对于不依赖DOM的脚本，如统计代码，`async`属性可能是最佳选择，因为它能尽快地执行脚本，同时不会阻塞页面渲染。对于那些依赖DOM但需要按顺序执行的脚本，使用`defer`属性可以确保在DOM准备就绪后再执行，避免了可能的错误。
在实际项目中，正确使用`defer`和`async`可以显著提升网页性能，特别是对于大型Web应用程序，确保用户在等待脚本加载时能看到页面的基本内容。值得注意的是，`defer`和`async`属性只适用于外部脚本（即使用`src`属性指定的脚本），而不适用于内联脚本。
`defer`和`async`是JavaScript加载策略的重要组成部分，它们帮助开发者平衡脚本执行和页面渲染之间的关系，提高网页加载速度和用户体验。了解和合理运用这两个属性，是优化前端性能、提升网站质量的关键步骤。
