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属性时,需要根据具体情况进行慎重选择。