标签：width 异步 als 计算 one 事件 item sync on()
首先，我们要明白什么是同步，什么是异步。
同步:代码从上往下执行，执行完上面，下面的才执行。
异步:上面代码没执行完，下面代码也开始执行。
光说是无力地，直接代码举例子，先说同步。
//1.入门案例
var a=1;
var b=2;
var s=a+b;
console.log(s); s=3 //先解析a,然后是b,然后是s，顺序执行，所以这个是同步的
//有不懂得，可以换个顺序试试
var a=1;
var s=a+b;
var b=2;
console.log(s) //NaN 可以看到，当执行a+b时,b还没执行，所以是顺序执行的，同步
//2.进阶案例
console.log("1")
for(var i=0;i<10000;i++){
console.log("aaa");
}
console.log("2")
// 1 aaa 2 for循环中涉及到了时间的延迟，但打印还是顺序的，所以也是同步的
//可以看出，即使涉及到了时间延迟，for还是同步
//3.高级案例
console.log("a");
document.onclick=function(){
console.log("b");
}
console.log("c"); // 结果: a c b
//看打印结果，很多人会认为不是同步的，但实际上 结果是 a b c，只是由于这里加了点击事件
//所以，点击事件是同步的
同步的就说这么多,作为一个前端程序员来说，异步才是重点，下面说一说异步。
异步是执行是，不是按照从上往下的顺序执行，经常是由于时间等待造成的后面代码先前面代码执行。
//1.入门案例
setTimeout(() => {
console.log("aaa");
}, 100);
setTimeout(()=>{
console.log("bbb");
},50) //结果: bbb aaa 可以很清楚的看到后面代码先执行，所以是异步
//2.进阶案例
for (var i=0;i<10;i++){
setTimeout(()=>{
console.log(i) // 结果是10 因为即使设置了0秒，但也是时间延迟了，等到for循环完，setTimeout等待的10次才执行，所以是打印是10 个10
},0)
setTimeout((i)=>{
console.log(i) // 结果是0123456789 因为setTimeout里函数的参数在时间外，所以函数的参数是同步的。
},0,i)
}
//3.高级案例 图片的加载是需要时间的，所以是异步的,为了能够更好计算,需要把异步变成同步。
var s=loadHandler();
console.log(s)
var arr=["1.png","37.png"]
var list=[];
var img=new Image();
img.src="./img/"+arr[0];
var num=0;
img.addEventListener("load",loadHandler);
function loadHandler(){
var m=this.cloneNode(false);
list.push(m);
num++;
if(num>arr.length-1){
console.log(list.reduce((value,item)=>value+item.width,0));
return;
}
this.src="./img/"+arr[num];
}
//预加载是典型的异步变同步，处理图片加载问题的方法。
关于异步，还要一点需要提的是页面加载的过程，在做项目时，每个人都会在html页面中引入js文件和css文件，那么，这些
文件和html标签的加载顺序到底是怎样的，很少人会去在意。因为我们的页面加载的文件都很小，即使出现问题，也无伤大雅，
但是如果文件大了呢？？？
//js文件的引入,也就是<script>标签，我是在head部分引入的，说的也是这里引入的问题，如果有人引入地方不一样，请忽略我说的问题。
//在html页面规定，script标签的执行是同步的(异步阻断)
//容易出现的问题
1.
<script src="./js/a.js" async defer></script>
<script src="./js/b.js"></script> //只要a文件加载完，才会加载b文件 如果在时候在js中有对body里面标签的操作，就会报错，因为这时候还没body
//async 这个单词专门解决这个问题 可以使script的加载变成异步的，这样就可以在js文件中操作标签
2.css文件的引入,<link> 的加载是异步的，即使放在js文件后，也是和js文件一同加载，这样就会造成加载拥塞问题(加载拥塞:加载的过程中通道是固定的，但是会默认js文件
的加载通道很大，这样css文件的就很小，等到js文件加载完，所有文件都不在加载了。常见的情况是:浏览网页时，没有一点样式进去，特别丑)
//为了解决加载拥塞的问题:defer 这个词很专业,让script在所有文件加载完之后再执行。标签：width 异步 als 计算 one 事件 item sync on()
原文地址：https://www.cnblogs.com/94-Lucky/p/13284129.html
