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)  编辑  收藏  举报