script defer和async一探

今天几经折腾,终于回家了,最近公司上的事忙了好一阵子,终于可以闲下来,重新在整理一下,又重新了解了一下defer和async在页面加载过程差异。

定义和用法

async 属性规定一旦脚本可用,则会异步执行。

注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。

注释:有多种执行外部脚本的方法:

  • 如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
  • 如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
  • 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <script>

        window.onload = function(){
            console.log("window is loaded")
        }
        document.onreadystatechange = function(){
            console.log(document.readyState)
        }
        console.log("normal laod")
    </script>
</head>
<body>

    <script src="defer/a.js" defer></script>
    <script src="defer/async-defer.js" async defer></script>
    <script src="async/a.js" async></script>
    <script src="async/b.js" async></script>
    <script >
        console.log("last node")
    </script>
</body>
</html>

 

看一下在chrome中执行结果:

normal laod
index.html:24 last node
index.html:12 interactive
a.js:1 defer d
async-defer.js:1 async-defer
a.js:1 async a
b.js:1 async b
index.html:12 complete
index.html:9 window is loaded

执行顺序:

normal > defer > async-defer > async > complete > onload

看似好像都是这样顺序加载没有什么问题,其实在async中,并不是像现在这样看到的 async a async b;当文件加载大或者延迟,是会影响async和defer加载结果。

posted @ 2015-02-16 00:35  river-lee  阅读(165)  评论(0编辑  收藏  举报