defer和async都是用于控制浏览器下载和执行JavaScript的方式的属性。
defer属性的效果是将JavaScript文件的下载放在HTML文件下载完成之后，但在HTML页面的解析过程中，会优先执行JavaScript的下载和解析，但不会中断HTML的解析和渲染。也就是说，当HTML解析完成后，JavaScript文件才会运行，而不会阻塞DOM的解析和渲染。
async属性的效果是让JavaScript文件的下载和执行异步进行，也就是说，JavaScript文件的下载和执行不会阻塞HTML页面的解析和渲染，但这也会导致JavaScript文件的执行时间不可预测，因为它的下载和执行是在HTML页面渲染的同时进行的。在使用async的情况下，无法保证JavaScript文件的执行顺序，所以在涉及到依赖关系的JavaScript代码中使用async会带来问题。
以下是具体的代码例子：
使用defer属性：
<!DOCTYPE html> <html> <head> <title>Defer Example</title> <script defer src="defer.js"></script> </head> <body> <h1>Hello World</h1> </body> </html>
defer.js文件内容如下：
alert("defer script is executed.");
使用async属性：
<!DOCTYPE html> <html> <head> <title>Async Example</title> <script async src="async.js"></script> </head> <body> <h1>Hello World</h1> </body> </html>
async.js文件内容如下：
alert("async script is executed.");
需要注意的是，以上例子中的JavaScript文件都是简单的弹窗提示，实际应用中可能会涉及到更加复杂的操作。同时，以上例子中的defer和async属性都是在单个JavaScript文件的情况下使用的，如果在一个页面中有多个JavaScript文件，不同的文件使用不同的属性会带来不可预测的效果。因此，在使用defer和async属性时，需要根据具体情况进行慎重选择。
