第四天：编程范式、客户端容器 | 青训营笔记

熊灵欣Mirai
95 阅读4分钟

面向对象编程_五大原则

  • 单一职责原则
  • 开放封闭原则
  • 里式替换原则
  • 依赖倒置原则
  • 接口分离原则

函数式编程

  1. 聚合转发
  • 可缓存
  • 可移植
  • 可测试
  • 可推理
  • 可并行
  1. Currying
  • 闭包
  • 参数重复
  1. Composition
  • 手动组合 -> 提高效率

  1. Functor 容器类型，类型支持队容器内元素进行操作

  2. Monad 去除容器嵌套容器类型

  3. Applicative 直接对两个容器进行操作

  • 移植性规则
  • 重构性规则
  • 交换规则
  • 组合规则

响应式编程

异步离散的函数式编程

  • 数据流
  • 操作符：过滤、合并、转化、高阶
  1. Observable
  • 观察者模式：订阅

Promise/EventTarget超集：Promise超集：数据持续来，不止一次；EventTarget超集：取消订阅就不推送消息；

  • 迭代式模式：推送数据
  1. 操作符
  • 合并
  • 过滤
  • 转化
  • 异常处理
  • 多播
  1. Monad
  • 去除嵌套的Observable

浏览器架构演进

  • 单进程架构
  • 多进程架构（现代）
  • 面向服务架构

渲染进程

  • js引擎：解析js脚本，运行js程序，与GUI渲染互斥，js执行时间过长页面会卡顿
  • GUI渲染：渲染浏览器界面，解析html，css，构建dom树和render树，布局、绘制，和js引擎线程互斥，GUI更新会在js引擎空闲时立即执行
  • 定时器触发：定时器所在线程，setTimeout，setInterval计时完毕后，将会带哦添加到事件队列，等待js引擎执行
  • 网络线程：在XHR、Fench等发起请求后新开一个网络线程请求，如果设置了回调函数，在状态变更时，将回调放入事件队列，等待js引擎执行
  • 事件触发：由宿主环境提供，用于控制事件循环，不断地从事件队列里取出任务执行

JS引擎 VS 渲染引擎

图片.png

JS引擎和渲染引擎相互独立

多线程工作流程

图片.png

Chrome运行原理_如何展示网页

  1. 浏览器主进程：输入处理 -> 开始导航 -> 读取响应 -> 寻找渲染进程
  2. 渲染进程：资源加载（加载子资源 -> 执行脚本）-> 构建（构建DOM -> 构建CSSOM -> 构建渲染树）-> 布局 -> 绘制（构建图层 -> 绘制图层）-> 合成 （光栅化）-> 展示完成
  • 输入处理 ：是URL则直接请求站点资源，是Qurry将输入发送给搜索引擎
  • 开始导航：请求过程中，tab处于loading
  • 读取响应：是HTML交给渲染进程，是其他的交给下载管理器
  • 寻找渲染进程：IPC消息 -> 开始处理 -> 导航结束进入加载阶段
  • 资源加载：加载HTML文档，子资源（图片，css样式和JavaScript脚本）
  • 构建渲染树：构建DOM树（将HTML文本转化为浏览器能理解的结构） -> 构建CSSOM树（将CSS代码转化为可理解的结构 -> 构建渲染树）
  • 页面布局：根据渲染树计算每个节点的位置和大小 -> 绘制元素边框 -> 比案例渲染树，将元素以盒模型的形式写入文档流
  • 页面绘制：构建图层（为特定节点生成专用图层） -> 绘制图层（一个图层分为多个绘制指令，按顺序组成列表，交给合成线程）-> 合成线程接受指令生成图块 -> 栅格线程将图块进行栅格化（将图块转为位图） -> 展示在屏幕上

首屏优化

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

渲染优化

  • GPU加速（新建图层耗时）
  • 减少回流、重绘（不用tab）
  • 离屏渲染：开辟一段内存，在渲染之前将其先渲染一遍，然后需要时直接调用
  • 懒加载：将所需资源提前加载到本地（界面滚动）

JS优化

  • 防止内存泄漏（使用全局变量时，定时器忘记删除 -> 定时器自动删除）
  • 循环尽早break
  • 合理使用闭包（不合理使用会造成内存泄漏，合理时可以减少元素创建）
  • 减少Dom访问（JS引擎和渲染引擎交互费时间，Dom常用则直接缓存）
  • 防抖、节流（多次调用只访问一次）
  • Web Workers：和JS相互独立（图片、视频、音频）

跨端容器

  1. 优点
  • 开发成本低、效率高
  • 一致性体检
  • 前端开发生态
  1. WebView 网页视图，用于加载url，展示内容控件
  • Android
  • IOS
  • 国产Android
  1. WebView使用原生能力
  • JavaScript调用Native
  • Native调用JavaScript

跨端容器 -> WebView <-> Native 通信

没听明白

跨端容器小程序

  • 微信、支付宝、百度
  • 渲染层：webview
  • 双线程，多webview架构
  • 数据通信Native转发

图片.png

跨端容器-React Native

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

跨端容器-Lynx

  • Vue
  • JS Core / v8
  • JSBinding -> Renderer
  • Native UI / Skia

跨端容器-Flutter

  • wideget
  • dart vm
  • skia图形库

跨端容器通用原理

  • UI组件
  • 渲染引擎
  • 逻辑控制引擎
  • 通信桥梁
  • 底层API抹平表现差异
avatar
文章
阅读
粉丝