1. 浏览器内核：
浏览器内核分为两部分：渲染引擎 和 JS引擎
渲染引擎：获取网页的 html，css，图片等计算网页的显示方式，将其输出到显示器
JS引擎：解析并执行js语言，实现网页的动态效果
不同的内核对网页编写语法的解释也有不同，进而导致同一个页面在不同内核的浏览器下显示出来的效果也会有所出入，这也是前端工程师需要让作品兼容各种浏览器的原因。
2. 浏览器架构：
chromium浏览器的架构
Chromium多进程架构：
早期的web浏览器页面会因为行为不当、浏览器错误、浏览器插件错误引起整个浏览器或当前运行的选项卡关闭。因此将chromium应用程序放在相互隔离的独立的进程中：
· 单个程序崩溃不会损害其他应用程序
· 不影响操作系统完整性
· 每个用户不能访问其他用户数据(内存保护、访问控制)
我们打开Chrome 任务管理器，可以看到系统运行的进程
浏览器进程（包含UI线程、网络线程、存储线程）：控制应用程序的“Chrome”部分，包括地址栏、书签、回退和前进按钮。还处理web浏览器中不可见的特权部分，如网络请求和文件访问。
GPU（图形处理器）进程：处理与其他进程隔离的GPU任务。因为GPU处理来自多个应用程序的请求并将它们绘制在同一个表面上，所以它被分成不同的过程。
第三方插件进程：每个插件对应一个进程，当插件运行时创建
浏览器渲染进程：默认每个标签页创建一个渲染引擎实例。
V8代理解析：之所以不在浏览器进程中运行，是想减轻开发V8的危险。
V8是Google的开源高性能JavaScript和WebAssembly引擎，用C++编写，它实现ECMAScript和WebAssembly，可独立运行或嵌入到任何C++应用程序中，如Chrome和Node.js。
3. 页面导航过程
1 地址栏输入url
选项卡外部的所有内容都由浏览器进程处理（包含UI线程、网络线程、存储线程等）。在地址栏输入url时，由浏览器进程的UI线程处理。
2 处理输入
当用户开始输入地址栏时，UI线程需判断是搜索查询还是URL
查询：发送到搜索引擎
URL：请求URL的网站
3 开始导航
这里需要了解两个概念：Web Worker 和 Service Worker
Web Worker：默默运行在后台的 JavaScript，独立于其他脚本，不影响页面的性能。
Service Worker：在web worker的基础上增加了离线缓存的能力（大概是这意思，不仅仅只有离线缓存）
用户点击进入时：
若有注册设置的Service Worker时则从缓存中加载页面，无需请求网络
若未设置Service Worker时：（这里涉及到http协议）
1) UI线程启动网络调用以获取站点内容，选项卡加载转圈
2) 网络线程通过DNS查找域名对应IP及建立http连接
3) 网络线程接收处理301重定向头。网络线程与请求重定向的UI线程通信，启动另一个URL请求
4 读取响应结果
1) 确定文件MIME类型:
网络线程查看流的前几个字节，响应头中Content-Type头确定MIME数据类型
2) 处理不同MIME文件:
响应文件是HTML，则将数据传递给渲染进程。如果为.zip或其他文件则将数据传递给下载管理器。
3) 安全检查：恶意名单检查 和 跨域读取检查
5 查找到渲染进程
所有检查完成后，网络线程告知UI线程数据已准备就绪，UI线程找到渲染进程以继续渲染网页。
由于网络请求可能需要几百毫秒才能得到响应，为加速此过程，在开始导航网络线程发送url请求时，已经主动进行查找、启动渲染进程，数据接收完成后，渲染进程已备用。
6 提交导航
数据和渲染进程准备就绪后，浏览器进程和渲染进程进行通信，让渲染进程提交导航。渲染进程确认提交完成，导航完成。文档加载开始。(进程间通信：IPC)
1）UI更新：地址栏更新、安全指示器、站点设置UI会反映新页面站点信息
2）选项卡的会话历史记录更新(前进/后退)，为便于关闭浏览器后恢复，历史记录到磁盘
7 初始化load complete
提交导航后，渲染进程将继续加载资源并呈现页面，一旦渲染进程“完成”（onload事件在所有帧上触发执行完成后）渲染，它就告诉浏览器进程加载完毕。
浏览器进程的UI线程就会停止选项卡的加载转圈。
4.页面渲染过程
渲染进程负责选项卡内发生的所有事情。在渲染器进程中又分为如下几个线程：
1）主线程：处理发送给用户的大部分代码。
2）工作线程：处理WebWorker或ServiceWorker （应该是处理js代码）
3）排版线程
4）栅格线程
1 解析
1）构建DOM：上面读取的响应结果如果是html数据，主线程开始解析文本串（HTML），使之成为一个DOM
2）子资源加载：主线程可以逐个请求CSS，JS，图片等外部资源（预加载扫描器提速）
3）JavaScript阻塞解析：遇到<script>时，暂停HTML解析，加载解析执行JS代码。因为JS可能会改变Html的结构导致重新排版
2 确定加载资源方式
在<script>加async或defer属性，浏览器异步加载和运行JS，不阻止解析。
1) async：指示浏览器尽可能异步加载脚本，默认同步加载脚本(async=false)
2) defer：指示脚本要在解析文档之后但在触发DOMContentLoaded之前执行。
3 样式计算
主线程解析CSS并确定每个DOM节点的计算样式，再根据CSS选择器将哪种样式应用于哪个元素。
4 布局
主线程遍历DOM并计算样式，并创建布局树（layout tree, 包含坐标和边界框大小等信息）
5 绘制
知道元素的大小，形状和位置，还需要知道绘制的顺序
主线程遍历布局树以创建绘制记录，绘制记录是绘画过程的一个注释。
6 合成
浏览器知道文档的结构，每个元素的样式，页面的几何形状和绘制顺序，需将信息转换为屏幕上的像素，称为光栅化。
用户滚动页面，则移动光栅框架，并通过更多光栅填充缺失的部分
合成是一种将页面的各个部分分层，分别栅格化，并在合成器线程的单独线程中合成为页面的技术。如果发生滚动，图层已经被栅格化需要合成一个新帧。通过移动图层和合成新帧，可以以相同的方式实现动画。
网友评论