设为首页 加入收藏

TOP

浅谈个人对客户端JavaScript同步、异步、执行顺序等概念的理解(一)
2019-10-11 11:20:09 】 浏览:462
Tags:个人 客户端 JavaScript 同步 异步 执行 顺序 概念 理解

一.同步和异步的概念。

同步:即按代码的顺序执行任务。

在下列代码中,按照同步概念,则是先打印1后打印2。

1 console.log(1);
2 console.log(2);

异步:即执行一个任务的同时执行另一个任务。如果按照此概念执行上面代码,则是同时打印出1和2。

 

二.客户端java script中代码的执行顺序

首先,不管是核心java script还是客户端java script都不包含任何线程机制,只有一个单线程执行模型。单线程即指脚本和事件处理程序在同一时间只能执行一个,不能同时执行,没有并发性。(HTML5定义了一种为后台线程的“Web Worker”,本人不甚了解,不做赘述)。

单线程的好处在于编程更加简单,编写代码可以确保两个事件处理程序不会同时运行,操作DOM文档也不会担心有其他线程同时修改文档。但这也意味着java script脚本和事件处理程序不能运行太久,否则会降低网页的可读性,甚至导致浏览器奔溃的假象。那么,一个JS程序是怎么具体执行的呢?

JS的执行任务分为同步任务和异步任务:

同步任务:指除了异步任务之外的其他程序。

异步任务:指各种事件(比如资源载入事件中的loaded、DOMContentLoaded中的回调函数,普通事件中的click,focus,mouseover中的回调函数,window对象的定时器setInterval、setTimeout中的回调函数等等)。

过程:一个js程序执行时,首先将同步任务放入一个执行栈中,先解析同步任务和异步任务并且按顺序执行所有同步任务。当异步任务被触发时(如用户点击鼠标或者按下键盘),异步进程处理则会检测到并将其对应的异步任务转移到任务队列中。同步任务全部执行完毕后,则查看任务队列中是否有未完成的回调函数,如果有则按顺序执行。在此后期间会不断查看任务队列并不断执行,形成事件循环。请看如下过程图

 

三、HTML文件中script标签的执行顺序和其属性defer、async产生的影响

1.在默认情况下,HTML解析器遇到script标签时,是先执行脚本,进入脚本并按上面所述的顺序执行完代码。然后再继续解析渲染HTML页面文档,这是对于内联脚本来说。但同样的,对于一个由src属性指定外部文件的脚本来说,也是先下载并执行该脚本。也就是说,在完成改脚本的下载和执行前,其后面的文档部分都不会显现出来(实际上DOM树已经被载入,但是没被解析为DOM树)。

以下一个1996最先进的JS代码可以证明该概念(当时没有那么多的异步事件API实现异步调用,所以用如下的同步程序来实现动态添加HTML元素)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <h1>Table of Factorials</h1>
 9     <script>
10         function factorial(n) {            //用来实现阶乘的函数
11             if(n <= 1) return n;
12             else return n * factorial(n-1);
13         }
14 
15         document.write("<table>");        //开始创建表格        
16         document.write("<tr><th>n</th><th>n!</th></tr>");     //创建表头        
17         for(var i = 0;i <= 10;i++) {
18             document.write("<tr><td>" + i + "</td><td>" + factorial(i) + "</td></tr>");  //输出十行表格
19         }
20         document.write("</table>");        //表格结束
21         document.write("Generated at " + new Date());   //输出时间戳
22     </script>
    <h2>Table of Factorials</h2> 23 </body> 24 </html>

以下为结果图:

可以得知,脚本的执行在默认的情况下是同步和阻塞的,这是由其单线程模型决定的。但是,对于使用src引入外部文件的script标签来说,其属性defer和async可以改变这种情况,实现异步调用

 

2.对于外联脚本(即由src属性引入外部js文件的脚本),其有两个属性可以改变同步状态——deferasync只要有这两个属性之一即为异步脚本

defer(延迟):有了该属性的外联脚本会延迟解析执行,即等待文档的载入和解析完成并可以操作时(不包括img,即可以理解为DOMContentLoaded事件触发时)才解析执行。看以下代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css" media="screen">
 7         div {
 8             width: 100px;
 9             height:100px;
10         }
11     </style>
12 </head>
13 <body>
14     <script type="text/java script" src="console.js" defer></script>
15     <script type="text/java script">
16         console.log(+new Date());
17     </script>
18     <script type="text/java script">
19         document.addEventListener("DOMContentLoaded",function(){
20             console.log(+new Date());
21         });
22     </script>
23 </body>
24 </html>

console.js的代码

首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇console的各种输出格式 下一篇jQuery AJAX方法详谈

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目