浏览器架构
- 单进程架构
- 多进程架构（现代）
- 面向服务架构（多进程架构的升级版）
任务管理器-多进程分工：
- 主进程（浏览器）
- GPU进程：负责UI绘制
- 网络进程：资源加载
- 渲染进程（标签页）
- 插件进程
- 其他进程
渲染进程
内部是多线程实现：js引擎，GUI渲染，定时器触发，网络线程，事件触发
js引擎vs渲染引擎
解析执行js-xml解析生成渲染树-桥接方式进行两端通信
多线程工作流程
chrome运行原理
浏览器地址输入URL后发生了什么？
答：在浏览器主进程中，处理输入-开始导航-服务器中读取响应-寻找渲染进程---
渲染进程中：资源加载-构建DOM和CSSOM和渲染树-布局-绘制-合成-展示完成，返回主进程
具体细节
处理输入
UI线程判断URL（直接请求站点资源）还是query查询条件（将输入发送至搜索引擎，也是一个站点）
开始导航
回车后，UI线程通知网络线程发起网络请求获取站点内容。请求过程中，tab（标签页）处于loading状态
读取响应
网络线程接收到HTTP响应后，先检查响应头的媒体类型。如果是HTML文件，浏览器将内容交给渲染进程处理；如果是其他类型（如zip或者exe）则交给下载管理器处理。
寻找渲染进程
网络线程数据准备完毕之后告知主进程，主进程为该站点寻找一个渲染进程。主进程通过IPC告知渲染进程，渲染进程开始处理，导航结束，进入文档加载阶段。
渲染进程-资源加载
加载HTML文档，顺便加载字资源，比如图片，CSS样式文件和Javascript脚本
渲染进程-构建DOM、CSSOM，渲染树
DOM树-HTML文本转化为浏览器能够理解的结构
CSSOM-将CSS代码转化为浏览器可理解的结构
渲染树-DOM和CSSOM的结合
渲染进程-页面布局
根据渲染树计算每个节点的位置和大小，在浏览器页面区域绘制元素边框；遍历渲染树，将元素以盒模型的形式写入文件流
渲染进程-页面绘制
构建图层-将图层转化为绘制指令交给合成线程-合成线程接受指令生成图块-栅格线程将图块进行栅格化展示在屏幕上
前端一些优化手段
首屏优化：压缩、分包、删除无用代码；静态资源的分离；js脚本非阻塞加载或者放在包的底部；缓存策略；SSR；预置loading，骨架屏。
渲染优化：GPU加速；减少回流、重绘；离屏渲染；懒加载。
js优化：防止内存泄漏；循环尽早break；合理使用闭包；减少dom访问；防抖、节流；web workers
跨端容器
webview，小程序，react native/weex，lynx，flutter...
通用原理
UI组件，渲染引擎，逻辑控制引擎，通信桥梁，底层API抹平表现差异
