客户端容器 | 青训营笔记

一、浏览器架构

览器的架构可以分为以下几个主要层:

1. 用户界面层(User Interface):用于展示网页内容和接收用户输入。主要包括地址栏、后退/前进按钮、书签等界面元素。
2. 浏览器引擎层(Browser Engine):负责解析和渲染网页内容。主要包括解析引擎、渲染引擎、JavaScript解释器等组件。

• 解析引擎(HTML Parser)将HTML代码解析为DOM树和CSSOM树。
• 渲染引擎(Rendering Engine)将DOM树和CSSOM树转换为可显示的网页内容。
• JavaScript解释器执行网页中的JavaScript代码。

3. 网络层(Networking):用于网络通信。包括HTTP协议栈、缓存、代理设置等模块。
4. UI后端层(UI Backend):浏览器引擎层和网络层的辅助层,提供网络请求数据、缓存、配置信息等支持功能。
5. 数据存储层(Data Storage):浏览器使用的持久层,用于存储用户设置、用户登录信息、网页缓存、IndexedDB数据等。
6. 安全模块(Security Model):浏览器安全机制的实现层。包括同源策略、XSS防护、沙盒机制等安全功能。
7. 访问控制模块(Access Control):实现网页内容的权限控制,包括CORS标准、使用OAuth授权加载第三方资源等。

一个现代浏览器还包括其他组件,如图形处理模块、多媒体模块、地理定位模块等。

浏览器架构变迁

浏览器各架构对比

多进程架构介绍

二、渲染进程

常见浏览器内核

渲染进程多线程架构

JS引擎VS渲染引擎

多线程工作流程

三、Chrome运行原理

主进程工作流程

• 输入处理

• 开始导航

• 读取响应

• 寻找渲染进程

渲染进程工作流程

• 资源加载

• 构建渲染树

• 页面布局

• 页面绘制

浏览器性能优化

• 首屏优化

• 渲染优化

• js优化

四、跨端容器

跨端是移动互联网时代一个重要的概念。它指的是同一个应用能够运行在多种不同的终端设备上,如手机、平板、PC等。

跨端应用的主要优点有:

1. 统一的用户体验。跨不同终端的应用可以提供统一的界面、互动方式和功能,给用户带来一致的体验。
2. 资源重用。跨端应用可以在不同平台之间共享logic、数据、API等资源,减少重复开发工作。
3. 更广泛的覆盖面。一个跨端应用可以覆盖更多用户群和终端场景,拓展产品的影响力。

跨端的由来

常见的跨端方案

1.webview

1.1webview分类

1.2webview优势

1.3webview使用原生能力

1.4webview<->Native通信

2.小程序

3.React Native/WeeX

4.Lynx

5.Flutter

通用原理

对比