js运行机制与线程

为什么js是单线程的？
如果在一个线程中对DOM元素进行了某些操作，在另一个线程中又删除了该DOM元素，那么就会产生冲突

ajax可以实现局部刷新，并且在请求处理时仍然可以响应用户操作

浏览器是多进程的，没打开一个页面，就会新增一个进程，浏览器会给新增页签分配内存和cpu

浏览器进程有哪些？：
1、浏览器进程
2、GPU进程
3、渲染进程
4、插件进程
5、网络进程

渲染进程中包含以下线程：
1、GUI渲染线程：与js引擎互斥，当执行js引擎线程时，GUI会pending，当任务队列空闲时才会继续执行
2、js渲染线程：js线程一直等待任务队列中任务的到来，浏览器无论任何时候都只有一个js线程在执行js程序
3、事件触发线程：当js引擎执行代码块setTimeout时，会将对应的任务添加到事件线程中，当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的尾部，等待js线程的处理
4、定时器触发线程
5、异步http请求线程

js是单线程的，并不代表js引擎线程只有一个，js引擎有多个线程，一个主线程

Workers API

使用workers 可以运行一个脚本独立于主线程的后台线程中，主要用于处理主线程中的费时任务，从而允许主线程不会被阻塞

专用worker

只能被单一脚本调用创建后台线程，在worker内，不能直接操作DOM节点，也不能使用window对象的默认方法和属性

主线程与worker线程之间通信

//接收worker发送的消息
const myWorker=new Worker('worker.js')
myWorker.onmessage=function(e){

}
//向worker发送消息
myWorker.postMessage("btn")

SharedWorker

可以被多个脚本调用并创建多个后台线程，前提是这些脚本所在页面同源

const myWorker=new SharedWorker('worder.js')

myWorker.port.onmessage=function(e){}

myWorker.port.postMessage()

//worker.js中处理消息
onconnect=function(e){
	var port = e.ports[0]
	port.onmessage=function(e){
		port.postMessage()	//发送消息给主线程	
	}
}

Service Worker

拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的资源,只用于https