浏览器架构

• 单进程架构：所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等
• 多进程架构：主进程、网络进程、渲染进程、GPU进程、插件进程
• 面向服务架构：将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务

浏览器架构对比

1、那为什么会有单进程架构？

答：单进程架构的浏览器主要是出于设计简单、资源占用少的考虑。在早期互联网时代，网页的复杂度较低，浏览器的功能也比较简单，因此单进程架构能够满足需求，而且能够在资源有限的计算机上运行。此外，单进程浏览器可以更好地支持一些插件和扩展程序，因为这些程序需要访问浏览器的内部数据结构，单进程架构更容易实现这些功能。

2、面向服务架构是否会替代多进程架构？

答：面向服务架构（SOA）和多进程架构是两个不同的概念，它们并不冲突也不是替代关系。SOA是一种软件设计的架构风格，它将应用程序中的功能模块封装成可重用的服务，通过标准化的接口进行访问和交互。而多进程架构则是一种浏览器架构，用于提高性能、稳定性和安全性。在现代浏览器中，通常采用多进程架构来实现浏览器的功能。因此，SOA和多进程架构并不是相互替代的关系，它们可以同时存在于一个软件系统中，也可以独立使用。SOA适用于大规模、分布式、复杂的企业应用系统的开发，而多进程架构则适用于现代浏览器等需要高性能、稳定性和安全性的应用程序。

渲染进程

常见浏览器内核

• Trident：是微软开发的浏览器内核，主要用于Internet Explorer浏览器上。
• Gecko：是Mozilla基金会开发的浏览器内核，主要用于Firefox浏览器上。
• Webkit：是苹果公司开发的浏览器内核，主要用于Safari和Google Chrome浏览器上。
• Blink：是谷歌公司从Webkit中分离出来的浏览器内核，主要用于Google Chrome和Opera浏览器上。
• EdgeHTML：是微软开发的浏览器内核，主要用于Edge浏览器上。

渲染进程-资源加载

1. 收到主进程的消息后，开始加载HTML文档
2. 除此之外，还需要加载子资源，比如一些图片，CSS样式文件以及JavaScript脚

渲染进程-构建渲染树

1. 构建DOM树，将HTML文本转化成浏览器能够理解的结构
2. 构建CSSOM树，浏览器同样不认识CSS，需要将CSS代码转化为可理解的CSSOM
3. 构建渲染树，渲染树是DOM树和CSSOM树的结合

渲染进程-页面布局

1. 根据渲染树计算每个节点的位置和大小
2. 在浏览器页面区域绘制元素边框
3. 遍历渲染树，将元素以盒模型的形式写入文档流

渲染进程-页面绘制

1. 构建图层:为特定的节点生成专用图层
2. 绘制图层:一个图层分成很多绘制指令，然后将这些指令按顺序组成一个绘制列表，交给合成线程
3. 合成线程接收指令生成图块
4. 栅格线程将图块进行栅格化
5. 展示在屏幕上

JS引擎vs渲染引擎

JavaScript引擎和渲染引擎是浏览器内部的两个重要组件，它们具有不同的职责和功能。

JavaScript引擎是解释和执行JavaScript代码的组件。它将JavaScript代码编译成计算机可以理解的指令，然后执行这些指令以实现网页的交互和动态效果。常见的JavaScript引擎有V8、SpiderMonkey和JavaScriptCore等。

渲染引擎则负责将HTML、CSS和JavaScript等网页资源渲染成用户可以看到的网页。它会解析HTML和CSS代码，然后将它们转化成网页的可视化内容，包括文字、图像和多媒体等。同时，渲染引擎还会执行JavaScript代码，以实现网页的动态效果。常见的渲染引擎有WebKit、Gecko和Blink等。

尽管JavaScript引擎和渲染引擎在浏览器内部扮演不同的角色，但它们是相互协作的。JavaScript引擎会与渲染引擎交互，以便在网页上执行JavaScript代码，而渲染引擎则会依赖JavaScript引擎来动态地更新网页的内容。

Chrome运行原理

Chrome运行原理-输入处理

1. 用户Url框输入内容的后，UI线程会判断输入的是一个URL地址呢，还是一个query查询条件
2. 如果是URL，直接请求站点资源
3. 如果是query，将输入发送给搜索引擎

Chrome运行原理-开始导航

1. 当用户按下回车，Ul线程通知网络线程发起一个网络请求，来获取站点内容
2. 请求过程中，tab处于loading状态

Chrome运行原理-读取响应

1. 网络线程接收到HTTP响应后，先检查响应头的媒体类型(MIME Type)
2. 如果响应主体是一个HTML文件，浏览器将内容交给渲染进程处理
3. 如果拿到的是其他类型文件，比如Zip、exe等，则交给下载管理器处理

