客户端容器——web浏览器以及跨端方案
一、浏览器架构
演进：
1.单进程架构:所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等；
2.多进程架构:主进程、网络进程、渲染进程、GPU进程、插件进程；
3.面向服务架构:将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务
二、渲染进程
多线程架构：内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等（js引擎、网络、GUI谊染、定时器、事件触发）
多线程工作流程：1.网络线程负责加载网页资源；2. JS引擎解析JS脚本并且执行；3. JS解析引擎空闲时，渲染线程立即工作；4.用户交互、定时器操作等产生回调函数放入任务队列中；5. 事件线程进行事件循环，将队列里的任务取出交给JS引擎执行
三、Chrome运行原理
展示网页——输入处理——开始导航——读取响应——寻找渲染进程——资源加载——构建渲染树——页面布局——页面绘制
优化：
首屏优化：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、小程序、RN/WeeX、Lynx、Flutter
webview优势：1.一次开发，处处使用，学习成本低；2.随时发布，即时更新，不用下载安装包；3.移动设备性能不断提升，性能有保障；4.通过JSBridge和原生 系统交互，实现复杂功能
小程序：1.微信、支付宝、百度小程序、小米直达号；2.2.渲染层-webview；3. 双线程，多webview架构；4.数据通信，Native转发
RN/WeeX：1.原生组件渲染；2. React/Vue框架；3. virtual dom；4. JSBridge
Lynx：1. Vue ；2.JS Core/V8；3. JSBinding；4. Native UI/ Skia
Flutter：1. wideget；2. dart vm；3.skia图形库
通用原理：1. UI组件；2.渲染引擎；3.逻辑控制引擎；4.通信桥梁；5.底层API抹平表现差异
