在HTML中，`<script>`标签用于引入JavaScript文件，通常这些脚本会按照它们在HTML文档中的顺序逐个执行，并且会阻塞页面的渲染，直到当前脚本加载并执行完毕。然而，随着网页变得越来越复杂，大量的JavaScript文件可能会导致页面加载速度变慢，用户体验下降。为了解决这个问题，HTML5引入了`async`和`defer`两个属性，它们允许以非阻塞的方式加载脚本，从而改善页面性能。
**async属性**
`async`属性允许脚本异步加载，这意味着脚本的下载不会阻塞HTML解析。当脚本下载完成后，它会在不影响其他脚本执行的情况下，尽快被执行。然而，使用`async`的脚本执行顺序是不确定的，可能在`window.onload`事件之前或之后执行，这取决于脚本下载的速度。因此，如果你依赖脚本的执行顺序，`async`可能不是一个理想的选择。
例如：
```html
<script async src="dquery.js"></script>
```
在这个例子中，`dquery.js`将被异步加载，一旦下载完成，就会立即执行，但不保证执行顺序。
**defer属性**
`defer`属性与`async`类似，也是为了非阻塞加载脚本，但它保证了脚本的执行顺序。当`defer`被设置时，脚本会在整个HTML文档解析完毕（即DOMContentLoaded事件触发）但`window.onload`事件触发之前执行，按照脚本在HTML中的出现顺序执行。这样，你可以确保脚本按正确的顺序运行，即使它们是异步加载的。
例如：
```html
<script defer src="dquery.js"></script>
```
在这里，`dquery.js`将在DOM解析完成后按照顺序执行。
**浏览器兼容性**
虽然`async`和`defer`在大多数现代浏览器中得到了广泛支持，但为了确保向后兼容，我们可以使用一些JavaScript代码来检测浏览器特性并动态添加这些属性。例如，上述的`lazyload`函数就是一个例子，它创建了一个新的`<script>`元素，设置了`async`属性，并在页面加载完成后添加到文档中。这种方法可以帮助处理那些不完全支持`async`或`defer`属性的老版本浏览器。
**注意事项**
由于异步加载的脚本执行时间不确定，如果脚本之间存在依赖关系，应避免使用`async`。对于依赖于其他脚本的脚本，`defer`可能是更好的选择，因为它保证了执行顺序。同时，由于脚本是异步加载的，它们的执行可能在`window.onload`事件之前，因此在页面加载完成后需要使用脚本的功能时，应该将相关代码放在`window.onload`或`DOMContentLoaded`事件的回调中。
`async`和`defer`属性为优化网页性能提供了有效手段，通过非阻塞加载脚本，可以在不牺牲用户体验的前提下提升页面加载速度。正确理解和使用这两个属性，对于构建高性能的Web应用程序至关重要。
