5.客户端容器 | 青训营笔记

Aerozw
36 阅读4分钟

客户端容器

①浏览器架构

1.浏览器架构演进

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

image.png

2.浏览器架构对比

image.png

3.浏览器架构-任务管理器

image.png

4.多进程分工

image.png

5.浏览器架构的局限性

  • 单进程架构：硬件要求比较低
  • 面向对象架构：未来有可能替代多进程架构

②渲染进程

1.常见浏览器内核

image.png

2.渲染进程-多线程架构

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

JS引擎 VS 渲染引擎

  1. 解析执行js
  2. XML解析生成渲染树，显示在屏幕
  3. 桥接方式通信

image.png

3.渲染进程-多线程工作流程

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

image.png

一道笔试题的例子

image.png

③Chrome运行原理

1.Chrome运行原理-如何展示网页

image.png

2.Chrome运行原理-输入处理

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

3.Chrome运行原理-开始导航

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

4.Chrome运行原理-读取响应

↓
image.png

5.Chrome运行原理-寻找渲染进程

↓ image.png

6.渲染进程-资源加载

↓
image.png

7.渲染进程-构建渲染树

↓ image.png

8.渲染进程-页面布局

↓ image.png

9.渲染进程-页面绘制

↓ image.png

PS：

  1. 为了减少绘制次数，会进行合成
  2. 栅格化即是将绘图转化成像素点，然后绘制 、

10.前端性能performance

↓ image.png

11.优化手段

（1） 首屏优化

  1. 压缩、分包、删除无用代码
  2. 静态资源分离
  3. JS脚本非阻塞加载
  4. 缓存策略（借助打包工具）
  5. SSR
  6. 预置loading、骨架屏

（2） 渲染优化

  1. GPU加速（opacity,transform等）
  2. 减少回流、重绘（减少tab布局）
  3. 离屏渲染（先渲染好再贴到屏幕上）
  4. 懒加载（将所需资源提前加载到本地）

（3） JS优化

  1. 防止内存泄露（如自己封装定时器等）
  2. 循环尽早break
  3. 合理使用闭包
  4. 减少Dom访问（Dom访问比较耗费时间）
  5. 防抖、节流
  6. Web Workers

④跨端容器

1.跨端原因

  1. 开发成本、效率
  2. 一致性体验
  3. 前端开发生态

image.png

2.跨端方案

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

image.png

3.跨端容器-WebView

image.png

（1）常见WebView分类: image.png

（2）使用WebView优势:

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

（3）WebViw使用原生能力: image.png

（4）WebView-Native通信:

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

image.png

（5）实现一个简易JSBridge:

image.png

4.跨端容器-小程序

  1. 微信、支付宝、百度小程序、小米直达号
  2. 渲染层-Webview
  3. 双线程，多WebView架构
  4. 数据通信，Native转发

image.png

5.跨端容器-React Native/WeeX

  1. 原生组件渲染
  2. React/Vue框架
  3. virtual dom
  4. JSBridge
    image.png

6.跨端容器-Lynx

  1. Vue
  2. JS Core/V8
  3. JSBinding
  4. Native UI/Skia
    image.png

7.跨端容器-Flutter

  1. wideget
  2. dart vm
  3. skia图形库
    image.png

8.跨端容器-通用原理

  1. UI组件
  2. 渲染引擎
  3. 逻辑控制引擎
  4. 通信桥梁
  5. 底层API抹平表现差异
    image.png

9.跨端方案对比

image.png

小程序比WebView流畅：

  • 小程序有预加载，访问的是本地资源
  • 小程序进行了优化，减少了危险的操作

未来的跨端方案：
大概率还是WebView

avatar
文章
阅读
粉丝