浏览器架构:
1,单进程架构:所有模块运行在同一个进程里,包含网络 插件 js运行环境等
2,多进程架构:主进程 网络进程 渲染进程 gpu进程 插件进程
3,面向服务架构:将原来的ui 数据库 晚间 设备 网络等作为一个独立的基础服务,事多进程架构的升级
浏览器多进程分工:
1,浏览器(主进程): 主要负责页面展示逻辑,用户交互,子进程管理;包括地址栏、书签、前进、后退、收藏夹等。
2,gpu进程:负责ui绘制
3,网络进程:负责网络资源加载
4,标签页(渲染进程)(重点讲):控制tab内的所有内容,将HTML,css,js转换为用户可交互的网页
5,插件进程:控制网站运行的插件,比如flash
6,其他进程:如上图:适用程序Storage/network/audio service等
1,早期内存昂贵,每个进程都有基础框架会占用资源,所以用单线程
2,会替代的,是多线程的演进,在性能比较好的机器会变成面向服务架构,设备差的会退回多线程架构
渲染进程
多线程架构:内部是多线程实现,主要负责页面渲染,脚本执行,事件处理,网络请求等
js引擎vs渲染引擎
1、解析执行js
2、xml解析生成渲染树,显示在屏幕
3、桥连接通信
多线程工作流程:
1、网络线程负责加载网页资源
2、js引擎解析js脚本并执行
3、js解析引擎空闲时,渲染线程立即工作
4、用户交互、定时器操作等产生回调函数放入任务队列中
5、事件线程进行事件循环,将队列里的人物去除交给js引擎执行
chrome原理
1. 输入处理:
1)用户url框输入内容后,ui线程会判断输入的是一个url地址还是一个query查询条件
2)如果是url地址,直接请求站点资源
3)如果是query,将输入发送给搜索引擎
2. 开始导航
1)当用户按下回车,ui线程通知网络线程发起一个网络请求来获取站点内容
2)请求过程中,tab处于loading状态
Chorme读取相应
1、网络线程接收到http响应之后,先检查响应头的媒体类型(mime type)
2、如果响应主题是一个HTML文件,浏览器将内容交给渲染进程处理
3、如果是其他类型文件,比如zip、exe等,则交给下载管理器处理
寻找渲染进程
1、网络线程检查完后,会告知主进程数据已经准备完毕,主进程确认后为这个站点寻找一个渲染进程
2、主进程通过IPC消息告知渲染进程去处理本次导航
3、渲染进程开始接收数据并告知主进程自己已经开始处理,导航结束进入文档加载阶段
gpu加速方法:1,更改透明度 2,用transform画图就会调用gpu
离屏渲染:把要渲染的东西先放入内存中渲染,这样就不会导致打开页面时候一点一点渲染出来的效果了
懒加载:将一些资源存到本地,下次用的时候直接去取
1,一般用全局变量的时候会泄露,或者用dom和定时器的时候,dom和定时器删了但是js里没删