跨端的三种方案原理和对比(WebView,ReactNative,Flutter)

这篇具有很好参考价值的文章主要介绍了跨端的三种方案原理和对比(WebView,ReactNative,Flutter)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、定义

WebView

WebView是什么? 

答: 第一代跨平台框架,代表者为:PhoneGap、微信小程序。

WebView标签是一种用于在网页中嵌入浏览器窗口的HTML元素。它的底层原理是通过原生平台提供的浏览器引擎来实现网页的渲染和交互。

在Android平台上,WebView使用的是Android系统提供的WebView组件,它基于WebKit引擎。

为什么WebView会被认为性能不如ReactNative呢?

答:因为WebView标签(或叫组件),本质上是原生平台提供的一个组件,对它的优化就不是很好。 并且一个完整HTML5页面的展示要经历浏览器控件的加载、解析和渲染三大过程,性能消耗要比原生开发增加N个数量级。 这也就导致了很多无用的性能消耗。

ReactNative

ReactNative具有很强的平台关联性。(也导致它的版本升级优化都有瓶颈)

ReactNative是什么?底层原理是?

答:是第二代跨平台框架,采用原生自带的UI组件代替了核心的渲染引擎,所以这种方案的性能比第一代方案要好很多,代表者就是RN、Weex。

原理:通过在JS层写react代码,然后C++通过JSCore解析JS层的代码并生成一颗DOM树,然后通过Bridge去调用平台层的原生组件(也叫OEM Widget)去组合成一个页面。

简单来说就是 通过写 JS 代码配置页面布局,然后 React Native 最终会解析渲染成原生控件

跨端的三种方案原理和对比(WebView,ReactNative,Flutter),react native,flutter,react.js

Flutter  

Flutter跟平台关联性不大,只要给他一个canvas就行了。

如果说 React Native 是为开发者做了平台兼容,那 Flutter 则更像是为开发者屏蔽平台的概念。

Flutter是什么?底层原理是?

答:Flutter,第三代跨平台框架,号称也确实,一次编写多平台运行(APP,H5,WEB,PC)。

因为他采用了一种「自绘引擎」的方式,和以往的方案都不一样。不使用原生组件进行渲染,他完全自己搞了一套跨平台UI渲染框架,渲染引擎依靠跨平台的Skia图形库来实现,手机平台只需要提供一块画布即可。

为什么网上普遍认为Flutter性能比ReactNative更快?

因为Flutter直接通过渲染引擎Skia(canvas)绘制UI,相当于直接操作GPU。 

ReactNative还有一个桥接的机制,有大量的通讯操作,既会操作CPU,也会操作GPU。

补充:

  1. UI渲染方式:Flutter使用自己的渲染引擎Skia来绘制UI,可以实现高性能的自定义UI。React Native则使用原生组件来渲染UI,通过桥接机制将JavaScript代码转换为原生代码执行。

  2. 性能:由于Flutter使用自己的渲染引擎,可以实现高性能的UI渲染,具有更好的性能表现。React Native在性能方面可能受限于桥接机制的性能损耗,但通过优化和使用原生模块可以提高性能。

如果Flutter都是基于canvas直接去实现组件(例如div,button这些,后面统称Widget),那它如何实现视频等?

具体我就不写了,我也没特别深究。比较特别,这些组件从 flutter的实现原理角度来看,是比较难实现的,也是他弱于RN的一个点。

三个图片,分别是WebView,ReactNative,Flutter

跨端的三种方案原理和对比(WebView,ReactNative,Flutter),react native,flutter,react.js跨端的三种方案原理和对比(WebView,ReactNative,Flutter),react native,flutter,react.js跨端的三种方案原理和对比(WebView,ReactNative,Flutter),react native,flutter,react.js

------

上面只是做个简单总结,更加详细请看下面文字。

参考:「ReactNative」原理剖析 - 知乎

React Native原理之跨端通信机制 - 知乎

全网最全 Flutter 与 React Native 深入对比分析 - 知乎文章来源地址https://www.toymoban.com/news/detail-754731.html

