js异步

异步，通俗点说吧，给你一个工作，这份工作有几个任务，大家现在开始同时做，你做你的任务，我做我的任务，大家互不妨碍阻塞。异步执行的时间就是最后完成该工作花费时间最多的那位了，也就是求最大数。

同步，和异步就不一样了，给你几个任务，必须在前者执行完成之后才能轮到下一个任务开始。也就是一种完成-开始的逻辑关系，第一个人开展任务的时候会阻塞后一个人开始，最终所花费时间是所有执行时间的总和。

在js中，异步怎么体现呢？我们看以下代码：

function test(){

$.ajax({

      url:”test”,

      success: function(){

              alert(“成功”);

      }

        });

       alert(“0”);

}

test(); //执行

然后我们很惊奇的发现先alert(0),然后才执行了alert(“成功”);

ajax执行需要请求后台，需要时间，所以alert(“成功”)在后执行。而alert(0),这样简单的程序，在一秒钟估计可以执行成千上万次

异步不会阻塞后面代码的执行，看上面的代码就知道了。ajax并不会阻塞后续代码，所以就有了两段代码同时开工的现象，test function执行的总共时间，也就是ajax的请求成功为止的时间。

在js中，异步的呈现方式都是以回调函数来展现的。那么在这上面代码中，success function就是一个执行成功后的回调函数。什么叫回调函数，看我回调函数的文章就知道，然后再好好思考下，大概你就知道是怎么回事了。

浏览器中最先搞出来的两个异步API就是setTimeout和setInterval。然后出现各种事件触发的回调。再然后IE率先出现了XMLHttpRequest对象来做ajax异步刷新，但这些都会拥有一个回调函数。

那么在js中为什么需要异步呢？

因为js是一个单线程执行的脚本语言，这意味着，一个函数从头到尾执行完之后，才能执行另一个函数。单线程不像多线程，可以同时启动N个程序执行。单线程做页面更新、鼠标事件处理、计时器都需要排队。如果有一个方法执行时间特别长，那么就会阻塞后续代码的任何操作，会出现网页页面卡停的不良效果，你以为浏览器卡死掉了，其实他只是在执行代码，阻塞了一切操作。所以要解决这一的情况，我们就需要去使用异步，可以让我们边更新UI边执行程序。

下面讲一个页面load资源的知识：

1.domNode.appendChild的方式异步执行的（包括append一个<script>节点也是异步的）

2.html文件中的<script>标签中的代码或src引用的js文件中的代码是同步加载和执行的(较新的浏览器对阻塞的 js 可以并行加载了，但执行依然是同步的)

3.html文件中的<script>标签中的代码使用document.write()方式引入的js文件是异步执行的

4.html文件中的<script>标签src属性所引用的js文件的代码内再使用document.write()方式引入的js文件是同步执行的

5.<image src=””>标签加载资源是异步加载

6.css加载和script一样（把css放在head里面先加载，<script> 放在底部 </body>上面可以起到优化作用，因为加载<script>是同步的嘛，会阻碍后续资源加载，js太多会出现页面空白的现象 ）