浏览器底层运转

浏览器底层运转

多进程浏览器结构：

• 浏览器进程：控制浏览器标签页外的用户界面（包括地址栏、书签、后退等）
• 网络进程：负责发起网络请求
• GPU进程：负责整个浏览器界面的渲染
• 插件进程：负责控制网站所使用的所有插件
• 渲染器进程：用来控制显示tab标签内的所有内容

1. 当你在浏览器地址栏里输入内容时，浏览器进程的UI线程会捕获你的输入内容，如果访问的时网址，UI线程会启动一个网络进程来请求DNS进行域名解析，接着开始连接服务器获取数据（如果输入的时关键词，会启动搜索引擎来查询）
2. 当网络线程获取到数据后会通过SafeBrowsing检查站点是否安全，当通过返回数据准备完毕后，会通知UI线程，UI线程会创建一个渲染器进程（Renderer Thread）来渲染页面，浏览器进程通过IPC（进程间通信方式）管道将数据传递给渲染器进程进入渲染流程
3. 渲染器进程会将html、css、js等文件进行解析。hmtl解析完成后会获得一个DOM树 => 然后解析css确定每个DOM节点的计算样式 => layout布局阶段：主线程通过遍历DOM和计算好的样式生成 layout tree => Paint绘制 主线程遍历layout tree 创建一个绘制记录表（记录了绘制的顺序）=> 栅格化（现使用的是合成 [Composting] :将页面各个部分分成多个图层，分别对其进行栅格化，并在合成器线程中单独进行合成页面的技术）
4. 合成器线程合成合成器Frame（帧）=> 合成器帧通过IPC传送给浏览器进程 => 将合成器帧传送到GPU => GPU渲染展示到屏幕上（页面发生变化如滚动页面，会生成新的合成器帧再传给GPU）

CRP：（Critical Rendering Path）关键渲染路径：

总：DOM（解析html）=> style(css) => layout tree => paint => layer

JavaScript占用主线程问题解决：（页面每秒60帧的刷新频率）

requestAnimationFrame(): 会在每一帧被调用，通过Api的回调，可以把JS任务分成更小的任务块（分到每一帧），在每一帧使用完前暂停JS执行归还主线程，下一帧开始时主线程就 可以按时执行布局和绘制

JavaScript运行原理

一门动态类型语言（不需预先指定数据类型，可以随意添加、删除属性等），只有在运行期间才知道数据的类型

Just In Time Compliation（JIT）:运行时编译，在运行阶段生成机器代码。

JavaScript引擎：将js代码转换成低级的机器语言并执行，如chrome的V8 引擎，编译流程如下：

优化的V8引擎如何编译和解析js代码：看图

注意：

• 函数只声明未被调用，不会解析生成AST
• 函数只被调用一次，字节码（bytecode）直接被解释器执行
• 函数被调用多次，可能会被标记为热点函数，可能会被编译成机器代码（若之后执行这个函数时，就直接运行优化后的机器代码）；但热点函数发生一些变化时，比如参数类型的变化，会重新回到字节码，然后进行重新生成。

补充：

​ 1、线程定义

• 线程是进程的基本执行单元，一个进程的所有任务都在线程中执行

• 进程要想执行任务，必须得有线程，进程至少要有一条线程

• 程序启动会默认开启一条线程，这条线程被称为主线程或 UI 线程

  2、进程定义

• 进程是指在系统中正在运行的一个应用程序

• 每个进程之间是独立的，每个进程均运行在其专用的且受保护的内存
  3、进程与线程的区别

• 地址空间：同一进程的线程共享本进程的地址空间，而进程之间则是独立的地址空间。

• 资源拥有：同一进程内的线程共享本进程的资源如内存、I/O、cpu等，但是进程之间的资源是独立的。

• 一个进程崩溃后，在保护模式下不会对其他进程产生影响，但是一个线程崩溃整个进程都死掉。所以多进程要比多线程健壮。

• 进程切换时，消耗的资源大，效率高。所以涉及到频繁的切换时，使用线程要好于进程。同样如果要求同时进行并且又要共享某些变量的并发操作，只能用线程不能用进程

• 执行过程：每个独立的进程有一个程序运行的入口、顺序执行序列和程序入口。但是线程不能独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

执行过程：每个独立的进程有一个程序运行的入口、顺序执行序列和程序入口。但是线程不能独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

• 线程是处理器调度的基本单位，但是进程不是。