浏览器线程

浏览器是多进程的,浏览器至少包括如下进程

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引擎,而不能自己创建引擎自行处理