自己尝试了一样不同浏览器有不同的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Script</title>
    <script type="text/javascript">
        document.write("Hello Imooc!");
        document.write("我是写在Script标签中的文字!")
    </script>
    <script type="text/javascript" src="asii.js"></script>
    <!-- async:规定一旦脚本可用,则会异步执行. -->
    <script async="async" src="as22.js "></script>
    <!-- derfer规定当前页面已加载完成,才会执行脚本 -->
    <script defer="defer" src="der33.js"></script>
</head>
<body>
    <p>这里是写在body中的文字!</p>
</body>
</html>

Google 第一出现文字(documen.write的,引入文件的,body的全出来)(像这样你好Imooc！我是写在脚本标签中的文字！这里是写在脚本文件中的文字

这里是写在body中的文字！

)第二弹出defer

第三弹出async

firefox 第一出现async,紧接着出现文字,这两个分不清哪个先出现,但是firefox弹框有遮罩效果我感觉遮罩先出来的,最后出面的是defer

Microsoft Explorer 就是老师出现的练习效果,先出来defer弹框,点击后出现文字,最后出现async弹框

为什么会出面这种情况不理解

我想说一下我理解的这两者的区别,看哪里理解的不对还请老师指点

用script标签引入文件(async和defer这两个文件)如果在body的情况下)

async和defer都是异步加载js文件(因为浏览器的内核是多线程的,async是异步加载,浏览器又开启一个子线程来加载文件但不影响后续文档元素渲染,但如果js文件加载完成之后就会立即执行,

defer也是(异步加载),后续文档元素渲染的加载和js文件同时进行,在所有元素渲染完成之后在执行文件.

这里怎么个同时进行是也开启一个线程吗?还是?)

bao_ 2020-02-08

源自：HTML5属性变化 4-5 script标签属性

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2020-02-09 11:13:09

同学你好，同学对两者的理解是对的，defer也是开始另一个线程，同时加载js的html、css文件，与async不同的是它是加载完后不会执行，会等到整个页面加载完之后再执行。

由于不同的浏览器解析机制存在差异造成的，这是浏览器的兼容性问题，不用太纠结。这个在实际开发中不用，跟着课程简单的了解一下就行。

如果我的回答，帮助到了你，欢迎采纳，祝学习愉快~

收起回答

bao_ 提问者 #1

老师我问一下这个defer是等整个页面都加载完在执行，还是等整个页面都加载完，在执行的同时defer也执行，还是等页面加载完执行完它在执行呢。因为这句话我不太理解(defer脚本执行是在所有元素渲染完成之后，DOMContentLoaded事件触发之前完成；）这个之后之前能举个例子吗

2020-02-09 11:22:25

好帮手慕慕子 2020-02-09 15:25:21

同学你好，对于你的问题，解答如下：

defer是在HTML 文档被完全加载和解析完成时才开始执行，但是，DOMContentLoaded 事件触发实在在 HTML 文档被完全加载和解析完成之后，而且无需等待样式表、图像和子框架的完成加载，所以说此时的页面还没有真正的完全加载完，例如：图片，音频等可能还未完全加载，所以可以认为，在执行defer.js同时页面也还在加载。最终完成真正的加载。
这是一些概念性的理解问题，不太好举例，这个在实际开发中不用，同学跟着课程简单的了解一下就行。

如果我的回答，帮助到了你，欢迎采纳，祝学习愉快~

收起回答