「 客户端容器 | 青训营笔记 」

朱呆呆
25 阅读7分钟

客户端容器

40.jpg

浏览器架构

浏览器架构演进

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

image.png

浏览器架构对比

架构类型扩展性安全性稳定性流畅度
单进程架构低，所有模块运行在同一进程里，访问同一块内存区域，数据没有隔离、新增模块可能会影响原有功能低，三方插件可直接访问操作系统里任意资源低，三方插件漏洞或者某个 tab 页面 JavaScript 脚本问题可能导致浏览器崩溃卡顿，所有页面运行在同一进程中，开启多个页面时明显卡顿
多进程架构中，各进程分配独立的内存区域，有些进程功能较大，耦合度高高，运行在独立沙箱中，不能访问系统敏感资源高，进程相互隔离，当一个页面或者插件崩溃时，不会影响其他进程流畅，每个页面运行在独立的渲染进程中，充分利用系统资源
面向服务架构高，服务模块划分更细，更内聚、耦合性低，易于扩展高，运行在独立沙箱中，不能访问系统敏感资源高，进程相互隔离，当一个页面或者插件崩溃时，不会影响其他进程流畅，每个页面运行在独立的渲染进程中，充分利用系统资源

任务管理器

image.png

多进程分工

进程名称进程描述
浏览器（主进程）主要负责页面展示逻辑，用户交互，子进程管理；包括地址栏、书签、前进、后退、收藏夹等
GPU 进程负责UI绘制，包含整个浏览器全部UI
网络进程网络服务进程，负责网络资源加载
标签页（渲染进程）控制tab内所有的内容，将html、css和JavaScript转换为用户可交互的网页
插件进程控制网站运行的插件，比如flash、ModHeader等
其他进程如上图所示：适用程序Storage/Network/Audio Service等

渲染进程

常见浏览器内核

image.png

多线程架构

内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等

image.png

JS引擎 VS 渲染引擎

  • 解析执行 JS
  • XML 解析生成渲染数，显示在屏幕
  • 桥接方式通信

image.png

多线程工作流程

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

image.png

Chrome 运行原理

如何展示网页

image.png

输入处理

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

image.png

开始导航

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

image.png

读取响应

  • 网络线程接收到 HTTP 响应后，先检查响应头的媒体类型（MIME Type）
  • 如果响应主体是一个 HTML 文件，浏览器将内容交给渲染进程处理
  • 如果拿到的是其他类型文件，比如 Zip、exe等，则交给下载管理器处理

image.png

寻找渲染进程

  • 网络线程做完所有检查后，会告知主进程数据已准备完毕，主进程确认后为这个站点寻找一个渲染进程
  • 主进程通过 IPC 消息告知渲染进程去处理本次导航
  • 渲染进程开始接收数据并告知主进程自己已开始处理，导航结束，进入文档加载阶段

image.png

资源加载

  • 收到主进程的消息后，开始加载 HTML 文档
  • 除此之外，还需要加载子资源，比如一些图片，CSS 样式文件以及JavaScript 脚本

image.png

构建渲染树

  • 构建 DOM 树，将 HTML 文本转化成浏览器能够理解的结构
  • 构建 CSSOM 树，浏览器同样不认识 CSS，需要将 CSS 代码转化为可理解的 CSSOM
  • 构建渲染树，渲染树是 DOM 树和 CSSOM 树的结合

image.png

页面布局

  • 根据渲染树计算每个节点的位置和大小
  • 在浏览器页面区域绘制元素边框
  • 遍历渲染树，将元素以盒模型的形式写入文档流

image.png

页面绘制

  • 构建图层：为特定的节点生成专用图层
  • 绘制图层：一个图层分成很多绘制指令，然后将这些指令按顺序组成一个 绘制列表，交给合成线程
  • 合成线程接收指令生成图块
  • 栅格线程将图块进行栅格化
  • 展示在屏幕上

image.png

前端性能

  • 首屏优化
    • 压缩、分包、删除无用代码
    • 静态资源分离
    • JS 脚本非阻塞加载
    • 缓存策略
    • SSR
    • 预置 loading、骨架屏
  • 渲染优化
    • GPU 加速
    • 减少回流、重绘
    • 离屏渲染
    • 懒加载
  • JS 优化
    • 防止内存泄漏
    • 循环尽早 break
    • 合理使用闭包
    • 减少 dom 访问
    • 防抖、节流
    • Web Workers

跨端容器

跨端原因

  • 开发成本、效率
  • 一致性体验
  • 前端开发生态

跨端方案

  • webview
  • 小程序
  • RN/WeeX
  • Lynx
  • Flutter

WebView

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

常用 WebView 分类

platformwebview内核
Android4.4webviewWebkit
Android4.4以上webviewchromium
Android 国内部分X5 webviewchromium 改造版
IOSUIwebviewWebkit
IOS8 以上WKwebviewWebkit

使用 WebView 优势

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

WebView 使用原生能力

  • Javascript 调用 Native
    • APl 注入：Native 获取 Javascript 环境上下文，对其挂载的对象或者方法进行拦截
    • 使用 Webview URL Scheme 跳转拦截
    • IOS 上 window.webkit.messageHandler 直接通信
  • Native 调用 Javascript
    • 直接通过 webview 暴露的 API 执行 JS 代码
    • IOS webview.stringByEvaluatingJavaScriptFromString
    • Android webview.evaluateJavascript

WebView <-> Native 通信

  • JS 环境中提供通信的 JSBridge
  • Native 端提供 SDK 响应 JSBridge 发出的调用
  • 前端和客户端分别实现对应功能模块

image.png

实现一个简易 JSBridge

interface CallArgs {
  callId: string  // 调用Id，唯一标识
  module: string  // 调用模块
  method: string  // 调用方法 
  data: any  // 参数
}
const Callbacks = {}  // 存放回调函数callId为key
function applyNative = (payload:CallArgs,callback:Funcion) => {
  const Args0: CallArgs = {
    callId: callId,
    module: payload.module || 'layout',
    method: payload.method || 'randomSize',
    data: payload.data
  }
  if (IOS) {
    return window.webkitURL.messageHandler.postMessage(JSON.stringify(Args0))
  } else {
    // Android 对 window 上约定的对象进行拦截
    return window.AndroidBridge(JSON.stringify(Args0))
  }
}

interface ResponseArgs {
  responseId: string  // 回调Id，与callId对应
  errCode: number
  errMsg?: string
  data: unknown
}
// native端调用webview，参数都经过序列化
const applyWebview = (res:string) => {
  const response = JSON.parse(res) as ResponseArgs
  const { responseId } = response
  // 从Callbacks找到对应的回调处理方法
  if (type of Callbacks[responseId] === 'function') {
    Callbacks[responseId](response)
    // 回调后删除该次回调函数
    delete Callbacks[responseId]
  }
}

window.JSBridge = {
  applyNative,
  applyWebview  // 挂载在window上，供native直接调用
}

小程序

  • 微信、支付宝、百度小程序、小米直达号
  • 渲染层 —— webview
  • 双线程，多 webview 架构
  • 数据通信，Native 转发

image.png

React Native/Weex

  • 原生组件渲染
  • React/Vue 框架
  • virtual dom
  • JSBridge

image.png

Lynx

  • Vue
  • JS Core / V8
  • JSBinding
  • Native UI / Skia

image.png

Flutter

  • wideget
  • dart vm
  • skia 图形库

image.png

通用原理

  • UI 组件
  • 渲染引擎
  • 逻辑控制引擎
  • 通信桥梁
  • 底层 APl 抹平表现差异

image.png

跨端方案对比

image.png

avatar
文章
阅读
粉丝