到了这里,关于跨端的三种方案原理和对比(WebView,ReactNative,Flutter)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Flutter】Flutter 如何使用 WebView

    在移动应用开发中,我们有时候需要在应用内部打开网页,而不是跳转到外部的浏览器。这时候,我们就需要使用到 WebView。那么在 Flutter 这个强大的移动应用开发框架中,我们如何使用 WebView 呢? 如果你想深入学习 Flutter,掌握更多的技巧和最佳实践,我有一个好消息要告

    2024年02月16日
    浏览(47)
  • flutter:webview_flutter的简单使用

    最近在研究如何在应用程序中嵌入Web视图,发现有两个库不错。 一个是官方维护、一个是第三方维护。因为没说特别的需求,就使用了官方库,实现一些简单功能是完全ok的 不建议使用,因为效果不怎么样,当然也可能是我太菜不会用,下面这个问题就很难理解为什么会这样

    2024年02月12日
    浏览(49)
  • webview_flutter

    查看webview内核 ​https://liulanmi.com/labs/core.html​ h5中获取设备 https://cloud.tencent.com/developer/ask/sof/105938013 https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/mediaDevices web资源部署后navigator获取不到mediaDevices实例的解决方案(navigator.mediaDevices为undefined)_navigator.mediadevices不存在_乐辞的博

    2024年02月07日
    浏览(37)
  • 封装flutter webview页面

    例如在flutter里面跳转百度页面 需要安装webview_flutter webview_page.dart 使用

    2024年02月03日
    浏览(42)
  • Flutter与Webview交互

    flutter层不支持webview,加载网页的功能还需要借助控件来处理。 通过pub.dev搜索以及对比网上文章,发现了几个比较受欢迎的flutter webview插件; 这三种插件对比图(此图借鉴自网络) 这里详细介绍使用flutter_inappwebview5.3.2版本插件完成交互; 注意:flutter_inappwebview6.xx 版本flu

    2023年04月16日
    浏览(68)
  • flutter开发实战-webview插件flutter_inappwebview使用

    flutter开发实战-webview插件flutter_inappwebview使用 在开发过程中,经常遇到需要使用WebView,Webview需要调用原生的插件来实现。常见的flutter的webview插件是webview_flutter,flutter_inappwebview。之前整理了一下webview_flutter,查看https://blog.csdn.net/gloryFlow/article/details/131683122 这里我们使用fl

    2024年02月07日
    浏览(51)
  • flutter:webview_flutter和flutter_inappwebview的简单使用

    最近在研究如何在应用程序中嵌入Web视图,发现有两个库不错。 一个是官方维护、一个是第三方维护。因为没说特别的需求,就使用了官方库,实现一些简单功能是完全ok的 不建议使用,因为效果不怎么样,当然也可能是我太菜不会用,下面这个问题就很难理解为什么会这样

    2024年02月12日
    浏览(55)
  • flutter 封装webview和使用本地网页

    最先看到flutter_webview_plugin 用法特别简单 flutter_webview_plugin | Flutter Package Plugin that allow Flutter to communicate with a native Webview. https://pub-web.flutter-io.cn/packages/flutter_webview_plugin 缺点: 没有实现js sdk的功能 没有办法 使用JavaScriptChannel 的功能 后面使用webview_flutter webview_flutter | Flutter

    2024年03月26日
    浏览(54)
  • 在 Flutter 中使用 webview_flutter 4.0 | js 交互

    大家好,我是 17。 已经有很多关于 Flutter WebView 的文章了,为什么还要写一篇。两个原因: Flutter WebView 是 Flutter 开发的必备技能 现有的文章都是关于老版本的,新版本 4.x 有了重要变化,基于 3.x 的代码很多要重写。 WebView 的文章分两篇 在 Flutter 中使用 webview_flutter 4.0 | js

    2024年01月18日
    浏览(41)
  • 把Flutter扩展到微信小程序端的探索

    Flutter是声明式UI框架,声明式UI只需要向框架描述UI长什么样子而不用关心框架具体的实现细节,具体到Flutter,上层的UI描述使用底层的skia图形引擎处理就是原生Flutter,而把底层处理换成html/css/canvas就是flutter_web,flutter_mp则是探索在类小程序上对这些UI描述的处理。 我们看一

    2024年04月28日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包