客户端容器 ｜ 青训营笔记

阿奎咯
47 阅读5分钟

客户端容器

一、浏览器架构

浏览器架构演进

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

浏览器结构对比

Snipaste_2023-04-20_13-05-22.png

浏览器结构多进程分工

Snipaste_2023-04-20_13-15-55.png

二、渲染进程

1、多线程结构

内部是多线程实现，主要复制页面渲染，脚本执行，时间处理，网络请求等

Snipaste_2023-04-20_13-22-36.png

2、JS引擎 VS渲染引擎

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

Snipaste_2023-04-20_13-25-17.png

3、多进程工作流程

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

Snipaste_2023-04-20_13-27-50.png

三、Chrome运行原理

1、如何展示网页

浏览器地址输入URL后发生了什么

Snipaste_2023-04-20_13-31-12.png

2、输入处理

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

Snipaste_2023-04-20_13-32-46.png

3、开始导航

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

Snipaste_2023-04-21_16-14-41.png

4、读取响应

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

Snipaste_2023-04-21_16-16-19.png

5、寻找渲染进程

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

Snipaste_2023-04-21_16-17-39.png

5.1、资源加载

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

image-20230421161911660.png

5.2、构建渲染树

  • 构建DOM树，将HTML文本转化成浏览器能够理解的结构
  • 构建cSSOM树，浏览器同样不认识css,需要将CSS代码转化为可理解的CSSOM
  • 构建渲染树,渲染树是DOM树和cSSOM树的结合 Snipaste_2023-04-21_16-20-05.png

5.3、页面布局

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

Snipaste_2023-04-21_16-21-17.png

5.4页面绘制

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

image-20230421162232614.png

6、前端性能优化

6.1、首屏优化

  • 压缩、分包、删除无用代码
  • 静态资源分离
  • JS脚本非阻塞加载
  • 缓存策略
  • SSR
  • 预置loading、骨架屏

6.2、渲染优化

  • CPU加速
  • 减少回流、重绘
  • 离屏渲染
  • 懒加载

6.3、JS优化

  • 防止内存泄漏
  • 循环尽早break
  • 合理使用闭包
  • 减少DOM访问
  • 防抖、节流
  • web Workers

四、跨端容器

1、为什么需要跨端？

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

Snipaste_2023-04-21_16-40-08.png

2、有哪些跨端方案

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

Snipaste_2023-04-21_16-41-38.png

2.1、Webview

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

常见webview、Android、IOS、国产Android

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

Javascript调用Native

  • API注入:Native获取Javascript环境上下文，对其挂载的对象或者方法进行拦截
  • 使用Webview URL Scheme跳转拦截
  • lOS上 window.webkit.messageHandler直接通信

Native调用Javascript

  • 直接通过webview暴露的API执行JS代码
  • lOS webview.stringByEvaluatingJavaScriptFromString
  • Android webview.evaluateJavascript
2.1.4、Native通信
  • JS环境中提供通信的JSBridge
  • Native端提供SDK响应JSBridge发出的调用
  • 前端和客户端分别实现对应功能模块

Snipaste_2023-04-21_16-53-58.png

2.2、小程序

  • 微信、支付宝、百度小程序、小米直达号
  • 渲染层-webview
  • 双线程，多webview架构
  • 数据通信， Native转发 Snipaste_2023-04-21_16-57-13.png

2.3、React Native/WeeX

  • 原生组件渲染
  • React/Vue框架
  • virtual dom
  • JSBridge Snipaste_2023-04-21_16-59-02.png

2.4、Lynx

  • Vue
  • JS Core / v8
  • JSBinding
  • Native Ul / Skia Snipaste_2023-04-21_17-01-16.png

2.5、Flutter

  • wideget
  • dart vm
  • skia图形库 Snipaste_2023-04-21_17-03-17.png

2.6、通用原理

  • uI组件
  • 渲染引擎
  • 逻辑控制引擎
  • 通信桥梁
  • 底层API抹平表现差异 Snipaste_2023-04-21_17-04-57.png

2.7、跨端方案对比

Snipaste_2023-04-21_17-05-28.png

avatar
文章
阅读
粉丝