单线程

什么是单线程?
单线程:只有一个线程,同一时间只能做一件事
原因:避免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。

猜你喜欢

转载自www.cnblogs.com/wzndkj/p/10971292.html