跨平台解决方案 | 前端基础知识

跨平台解决方案

• 跨平台解决方案简介

• flutter、rn、uni-app比较

  • 在3大主流渲染引擎里，webview、react native/weex、flutter，复杂度依次降低，渲染性能依次上升。（uni-app是双渲染引擎，webview和weex都内置了，随便开发者使用切换）

  • flutter的性能高，除了简单严格，还有一个特点，就是逻辑层与视图层统一，运行在同一套dart虚拟机下。

  性能上的主要问题是，rn、weex的js引擎和原生渲染层是两个运行环境。当js引擎联网获取到数据后，通知原生视图层更新界面时，有一个跨环境的通信折损。同样，当用户在屏幕上操作原生视图层时，要给js引擎发送通知，也会产生通信折损。通信折损其实普遍存在于所有逻辑和视图分离的框架中，包括各家小程序也有这个问题。

  • 动态性

    webview、rn/weex，都有一个特点，可以远程动态载入js代码，可以更新本地的js代码。前端开发者认为动态性是天经地义的，但其实flutter并不支持。

    flutter是有编译优化概念的，如果它提供动态性支持，会影响它的性能。

    除了flutter，rn/weex/uni-app都可以动态热更新。

前端基础知识

• 浏览器的页面渲染机制
  • CSS的加载会在HTML解析到CSS的标签时开始，所以CSS的标签要尽量靠前。
  • CSS链接下面不能有任何的JS标签（包括很简单的内联JS），否则会阻塞HTML的解析。
  • 如果必须要在头部增加内联脚本，一定要放在CSS标签之前。
• 进程与线程
• IoC（控制反转）和 DI（依赖注入）
• WebView性能、体验分析与优化