[toc] #### 进程和线程 + 程序 被cpu执行的代码，程序存储在磁盘上 + 进程 在内存中运行的程序，cpu资源分配的最小单位 + 线程 一个进程可以有多个线程，线程是cpu调度的最小单位 #### 浏览器包含哪些进程 每次打开一个tab，相当于创建了一个独立的浏览器进程 1. Browser进程：浏览器主进程 + 负责浏览器的界面显示，用户交互，前进后退等 + 负责各个页面的管理，创建和销毁 + 网络资源的管理，下载 2. 浏览器渲染进程（浏览器内核进程) + 浏览器渲染进程内部是多线程的 + 页面渲染，脚本执行，事件处理 3. 第三方插件进程：仅当插件使用时创建 4. GPU进程：最多一个，用于3D绘制 5. SharedWorker进程：webWorker属于渲染进程中的一个线程，是为当前tab进程解析js，而SahredWorker为所有的tab提供 #### 浏览器渲染进程 渲染进程是多线程的 1. GUI渲染线程 + 渲染界面，解析html, css, 构建dom树和renderObject树，布局和绘制 + 重绘和回流会触发渲染线程 + GUI渲染线程和js引擎线程是互斥的，当js引擎执行时，gui线程会被挂起，gui更新会被保存在一个队列里，等到js引擎空闲时执行 2. JS引擎线程 + 也称js内核，处理javascripts脚本程序, v8引擎 + 负责解析javascript脚本，运行代码 + 一个tab页中永远只有一个js线程在运行js程序 + js引擎线程会造成gui渲染线程的挂起，阻塞加载 3. 事件触发线程 + 归属于浏览器，而不是js引擎，用来控制事件循环 + 当js引擎执行代码块，如setTimeOut，鼠标点击，ajax异步请求时，会将对应的任务添加到事件线程中 + 当对应的事件符合触发条件时，会被事件线程添加到待处理队列的队尾，等待js引擎的处理 4. 定时器线程 + setInterval和setTimeout所在线程 + js引擎解析到setTimeout的时候，会交给定时器线程处理，等到计时完毕后，添加到事件队列中 5. 异步http请求线程 + 在XMLHttpRequest在连接后通过浏览器新开了一个线程请求 + 检测到状态变更时，如果存在回调函数，异步线程就会产生状态变更事件，将这个回调函数放到事件队列中。再有js引擎执行 6. WebWorker线程 #### GUI渲染线程和JS引擎线程为什么互斥? 由于js可以操作dom，如果修改dom的同时渲染界面，那么有可能出现渲染线程前后获得的元素数据不一致 #### WebWorker + js引擎向浏览器申请开一个子线程(worker线程)执行js文件，这个子线程不是js引擎线程，所以不能操作dom + js引擎线程与worker线程通过postMessage API通信，worker线程不会阻塞js引擎主线程，也不会阻塞GUI线程，所以不会阻塞dom和js #### 浏览器渲染流程-renderer进程/渲染进程 1.解析html，构建dom树 2.解析css，结合dom树构建render树 3.布局render树，计算元素的尺寸和位置 layout 4.绘制render树，绘制页面像素信息 painting 5.浏览器将各层的信息发送给gpu，gpu将各层合成，显示在屏幕上 #### 普通图层和复合图层 absolute和fixed虽然可以脱离文档流，但任然属于默认复合层 硬件加速will-change，可以单独分配资源，会在上面添加一个新的复合图层，这个里面的变化不会影响外界的重绘重排 #### 从Event Loop谈js的运行机制 js引擎是单线程的，在执行过程中会遇到setTimeout，promise等异步异步任务