延迟脚本和异步脚本是JavaScript中用于控制脚本加载时机的两种重要特性。在原生JS中，这两者能够帮助开发者更好地管理资源加载和执行顺序，从而优化页面性能和用户体验。具体来说：
延迟脚本（defer）是HTML4.0引入的特性，它允许开发者通过在<script>标签上添加defer属性来指定脚本在页面解析完成后才执行。这意味着带有defer属性的脚本不会阻塞页面的加载过程，浏览器会先加载并渲染整个页面，然后才执行这些脚本。在HTML5规范中，defer属性仅适用于外部脚本文件，这些脚本会在DOMContentLoaded事件触发之前执行。简单来说，DOMContentLoaded事件触发表示DOM树构建完毕，此时可以进行DOM操作，但并不代表所有资源如图片、样式表等都已经加载完成。
异步脚本（async）是HTML5新增的特性，它允许脚本文件的加载和执行不阻塞后续的DOM解析过程。与defer类似，async属性也只适用于外部脚本文件，通过async属性标记的脚本文件会被浏览器异步下载，并且一旦下载完成就会立即执行。与defer不同的是，async属性并不保证脚本按照在HTML文档中出现的顺序执行，因此开发者必须确保脚本之间没有依赖性。使用async的目的是为了加快页面的渲染速度，让页面的主体内容先于脚本加载完成，从而提高用户感知到的页面响应速度。
在使用这两个属性时，需要注意以下几点：
1. 如果一个<script>标签同时设置了async和defer属性，那么浏览器会优先遵循async属性的异步加载方式。
2. 如果页面中有多个带有async或defer属性的<script>标签，那么它们的执行顺序并不固定，具体执行时机依赖于脚本文件的下载速度，尤其是async属性的情况。
3. 对于动态插入的<script>标签，大多数现代浏览器会忽略async和defer属性。因此，如果要动态添加带有这些属性的脚本，需要特别注意。
4. 通常情况下，对于那些不依赖于DOM元素、只进行计算或操作的库（如数学库、工具函数等），可以使用async属性，因为其执行顺序不影响这些脚本的功能。而对于那些需要与页面元素交互或依赖于页面结构的脚本，则应使用defer属性，以确保DOM元素已经完全加载完毕。
在实际开发中，根据不同的业务需求和场景，合理地选择使用延迟脚本和异步脚本，可以有效地提高页面的加载速度，改善用户体验。尤其是在移动互联网和带宽有限的环境下，这类技术的优化效果更加明显。开发者需要认真考虑脚本的加载时机以及执行时机，才能保证页面既有良好的性能又能正确地执行预期的脚本操作。
