浏览器知识总结

文章目录

  • 一、进程和线程
    • 进程:进程是cpu资源分配的最小单位(拥有资源且独立分配)
    • 线程:线程是cpu调度的最小单位(建立在进程上的一次程序运行单位)
  • 二、浏览器
    • 1. Brower进程【主进程】
    • 2. 第三方插件进程
    • 3. GPU进程【3D绘制】
    • 4. 渲染进程【浏览器内核】内部多线程
      • a. GUI渲染线程
      • b. 执行线程
      • c. 协助线程
      • d. webworker线程
      • e. service worker线程
    • 5. sharedWorker进程【页面共享进程】
        • web worker 和 share worker区别:
      • 浏览器的渲染原理

一、进程和线程

进程:进程是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进程下的一个线程

浏览器的渲染原理

浏览器知识总结_第1张图片

你可能感兴趣的:(浏览器)