面试一问：JS的解析是否会影响文档的解析？async、defer 属性

一只大加号
121 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情

前言

让我们来复习一下<script>标签的基本使用

HTML中使用<script>元素插入 JavaScript脚本，通常具有这几个主要属性

1. src：表示包含要执行代码的外部文件
2. async：立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本
3. defer：延迟到`文档完全被解析和显示`之后再执行。

async和defer只对外部脚本文件有效。 如果要通过script元素来包含外部 JavaScript 文件，src 指向外部 JavaScript 文件的链接

<script type="text/javascript" src="example.js"></script>

<script>标签小误区

不能在script中出现</script>字符串

<script type="text/javascript">

function sayScript(){

alert("</script>");
alert("<\/script>");//应该使用转义符的方式

}

</script>

标签使用时需要规范

<script type="text/javascript" src="my.js"></script>
<script type="text/javascript" src="my.js" />//这种格式不规范，浏览器不能得到正确的解析

<script>标签的位置

按照传统的做法，所有<script>元素都应该放在页面的元素中，的目的就是把所有外部文件（ CSS 、JavaScript）的引用都放在相同的地方但是这样会导致用户在打开页面的时候，由于浏览器需要时间加载JS代码，导致dom无法立即显示，因为浏览器是在遇到body标签时候才开始呈现内容的 为了避免这个问题，一般我们把 JavaScript 的引用放在元素中页面内容的后面

<!DOCTYPE html>
<html>
    <head>
        <title>Example HTML Page</title>
    </head>
    <body>
        <script type="text/javascript" src="example1.js"></script>
        <script type="text/javascript" src="example2.js"></script>
    </body>
</html>

defer、async属性

  • 没有defer、async属性的情况下，HTML 文件将被解析，解析到script标签时如果没有延迟和异步属性，则停下html的解析，开始解析JS文件并且执行，等到JS文件执行完后继续解析html，执行的过程可以用图解简洁的看出来。 image.png defer、async属性只适用于外链JS的方式
  • defer属性在 HTML 解析期间下载文件，会将JS延迟到页面解析完后再执行。相当于即使再head中设置了标签，但是浏览器还是会等遇到html标签再去执行有defer属性的JS，defer脚本也保证按照它们在文档中出现的顺序执行，但是实际上设置了defer属性的延迟JS脚本不一定会按照顺序执行，所以红宝书中也指出最好只包含一个延迟defer属性的JS。

image.png

  • async的解析和html的解析是并行的，解析完会立刻执行。

image.png

面试提问:JS的解析是否会影响文档的解析？

注意题目说的是解析，所以我们可以只看蓝色部分，但作为面试，我们应该将解析和执行俩种情况都说出来

  1. 在没有设置其他属性的情况下，JS如果放在头部，那么JS的解析和执行都会影响文档的解析,
  2. 如果设置了defer属性，那么JS的解析和文档的解析是并行的，并且会在文档解析完进行执行JS
    JS的解析和执行不会影响文档的解析。
  3. 如果设置了async属性，那么JS的解析和文档的解析也是并行的，但是JS的解析速度会决定是否影响文档的解析。
    如果JS解析完了HTML文档还没解析完，那么JS执行会影响文档解析。
    如果HTML文档解析完了JS还没解析完，那么JS的执行不会影响文档解析。

如果是在尾部则不会影响，因为浏览器解析到JS的时候文档已经解析完了。

参考链接

avatar
文章
阅读
粉丝