js_延迟(defer)脚本与异步(async)脚本

延迟脚本：

诸如以下的html文档：

<!Doctype html>
<html>
    <head>
        <title>延迟脚本</title>
        <script src="defer.js"></script>
    </head>
    <body>
        <div id="target"></div>
    </body>
</html>

 

其中包含的javascript代码为：

var tg=docuemnt.getElementById("target");
tg.innerHTML="XX";
tg.style.backgroundColor="gery";

 

以前的浏览器对文档进行解析时，当解析到<script>元素时，浏览器会做两件事：

1.停止继续解析，转而根据<script>元素的src属性下载对应的js脚本文。。

2.解析执行脚本文件。

 

当浏览器解析执行脚本文件时，文档内并没有id为”traget“的元素，也因此这段代码是错误的。

 

解决上述问题的传统做法是将<script>写在<body>内部的最后面。

而延迟脚本的作用则是与之相同，即在文档页面没有完全解析之前，不对<script>元素进行解析。

延迟脚本如下：

<script src="defer.js" defer> 
<!--即在script标签内写入一个defer即可-->

 

异步脚本：

当脚本解析占用太多时间时，将脚本设置为异步脚本，浏览器会对脚本解析启动新线程，使得脚本解析与文档解析可以同步进行。它的作用是避免处理脚本时间过长导致页面长时间空白。

html文档：

<!Doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title></title>
    <script src="async.js"></script>
</head>
<body>
    <div>XX</div>
</body>
</html>

 

js代码：

for(let i=0;i<10000;i++){     
    //some code 
}

 

如上代码所示：js代码需要执行循环一万次，在循环完成之前不会向下解析。

 

异步脚本如下：

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

 

 

根据红宝书的描述：

一个页面最好只有一个延迟脚本。

延迟脚本与异步脚本都只适用于外部脚本。

建议异步加载期间不要有修改DOM的行为。

posted @ 2020-02-18 11:59  Syinho  阅读(313)  评论(0)  编辑  收藏  举报