美文网首页让前端飞@IT·互联网
HTML5 中的新属性 async和defer区别

HTML5 中的新属性 async和defer区别

作者: 柏龙 | 来源:发表于2017-04-12 17:05 被阅读0次

    浏览器支持:

    Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 async defer 属性。

    简述:

    <script async src="common.js"></script>
    

    async 脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)

    <script defer src="index.js"></script>
    

    defer 脚本将在页面完成解析时执行,但 index.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

    <script src="index.js"></script>
    

    没有 deferasync,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

    实例代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML5 中的新属性 async和defer区别</title>
    </head>
    <body>
        <script async src="./common.js"></script>
        <script defer src="./index.js"></script>
        <script>
            console.log(1111);
        </script>
    </body>
    </html>
    

    运行结果:

    1111
    index.js
    common.js
    

    相关文章

      网友评论

        本文标题:HTML5 中的新属性 async和defer区别

        本文链接:https://www.haomeiwen.com/subject/jivmattx.html