Chrome运行原理-寻找渲染进程

1. 网络线程做完所有检查后，会告知主进程数据已准备完毕，主进程确认后为这个站点寻找一个渲染进程
2. 主进程通过IPC消息告知渲染进程去处理本次导航
3. 渲染进程开始接收数据并告知主进程自己已开始处理，导航结束，进入文档加载阶段

跨端容器

为什么需要跨端

• 开发成本、效率
• 一致性体验
• 前端开发生态

有哪些跨端方案

• webview
• 小程序
• RN/WeeX
• Lynx
• Flutter

1、同样是基于webview渲染，为什么小程序体验比webview流畅？

答：小程序和 WebView 的底层实现机制不同，导致小程序在性能和流畅度上相对于 WebView 有一定的优势。 小程序是基于微信客户端的底层架构实现的，具有更好的硬件、软件支持和优化。小程序在启动时会预加载一些资源，提升启动速度和响应速度。而 WebView 在加载网页时需要请求资源、解析 HTML 和 CSS 文件等操作，需要消耗更多的时间和资源。 此外，小程序还有一些针对性优化策略，比如对于一些常用的组件或操作，小程序会进行预编译和缓存，减少了重复操作和资源消耗，也提升了用户体验。 总的来说，小程序在性能和流畅度上相对于 WebView 有一定的优势，但这也与具体应用场景、设备性能等因素有关。

2、未来的跨端方案会是什么？

答：未来的跨端方案很有可能是以Web技术为基础的PWA（Progressive Web App）(渐进式Web应用程序)。 PWA是一种Web应用程序的新兴形式，它结合了Web应用程序和本地应用程序的优点，可以像本地应用程序一样提供离线访问、推送通知、全屏模式、原生体验等功能，同时又可以像Web应用程序一样使用URL进行访问、无需下载安装等。 PWA可以实现跨平台、跨设备的应用程序开发和部署，同时可以兼容不同的浏览器和操作系统。在未来，随着Web技术的不断发展和PWA的不断普及，PWA有望成为跨端方案的主流。 除了PWA，还有一些其他的跨端方案，如React Native、Flutter等，它们可以使用一套代码在不同的平台上构建原生应用程序。这些方案也有不错的发展前景，但相比PWA，它们仍然需要针对不同平台进行适配和优化。

总结

• 浏览器进程是浏览器运行时的核心进程，它负责管理和协调浏览器的各个模块，包括用户界面、网络请求、JavaScript运行、渲染页面等。浏览器进程还负责管理子进程，如渲染进程、插件进程、GPU进程等。每个类型的进程都有不同的功能和权限，它们通过IPC（进程间通信）来协调和交互。浏览器进程还负责处理用户输入、提供安全保护、管理资源等任务。

• 渲染进程是浏览器中的核心进程之一，负责将HTML、CSS等资源渲染成可视化的页面。渲染进程是多进程架构的重要组成部分，每个标签页都运行在独立的渲染进程中，这样可以提高浏览器的稳定性和安全性。具体来说，渲染进程主要包括以下几个模块：

1. HTML解析器：将HTML文档解析成DOM树。
2. CSS解析器：将CSS解析成CSSOM树。
3. 布局引擎：计算DOM元素的位置和大小。
4. 渲染引擎：将DOM树和CSSOM树组合成渲染树，并生成绘制指令。
5. 绘制引擎：根据绘制指令将页面绘制到屏幕上。

• Chrome运行原理，输入处理>开始导航>读取响应>寻找渲染进程，浏览器输入处理的流程一般为用户Url框输入内容的后，UI线程会判断输入的是一个URL地址呢，还是一个query查询条件，如果是URL，直接请求站点资源，如果是query，将输入发送给搜索引擎。开始导航是当用户按下回车，UI线程通知网络线程发起一个网络请求，来获取站点内容，请求过程中，tab处于loading状态。读取响应是浏览器接收到来自服务器的响应，它是由 HTTP 头和消息体组成的，如果是一个HTML文件则将内容交给渲染进程，如果是Zip则交给下载管理器。寻找渲染进程是当网络线程做完全部检查后，会告诉主进程数据准备完毕，主进程确认后寻找一个渲染进程。

• 跨端容器是一种技术，它可以让开发者使用一套代码，在不同的平台上运行应用程序。这些平台可以包括桌面浏览器、移动应用程序、智能电视和其他设备。跨端容器可以帮助开发者简化应用程序的开发和维护，同时提高应用程序的可靠性和性能。跨端的好处是开发成本低、效率高，一致性体验，前端开发生态。目前常见的跨端方案有webview、小程序、RN/WeeX、Lynx、Flutter等。