客户端容器3 | 青训营笔记

用户5414359045999
53 阅读2分钟

JS优化

  1. 防止内存泄漏（1.用全局变量会有此风险，用es5、6严格模式，工具能检测到这种风险 2.有一些DOM赋值给js变量，DOM删除但js变量依旧存在，需要手动删除 3.定时器，如果忘记清楚依旧会导致内存泄漏，封装一个会自动清除的定时器）
  2. 循环尽早break
  3. 合理使用闭包（可以减少元素创建，使用单例时即使多次调用也只会创建一个）
  4. 减少DOM访问（js和渲染引擎交互比较久，用className，写style时用csstext一串字符串替代，某个DOM经常使用可以用变量缓存起来）
  5. 防抖、节流（防抖：防止多次提交只会执行最后一次提交结果，节流：保证规定时间内，不管多次调用只会执行一次；窗口resize，滚动，做dom拖拽，手指在屏幕上移动不做这个操作就会非常耗性能）
  6. Web Workers（与js引擎相互独立，不会影响渲染，通过文本传输，如果用大的数据可能比较耗性能，可以在图片、音频、视频方面使用）

跨端容器

为什么需要跨端

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

跨端方案

  1. webview
  2. 小程序
  3. RN/WeeX
  4. Lynx
  5. Flutter

WebView

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

WebView-使用webview的优势

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

WebView使用原生能力

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

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

image.jpeg

image (1).jpeg

跨端容器-小程序

  1. vx，支付宝等
  2. 渲染：webview
  3. 双线程，多webview结构
  4. 数据通信，Native转发

跨端容器-React Native/WeeX

  1. 原生组件渲染
  2. React/View 框架
  3. virtual DOM
  4. JSBridge

跨端容器-Lynx

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

跨端容器-Flutter

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

跨端容器-通用原理

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