浏览器是多进程的,浏览器至少包括如下进程
1.主进程
输入url,前进,后退,下载等
2.渲染进程
页面渲染,js执行等
渲染进程
渲染进程是多线程的,包括
1.JS引擎线程
2.GUI渲染线程
3.事件线程
4.定时线程
5.异步请求线程
6.Worker
JS引擎线程
js引擎单线程为ecmascript描述的规范,指js引擎有且只有一个
其他线程如果需要执行js,最终需要通过特定的语法,回调一段代码块,而这个代码块依然由唯一的js引擎进行执行
GUI渲染线程
主要用于重绘和回流,属于即时执行,一般没有返回结果,即没有可写代码块的地方(有的话很容易无限循环)
特殊情况是整个html渲染时的生命周期,会通过全局事件如DOMContentLoaded,onresize进行描述
最大的特点是与js互斥
为了完成60FPS,一次渲染大概要16ms内
又与js互斥,js函数执行的最长时间也是16ms
事件线程
参考js事件模型设计
事件触发后,将具体指向丢给js(队列)依次进行处理
参考页面卡时,对按钮多次点击无反应后,会在某一点突然鬼畜
或者随便找个节点,注入以下事件,疯狂乱点,看看能执行几次
$0.onclick = ()=>{
//等待一秒
var now = Date.now();
while(Date.now() - now<1000){
}
console.log('over')
}
事件的触发在事件线程上,对开发人员绝对封闭,在不变源码的情况下把单击变双击是不存在的,触发的内容(代码块),实在 JS引擎线程上
定时线程
参考setTimeout
本身就是无限轮询的一段程序
时间一到,将需要执行的函数丢该 JS引擎线程的队列中
大概是4ms的间隔,不执行复杂的计算,单纯的获取指向,丢给队列,比GUI简单多了
异步请求线程
通过GUI开启,如初始化,动态添加script等方式,遵循GUI的生命周期规则,即等待js下载并执行完在继续
通过xhr开启,onreadystatechange中的回调即为回调代码块
xhr是解决复杂计算的解决思路,不光是前端计算慢,更多的是精度
Worker
开辟新线程,但不能操作dom
再次强调,js单线程指js解析引擎有且只有一个,其他线程需要解析js都需要通过回调/异步处理的方式交给js引擎,而不能自己创建引擎自行处理
