地址栏输入内容后浏览器做了些什么？

知识点回顾

• 进程和线程

  进程（process）：程序的一次执行过程，是一个动态概念，是程序在执行过程中分配和管理资源的基本单位

  线程（thread）：是CPU调度和分派的基本单位，它可与同属一个进程的其他的线程共享进程所拥有的全部资源。

  简单理解，进程是正在执行的应用程序，而线程是应用程序中代码的执行器。一个进程里面可能有一个或者多个线程，而一个线程，只能隶属于一个进程。

  进程与进程通信、进程与线程通信、Node如何管理进程？

  思考问题： 不同的Tab页之间数据共享吗？以Vue单页为例

• 浏览器（Chrome）进程

  • 浏览器进程（Browser Process）：负责浏览器的Tab前进、后退、地址栏、书签栏的工作和处理浏览器的一些不可见的底层操作，比如网络请求和文件访问。
    • UI thread：控制浏览器上的按钮几输入框
    • network thread：处理网络请求，从网上获取数据
    • storage thread：控制文件等的访问
  • 渲染进程（Renderer Process）：负责一个Tab内的现实先关的工作，也成渲染引擎。
    • 一个主线程（main thread）
    • 多个工作线程（work thread）
    • 一个合成器线程（compositor thread）
    • 多个光栅化线程（raster thread）
  • 插件进程（Plugin Process）：负责控制网页使用到的插件
  • GPU进程（GPU Process）：负责处理整个应用程序的GPU任务

• 浏览器进程模式

  • Process-per-site-instance（default）：同一个site-instance使用一个进程
  • Process-per-site：同一个site使用一个进程
  • Process-per-tab：每个tab使用一个进程
  • Single process：所有tab共用一个进程

  site 指的是相同的registered domain name（如：baodu.com.cn）和scheme（如：https://）。如a.baidu.com.cn和b.baidu.com.cn就可以理解为同一个site（注意这里要和Same-origin policy区分开来，同源策略还涉及到子域名和端口）？？

  site-instance指的是一组connected pages from the same site，connected是can obtain references to each other in script code。意思是满足下面两种情况并且打开的新页面和旧页面属于上面定义的同一个site，就属于同一个site-instance - 用户通过这种方式点击打开的新页面 - JS代码打开的新页面（如window.open）

进程、线程通信关系图

地址栏输入内容后发生了什么？

思考

• 问题一

document.body.addEventListener('click', event => {
  if (event.target === 'area') {
    event.preventDefault()
  }
})

document.body.addEventListener('click', event => {
    if (event.target === 'area') {
        event.preventDefault()
    }
 }, {passive: true});

• 问题二 一般情况屏幕的帧率是每秒60帧（60fps），对于连续性事件（wheel、mousewheel、mousemove、pointermove、touchmove）一般每秒会触发60-120次，出于性能问题浏览器会如何处理？