浏览器架构
1.单进程架构：所有模块在同一个进程
2.多进程架构：主进程，网络进程 渲染进程 GPU进程，插件进程，各个部分相互独立
3.面向服务架构：将原来ui，服务器等，作为一个独立的基础服务器
扩展性 安全性 稳定性 流畅度
低 低 低 卡顿
中 高 高 流畅
高 高 高 流畅
主进程：负责展示逻辑，用户交互
GPU进程：负责UI绘制
网络进程：负责网络资源加载
渲染进程（标签页）：控制tab所有内容，将HTML，css等转化为可交互网页
插件进程：控制网站运行
其他进程：其他基础服务
渲染进程-多线程架构
内部是多线程实现，主要负责页面渲染，脚本执行等
js引擎
解析执行js
XML解析生成渲染树，显示在屏幕
桥接方式通信
多线程工作流程
1.网络线程加载网络资源
2.js引擎解析脚本并且执行
3.js引擎空闲时，渲染线程工作
4.用户交互产生回调函数放入任务队列
5.事件线程进行循环，取出任务给js引擎执行
浏览器主进程
输入处理-开始导航-读取响应-寻找渲染进程（资源加载，构建，布局，绘制，合成）
输入处理（如果是URL，直接请求站点资源，如果是query，将输入发送给搜索引擎）
chrome运行原理
1.开始导航
按下回车，UI线程通知网络线程发起请求，来获取内容
请求过程，tab处于loading状态
2.读取响应
网络线程收到HTTP响应，先检查响应头的媒体类型
如果是HTML文件，交个渲染进程
如果是其他类型，如zip，exe，交给下载管理器
3.寻找渲染进程
网络线程做完检查，告知主进程准备完毕，主进程寻找渲染进程
主进程通过ipc消息告诉渲染进程去处理
渲染进程接受数据，并告诉主进程已经处理
4.资源加载
收到主进程消息，加载HTML文档
还有部分子资源
5.构建渲染树
构建DOM树
构建CSSOM树
构建渲染树
6.页面布局
根据渲染树计算节点位置大小
绘制边框
将元素以盒的形式写进去
7.页面绘制
构建图层
绘制图层
生成图块
进行栅格化
展示在屏幕
首屏优化
1.压缩，分包，删除无用代码
2.静态资源分离
3.js脚本非阻塞加载
4.缓存策略
5.ssr
6.预置loading，骨架屏
渲染优化
1.GPU加速
2.减少回流，重绘
3.离屏渲染
4.懒加载
js优化
1.防止内存泄露
2.循环尽早break
3.合理使用闭包
4.减少DOM访问
5.防抖，节流
6.Web Workers
跨端容器
Webview 网页视图 加载网页url
可以内嵌APP内
