浏览器知识总结

一、进程和线程

进程：进程是cpu资源分配的最小单位（拥有资源且独立分配）

线程：线程是cpu调度的最小单位（建立在进程上的一次程序运行单位）

二、浏览器

浏览器是多进程的

1. Brower进程【主进程】

2. 第三方插件进程

3. GPU进程【3D绘制】

4. 渲染进程【浏览器内核】内部多线程

a. GUI渲染线程

• 解析html、css
• 构建dom树
• 重绘、重排

b. 执行线程

js引擎线程【js内核】，解析js脚本，运行代码

c. 协助线程

• 事件触发线程【浏览器内核线程】
  控制事件循环。当事件被触发时，把事件的处理函数推入事件队列，等待js引擎线程来执行
• 定时器触发线程
  主要控制setTimeout/ssetIterval，用来计时，计时完毕后，将定时器的处理函数推入消息队列里，等待js引擎
• HTTP异步请求线程
  通过XMLHttpRequest连接后，通过浏览器开启的一个线程，用来监控readyState状态变化，若设置了这个状态的回调函数，则将该状态的回调函数推入消息队列，等待js引擎执行

d. webworker线程

因为js引擎在解析脚本时，会花费很长时间阻塞页面，所以在H5中支持了web worker
web worker为运行脚本提供了一种简单的方法：
- js引擎向浏览器开启一个线程创建worker，且这个线程不能操作dom
- js引擎线程和worker线程通过特定的方式进行通信【postMessage API，需要通过序列化对象与线程进行数据交互】

所以在遇到解析耗时的js文件时，就开启一个web worker线程进行处理，只需要将计算结果交付给主线程

e. service worker线程

实现缓存功能，可使用本地资源，在离线时提供基本的功能
传输协议必须使用HTTPS ，因为涉及到请求拦截，使用HTTPS协议可以保障安全
步骤：

1. 注册service worker
2. 监听事件，缓存要缓存的文件
3. 在下次客户端访问该请求时，通过拦截请求查询是否有缓存，否则就去请求数据

5. sharedWorker进程【页面共享进程】

附加错误处理，可记载更多的脚本
在一个浏览器中只有一个sharedWorker进程，不管被创建多少次

---

web worker 和 share worker区别：

• web worker 属于某个页面，不会和其他的页面共享进程
• 每一个Tab页就是一个render进程需要创建一个新的线程来运行Worker 中的JavaScript程序。
• sharedWorker是浏览器所有页面共享的，不属于某个render进程，可以为多个render进程共享
• 浏览器需要创建一个sharedWorker进程来运行js程序，在浏览器中每个相同的 JavaScript只存在一个SharedWorker进程，不管它被创建多少次。

SharedWorker由独立的进程管理， WebWorker只是属于render进程下的一个线程

浏览器的渲染原理