1.单线程
只有一个线程,同一时间只能做一个事情,JS代码需要一行行执行,不是多行执行 --------单线程
只有一个线程是为了避免dom渲染的冲突
- 浏览器渲染dom
-js可以修改DOM
同时修改会有冲突,js执行的时候,浏览器DOM渲染就停止,所以必须一个线程,和浏览器公用一个线程。
-webworker支持多线程,但不能访问dom
那如何解决单线程问题:异步方式
2.解决方案:异步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=p, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>ansyc test</p>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script>
console.log(100)
$.ajax({
url:'./data.json',
success:function(result){
console.log(result)
}
})
console.log(300)
console.log(400)
</script>
</html>
data.json文件
{"a":100,"b":200}
执行上面的JS逻辑得到
输出结果
100
300
400
{"a":100,"b":200}
异步解决了单线程的弊端问题,提高了线程的运行代码效率问题,但也有一个缺点就是执行输出的结果不是按照顺序出来了,第二个AJAX执行的内容输出后是最后一个了不是第二个,对于渲染顺序不一致。
3.实现方式:事件轮询event -loop
针对之前未按照顺序执行出来,如下执行过程
首先JS代码看到同步和异步代码会先执行同步代码在主进程中,再将异步代码有结果的时候放入异步队列,等同步代码执行后,再进入异步列队查看是否有需要执行的异步代码,然后将异步代码执行完后的结果放入主进程中执行,这就是事件轮询机制
解决异步方式
:1.jquery-defered
2.promise
3.async/await
4.generator