浏览器架构

架构演变

单进程-多进程-面向服务架构

架构对比

单进程：扩展性低、安全性低、稳定性低、流畅度卡顿 多进程：扩展性中、安全性高、稳定性高、流畅度流畅 面向服务架构：扩展性高、安全性高、稳定性高、流畅度流畅

多进程架构

主进程负责页面展示逻辑、GPU进程负责UI绘制、网络进程负责网络资源加载、渲染进程控制tab内的所有内容、插件进程控制网站运行的插件 多线程架构是指在一个应用程序中使用多个线程来执行不同的任务。每个线程都可以独立运行，但它们共享相同的地址空间和资源。这种架构可以提高程序的运行效率，因为它允许多个任务同时执行。例如，在浏览器中，采用多线程架构可以将不同的标签页、插件和扩展程序分别运行在不同的线程中，从而提高浏览器的响应速度和稳定性

渲染进程

浏览器内核

Trident、Gecko、webkit、Blink、Edge、双核

多线程架构

内部是多线程实现、负责页面渲染，脚本执行，事件处理，网络请求

chrome运行原理

主进程任务

输入URL、开始导航、读取响应、寻找渲染进程

渲染进程任务

构建渲染树、页面布局、页面绘制

性能优化实践

首屏：压缩、分包、删除无用代码，静态资源分离、JS脚本非阻塞加载 渲染优化：GPU加速、减少回流、离屏渲染 JS优化:防止内存泄漏、循环尽早break、合理使用闭包

跨端容器

webview

页面视图，用于加载页面url，并展示其内容的控件

小程序、RN\WeeX、lYNX

小程序：微信、支付宝等 weex：原生组件渲染、react、jsbridge lynx：vue、js core、jsbinding

通用原理

跨端容器的通用原理是实现一个容器，给它提供统一的API，这套API由不同的平台各自实现，保证一致的功能。这样，代码可以跨客户端运行，例如WEB、Android、IOS等，实现一次编写，多处运行的目标。