客户端,前端语言串讲 | 青训营笔记

73 阅读1分钟

JS优化

  1. 防止内存泄漏
    • 定时器
  2. 循环尽早break
  3. 合理使用闭包
  4. 减少Dom访问
    • className
    • 用变量缓存
  5. 防抖、节流
    • 多次提交都只会提交最后一次的结果
    • 多次调用都只会执行一次(窗口滚动滚动,dom拖拽)
  6. Web Workers
    • 限制:传输的时候是文本传输的

04 跨端容器

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

有哪些跨端方案

  • Webview
    • 网页视图,用于加载网页url,并展示网页内容的控件
    • 可以嵌入在移动端App内,实现前端混合开发,大多数的混合框架都是基于Webview的二次开发;比如lonic,Cordova
    • 分类:android,ios(safir提供的webview),国产的会使用自己的webview
    • 优势:一次开发,处处使用,学习成本低;随时发布,即时更新,不用下载安装包;移动设备性能不断提升,性能有保障。通过JSBridge和原生系统交互,实现复杂功能

WebView使用原生能力

image.png

image.png

  • 小程序

image.png

  • RN/WeeX
  • Lynx
  • Flutter

跨端容器-通用原理

  1. UI组件
  2. 渲染引擎
  3. 逻辑控制引擎
  4. 通信桥梁
  5. 底层API抹平表现差异 image.png image.png 前端语言串讲 01 前端语言的基本能力
  • html 骨架---最基本的;标签元素
  • css 样式
  • JavaScript 交互,人的结实的肌肉,运动,和控制能力

image.png 02 前端语言的协作配合 03 你不知道的HTML(5)

  • html5 svg & Canvas
    • svg图片放大不会失帧,Canvas图片放大会失帧。
    • WebAssembly 04 拓展分享