客户端容器 | 青训营笔记

120 阅读2分钟

浏览器架构演进

单进程架构:所有模块运行在同一个进程里,包含网络、插件、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