chrome浏览器基础知识浅谈

浏览器基本知识

学习完后可以回答几个问题

1. 输入 url 是如何运作的
   Answer: 参考 what happen in 导航过程，从更底层的角度来回答
2. 浏览器新打开一个页面会新启动一个进程吗
   Answer: 打开 chrome 的任务管理器，可以发现是不同的页面，启动了不同的进程，他们有不同的进程 id；
   虽然某一渲染进程出了问题不会影响其他进程，但由于不同进程内内存不共享，但不同进程的内存需要常常包含相同的内容，因此为了节省内存，chrome 只能根据设备的硬件条件，限制最多的进程数
3. 备注：这里是看了几篇博文和文档，对于Chrome浏览器关于如何渲染页面部分的一个小结。由于大部分都是一些基础知识点，故采用分列的方式来进行一个简单的梳理。

浏览器基本知识学习

1. 浏览器进程线程基本知识：如Chrome浏览器，由多个进程组成，每个进程又包含多个线程，一个进程内的线程也会协同工作，完成配合
2. chorme采用多进程模式，是使用IPC通信的多进程应用，使用IPC就意味着一个进程可以要求操作系统生成另一个进程来执行不同的任务；同时一个进程反应迟钝，重启这个进程不会影响其他进程的工作
3. chrome顶层存在一个Browser Process是用以协调浏览器的其他进程，并且是负责包括地址栏、书签栏等部分的工作;
**同时负责浏览器底层操作，如网络请求和文件访问**
4. 特别的是，chrome可以根据硬件性能，，如果硬件性能很好，它可以将Browser Process 拆分为几个进程

what happen in 导航过程

其本质是Browser Process的三个线程的是在什么时候如何工作的**仅从浏览器端的处理进行分析**,以及何时调度其他进程进行工作的如Render process(渲染)
这三个线程分别是：UI thread-控制浏览器的按钮及输入框, network thread-网络请求，获取数据,storage thread-控制文件等的访问
分为以下部分：

整体过程

1. 浏览器地址栏输入URL-》UI thread 判断是URL还是query
2. 点击回车-》UI thread通知netWork获取网页内容->network thread开始进行DNS查询，简历TCL链接-》如果遇到重定向301，netWork会通知UI thread进行变更
3. 相应返回后，netWork根据Content-type并判断相应内容-》如为内容为HTML，则通知UI thread数据准备好了-》UI thread通知Render process进行渲染（或者说是Browser process 通过ICP通信方式通知Render process进行渲染）
4.接下来地址栏会更新，页面也会更新，同时history tab也会更新，并且为了让关闭tab或窗口便于恢复，这些信息会存放在**硬盘**中
而我们的JS代码其实都由renderer process控制的；

渲染过程

渲染过程的本质是Renderer process中几个线程的相互作用，最终的目的是在于转换HTML，CSS，JS为用户可交互的web页面，
Renderer process中有四个线程：main thread, worker thread, compositor thread, raster thread
------------资源加载&DOM解析-----------
1. 首先是HTML数据-》解析为DOM
2. 加载次级资源如CSS，JS等额外的资源，主进程在构建DOM时候会逐一请求它们-》调度 Browser process_network thread
3.加载JS文件时候，会停止解析HTML，因为JS可能会改变DOM结构，但是如果添加了async/defer等属性，浏览器就会异步加载，而不会阻塞渲染
------------样式&绘制-----------
4. 解析CSS-》**主线程**
5. 获取布局-》生成DOM树和布局树，布局树相比DOM树的区别在于，只包含可见的元素，如伪元素在布局树上，而display:none不会出现在布局树上-》**主线程**
6. 遍历布局树生成绘制记录（顺序）-》**主线程**
7. 主线程遍历布局树创建层树-》之后compositor thread将大的页面分立成磁贴（就是分割页面为不同的层），然后会收集已经栅格化的磁贴，再组合成帧-》再传给浏览器进程给GPU用以展示 -》**compositor thread 和 raster thread**
=》所以这里就解释了为什么说只要涉及到布局以及绘制调整，就很耗费性能
-》这也是为什么用虚拟DOM的部分原因

浏览器对事件的处理

前端有两个重要的功能一个是展示，一个就是交互，接下来就是浏览器如何对事件的处理;
这里的本质还是对应的进程如何响应与处理
手势信息-》Browser process->再交给Renderer process

1.如果某个区域有事件绑定（non-fast scrollable region）,合成器线程的合成帧的过程就会打断，会把发生在此处的事件发送给主线程。所以，当我们进行事件委托的时候，其实是就让整个页面都变成了non-fast scrollable region,compositor thread就不能独立工作了，而需要和main thread不停通信
2.主线程进行命中测试(hit test）来查找对应的事件目标，命中测试会通过绘制记录查找事件发生坐标下存在的元素