客户端容器

浏览器架构

浏览器架构演进

• 单进程架构:所有横块运行在同一一个进程里、包含网络、插件、JavaSsript运行环境等
• 多进程架构:主进程.网络进程、澶染进程、GPU进程、插件进程
• 面向服务架构:将原来的UI、数据库、文件、设备、网络等。作为一个独立的基础服务

浏览器架构对比

在单进程架构、多进程架构和面向服务架构这三个架构类型从扩展性、安全性、稳定性和流畅度这几个方面进行对比，如图所示。

渲染进程

常见的浏览器内核

JS引擎和渲染引擎的对比

• 解析执行JS
• XML解析生成這染树.显示在屏幕
• 桥接方式通信

渲染进程的多线程工作流程

• 网络线程负责加载网页资源
• JS引擎解析JS脚本并且执行
• JS解析引擎空闲时，注染线程立即工作
• 用户交互.定时器操作等产生回调函数放入任务队列中
• 事件线程进行事件循环.将队列里的任务取出交给JS引擎执行

chrome运行原理

输入处理

• 用户url框输入内容的后，UI线程会判断输
• 入的是一个UL地址呢，还是一个query查询条件
• 如果是URL.直接请求站点资源
• 如果是query，将输入发送给搜索引擎

开始导航

• 当用户按下回车, U线程通知网络线程
• 发起一个网络请求， 获取站点内容
• 请求过程中. tab处于loading状态

读取响应

如下图所示读取响应的过程

跨端容器

• Webview,即网页视图，用于加载网页Ur,并展示其内容的控件
• 可以内嵌在移动端App内，实现前端混合开发大多数混合框架都是基于Webview的二次开发:比如lonic、Cordova

Webview优势

• 一次开发，处处使用，学习成本低
• 随时发布，即时更新，不用下载安装包.
• 移动设备性能不断提升，性能有保障
• 通过JSBridge和原生系统交互，实现复杂功能