浏览器架构演进
单进程架构:所有模块运行在同一个进程里,包含网络、插件、Javascript运行环境等
多进程架构:主进程、网络进程、渲染进程、GPU进程、插件进程
面向服务架构:将原来的UI、数据库、文件、设备、网络等,作为一个独立的基础服务
浏览器架构对比
架构类型 扩展性 安全性 稳定性 流畅度
单进程架构 低 低 低 卡顿
多进程架构 中 高 高 流畅
面向服务架构 高 高 高 流畅
浏览器架构-多进程分工
进程名称 进程描述
浏览器(主进程) 主要负责页面展示逻辑,用户交互,子进程管理;包括地址栏、书签、前进、后退、收藏夹等
GPU进程 负责UI绘制,包含整个浏览器全部UI
网络进程 网络服务进程,负责网络资源加载
标签页(渲染进程) 控制tab内的所有内容,将HTML、CSS和JS转化微用户可交互的网页
插件进程 控制网站运行的插件
其他进程
常见浏览器内核
内核 浏览器 JS引擎
Trident IE4-11 JScript、Chakra
Gecko Firefox SpiderMonkey
Webkit Safari、Chrome、Android浏览器 JavaScriptCore
Bink Chrome、Opera V8
Edge Edge CHakra
Trident+Webkit(Bink) 国产浏览器QQ、360、搜狗、UC等 都有
渲染进程-多线程架构
内部是多线程实现,主要负责页面渲染,脚本执行,事件处理,网路请求等
渲染进程-多线程工作流程
- 网络线程负责加载网页资源
- JS引擎解析JS脚本并且执行
- JS解析引擎空闲时,渲染线程立即工作
- 用户交互、定时器操作等产生回调函数放入任务队列中
- 事件线程进行事件循环,将队列里的任务取出交给JS引擎执行
JS优化
- 防止内存泄漏
- 循环尽早break
- 合理使用闭包
- 减少Dom访问
- 防抖、节流
- Web Workers