客户端容器-web浏览器以及跨端方案****
浏览器架构****
主要架构模式介绍：
· 单进程架构：所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等
· 多进程架构：主进程、网络进程、渲染进程、GPU进程、插件进程
· 面向服务架构：算是多进程架构的升级版。将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础网络服务
为什么会有单进程架构？
早期受到硬件限制，为了节约资源。
面向服务架构是否会替代多进程架构？
有可能会被替代。
渲染进程****
主要包含以下线程：
· 主线程（Main thread）(下载资源、执行js、计算样式、进行布局、绘制合成)
· 光栅线程（Raster thread）
· 合成线程（Compositor thread）
· 工作线程（Worker thread）
多线程工作流程****
· 网络线程负责加载网页资源
· JS引擎解析JS脚本并执行
· JS解析引擎空闲时，渲染进程立即工作
· 用户交互、定时器操作等产生回调函数放入任务队列中
· 事件线程进行事件循环，将队列里的任务 取出交给JS引擎执行
跨端容器****
为什么需要跨端****
· 开发成本、效率
· 一致性体验
· 前端开发生态
有哪些跨端方案****
· webview
· 小程序
· RN 、Weex
· Lynx
· Flutter
webview****
Webview，即网页视图，用于加载网页Url,并展示其内容的控件。
可以内嵌在移动端App内，实现前端混合开发，大多数混合框架都是基于Webview的二次开发：比如lonic、Cordova、uniapp。
优点：
· 一次开发，处处使用，学习成本低
· 随时发布，即时更新，不用下载安装包
· 移动设备性能不断提升，性能有保障
· 通过JSBridge和原生系统交互，实现复杂功能
Javascript调用Native：
· API注入: Native获取Javascript环境上下文，对其挂载的对象或者方法进行拦截
· 使用Webview URL Scheme跳转拦截
· IOS上window.webkit.messageHandler直接通信
Native调用Javascript：
· 直接通过webview暴露的API执行JS代码
· IOS方法：webview.stringByEvaluatingJavaScriptFromString
· Android方法：webview.evaluateJavascript
Webview 和 Native通信：
1. JS环境中提供通信的JSBridge
2. Native端提供SDK响应JSBridge发出的调用
3. 前端和客户端分别实现对应功能模块
