单线程

什么是单线程？

单线程：只有一个线程，同一时间只能做一件事

原因：避免DOM渲染的冲突

解决方案：异步

 

单线程demo1

// 循环运行期间，JS执行 和 DOM渲染暂时卡顿
var i, sum = 0;
　　for(i=0; i<100000000; i++){
　　sum += i;
}
console.log(sum);

定义一个循环，循环很多次，再打印一个结果，循环那么多次，很耗费时间，在循环过程中，浏览器处于卡顿状态

单线程demo2

//alert不处理，js执行和dom渲染暂时卡顿
console.log(1);
alert('hello');
console.log(2);

不点弹框的确认，不继续走，浏览器卡顿

 

不执行完是不会走下一步的。为什么会有单线程，像后端开发，java,c#都有多线程，可以这个线程做这个，哪个线程做哪个，同时多个线程，做多件事情。但是为什么JS只能是单线程，而且和浏览器渲染是同一个线程。原因就是避免dom渲染冲突，

1、浏览器需要渲染DOM
2、JS可以修改DOM结构
3、JS执行的时候，浏览器DOM渲染会暂停（不断修改，不断重新渲染）
4、两段JS不能同时执行（修改同一个dom就冲突了）
5、webworker支持多线程，但是不能访问dom。也是避免dom渲染冲突

那怎么办呢？也不能一直卡那，很多情况下，我们是不需要等在那里的。

 

解决方案－异步。

console.log(100);
setTimeout(() => {
　　console.log(200);
}, 1000);
console.log(300);
console.log(400);

如果是单线程，1秒钟就在那等着，浏览器卡在那，js也不执行，也关掉，电脑在那呼呼的转。肯定不科学。那么js异步是什么，就是我先打印100，然后1s钟后打印200。我先不管，反正1s以后再执行，先打印300，400，打印之后。还有个1s之后打印200，那么再1s之后打印200.

 

console.log(100);
$.ajax({
　　url:'xxxx',
　　success: function(result){
　　　　console.log(result);
　　}
})
console.log(300);
console.log(400);

也是异步，先把该执行的执行完了，再做定时不定时的等待。不是异步的都执行完了，再看异步中的任务。

 

那么怎么样通过我们先不管，后面再执行，这种真实的实现是怎么样的。这个时候就是事件轮询的过程

 

现在异步的解决方案还是有一些问题

1、没按照书写方式执行，可读性差

2、callback中不容易模块化，回过头来执行，上面的ajax，success就是callback。