1.<script>标签中的aysnc和defer

1.1.async

   表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载其他资源或等待其他脚本下载。只对外部脚本文件有效。

1.2.defer

   表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。（但在IE7以及更早版本上，对行内脚本也可以指定这个属性）。

1.3.区别：

\	async	defer
叫法	异步执行脚本	推迟执行脚本
执行时间	保证在页面的`load`事件前触发，但可能会在`DOMContentLoaded`之前或之后执行，无法预测	脚本会被延迟到整个页面解析完毕执行，在`DOMContentLoaded`前触发
执行顺序	标记为async的脚本并不能按照它们出现的顺序执行，第二个脚本可能先于第一个脚本执行，它们之间并没有依赖关系，谁先下载完成谁就开始执行	HTML5规范要求脚本应该按照它们出现的顺序执行，因此第一个推迟的脚本会在第二个推迟脚本之前执行
使用场景	脚本并不关心页面中的`DOM`元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据	脚本代码依赖于页面中的`DOM`元素（文档是否解析完毕），或者被其他脚本文件依赖

2.<script>标签的执行：

如果没有使用在<script>中使用defer或ansync,浏览器会按照<script>在页面中出现的顺序依次解释它们。第二个<script>元素的代码必须在第一个<script>元素的代码解释完毕才能执行，第三个则必须等待第二个解释完，以此类推。

3.<script>标签的位置：

放在<head>内，和外部css和javascript文件集中在一起利于管理，但这会意味着必须把所有javascript代码下载，解析和解释完成后，才能渲染页面，若js代码很多，会导致页面渲染有明显延迟，此时浏览器窗口完全空白。所以通常将javascript引用放在<body>元素中的页面内容后面。

4.<noscript>元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <noscript>
        <p>This page requires a Javascript-enabled browser.</p>
    </noscript>
</body>
</html>

在浏览器禁用js,才可以显示noscript内的内容。

点个赞再走吧(^_)

最后编辑于：2021.04.27 10:58:58

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

<script>标签中的aysnc和defer