script关于async与defer属性的测试

scola666 发布于2019-08-19 14:23 / 3427人阅读

摘要：环境其它版本没有测试，下列简称和分别延迟秒秒和立即，并会在控制台里打印和测试代码做测试步骤不为设定或时页面会在所有加载和执行完后渲染输出和设置为会等的秒延迟后，控制台会立即输出和等的秒后会输出并触发，最后触发会等的秒延迟后，控制台会立即

环境：

chrome31/firefox25/IE11（其它版本没有测试），下列简称chrome/firefox/IE

http://127.0.0.1:8081/test1、http://127.0.0.1:8081/test2和http://127.0.0.1:8081/test3分别延迟5秒、3秒和立即，并会在控制台里打印test1、test2和test3

测试代码：

HTML:





script async defer

nodejs做server：

var http = require("http");
http.createServer(function(req, res) {
    res.writeHead(200, {
        "Content-Type": "text/plain"
    });
    if (req.url == "/test1") {
        setTimeout(function() {
            res.end("console.log("test1");");
        }, 1000 * 5);
    } else if (req.url == "/test2") {
        setTimeout(function() {
            res.end("console.log("test2");");
        }, 1000 * 3);
    } else {
        res.end("console.log("test3");");
    }
    // res.end("Hello World
");
}).listen(8081, "127.0.0.1");
console.log("Server running at http://127.0.0.1:8081/");

测试步骤：

不为script设定defer或async时

页面会在所有script加载和执行完后渲染 ,输出test1、test2和test3,DOMContentLoaded,onload

设置defer

test1为defer ,chrome/IE会等test2的3秒延迟后，控制台会立即输出test2和test3,等test1的5秒后会输出test1并触发DOMContentLoaded，最后触发onload;firefox会等test2的3秒延迟后，控制台会立即输出test2和test3并触发DOMContentLoaded,等test1的5秒后会输出test1，最后触发onload;

test1和test2都为defer时，chrome/IE会立即输出test3，尽管test2比test1先加载完成但是只有等到test1加载完成执行后才继续执行，输出为test1和test2并触发DOMContentLoaded，最后触发onload;firefox会立即输出test3并触发DOMContentLoaded，test2下载完后等test1下载完并执行后才执行，输出test1和test2，最后触发onload

设置async

test1为async ,等test2的3秒延迟后，会立即输出test2和test3并触发DOMContentLoaded,等test1的5秒后会打印test1，最后触发onload

test1和test2都为async时 ,会立即输出test3并触发DOMContentLoaded，test2先加载完先打印test2，test1后加载完打印test1，最后触发onload

结论：

不设置async和defer时，页面会等script下载执行完后继续执行

设置defer时，会下载脚本，但是不会立即执行并且按照script顺序触发

设置async时，会下载脚本，但是不会立即执行并不一定按照script顺序触发

无论是否设置了defer或async，该script会在onload前执行

IE/chrome在设置defer时，与firefox不同，前者会等脚本都执行后才执行DOMContentLoaded，而后者会先于脚本执行

GPU云服务器云服务器 async属性测试async代码关于云桌面与云服务器的问题关于云桌面与云服务器的问题吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/77953.html

Script标签和脚本执行顺序 - 文档加载 - 面向浏览器编程

摘要：相关脚本会立即下载并执行。从上面两个例子，可以充分了解到标签的柱塞式执行。表示该标签并不柱塞，也不同步执行。属性带有属性的脚本，同样会推迟脚本的执行，并且不会阻止文档解析。同时，带有的脚本彼此之间，能保证其执行顺序。原文： http://pij.robinqu.me/Browser_Scripting/Document_Loading/ScriptTag.html 源...

cangck_X 2019-08-19 14:49 评论0 收藏0
脚本的加载和执行

摘要：现在对的使用非常普遍，任何一个站点都会请求大量的脚本，而加载和执行的方式也是各不相同，希望读完这篇文章可以对常用的加载和执行方式有一个整体的认识。总结上文主要介绍了动态创建脚本和的方式去创建异步加载和执行脚本的方式。在打开一个站点的时候，浏览器会去加载各种资源。现在对JS的使用非常普遍，任何一个站点都会请求大量的JS脚本，而加载和执行的方式也是各不相同，希望读完这篇文章可以对常用的加...

TANKING 2019-08-26 11:42 评论0 收藏0
重新认识script标签

摘要：尽管脚本的下载过程中不会相互影响，但页面仍然要等到所有代码下载并完成执行才能继续。 defer和asnyc（只对外部文件有效） defer 在页面完成解析时执行代码，这个属性表明脚本在执行时不会影响页面的构造，在元素中设置这个属性相当于告诉浏览器立即下载但延迟执行 async 相对于页面其他部分异步执行脚本，一般的script标签都是会阻塞页面执行的，没有加上async属性的标签...

Magicer 2019-08-20 11:24 评论0 收藏0
关于外部样式表也许你不知道的事

摘要：如下图所示，外部样式表是否会阻塞解析先不要看答案，可以自己思考和实验一下通过如上图所示，并没有阻塞解析，因为时间线在之后。并且都支持事件回调处理，用于一些初始化工作。为了尽早地触发事件，因为会延迟事件触发。 singsong: 文章中 demo 猛戳这里吧 ✏️最新内容请以github上的为准❗️ 在讲解之前，先看一个问题。如下图所示，外部样式表是否会阻塞 HTML 解析（先不要看答...

RobinQu 2019-08-22 16:58 评论0 收藏0