为什么 Android、iOS 上没有 Electron 这样能一键把网站变成用起来接近 Native 体验的框架？我以前也是天天黑电子垃圾，相当于往电脑上装了十几个 Chrome 、ffmpeg 。但是 Electron 这几年进步确实猛

[drymonfidelia]

Electron 这几年进步确实猛，前段时间发现 Electron 内存占用已经比我用 Avalonia 写的还小了，更是比 Flutter 流畅几十倍，而且相比这些多端 UI 框架前端的东西感觉成熟很多，资料非常好找。尤其是我需要加一些 UI 特效的时候，前端用 CSS 可以非常容易实现甚至有一堆开源模板可以直接套，还有一堆 lottie 之类的现成轮子，用这些多端 UI 框架就非常难实现。

[w568w]

几句话看得我一愣一愣的…

> Electron 内存占用已经比我用 Avalonia 写的还小了
Electron 内存占用小于 100 MB 了？

> 比 Flutter 流畅几十倍
？？这哪来的数据？什么平台上测试的？ Flutter 在 Windows 上可以稳 60fps ，Electron 能跑到几千 fps ？

[minami]

Ionic 还活着，另外，牢 Cordova ，想你了

[drymonfidelia]

@w568w Electron 估计是 Chromium 牛逼的原因，在复杂 UI 下内存占用比 Avalonia 小很多，Avalonia 组件一多就要 500MB 以上内存，Electron 只有 200~300MB
比 Flutter 流畅几十倍：我以前测试过一个页面里面放 2000 个 100*100 图标，拖动连 2fps 都稳不住，Electron 可以稳定 60fps 不掉帧

[drymonfidelia]

@w568w 例如 Bitwarden 的客户端，已经算没有做特别优化的，主页面总内存占用在 240MB 左右，我用 Avalonia 写了一个同复杂度的 Demo ，用了 460MB

[drymonfidelia]

@drymonfidelia 240MB 还是在后台挂了一个月的结果，我重启了一下 Bitwarden 到主页面 4 个进程总内存占用才 145MB ，虽然这个客户端用户体验不怎么经常卡死，一眼套壳网页的感觉

很 Native 的案例也很多 Spotify VSCode 之类的

[debuggerx]

@drymonfidelia 目测经典的长列表渲染问题，flutter 没用列表复用写法。只要写对了 60fps 不成问题，内存占用能少一半。

[w568w]

@drymonfidelia #2

> 我以前测试过一个页面里面放 2000 个 100*100 图标，拖动连 2fps 都稳不住

你写错了，问题如楼上所述。Flutter 列表 handle 上万项都不是问题。

[dreamk]

@drymonfidelia 和 flutter 的实现有关
https://superlistapp.github.io/super_sliver_list/#/
10*10w ，一共一百万条数据的长列表，流畅、自渲染、跨平台且保证一致性

[drymonfidelia]

@debuggerx
@w568w 我觉得不是列表的问题，可能是 Flutter 图片渲染性能比较差，当时测完代码就删了

[livin2]

在移动平台上搞你说的这些测试，有没有可能硬件/系统调度影响更...?😂
不说性能，Android 自己的碎片化导致的 webview 版本差异... 国内厂可没法学 play 每台都 webview 自动更新啊😂
假设 web 轮子用了些很"现代浏览器"的 JS 特性，而项目 build target 不得不博爱，最终一大托 polyfill,那么这个内存占用... 😂
那更别说 ios 的 webview 都是 webkit/jscore ，这也吃不上 V8 啊😂

electron 体验，先等英国 CMA 能复刻欧盟操作硬干 webkit 再说吧😂

[w568w]

@drymonfidelia 楼上发的项目你看看吧。数据摆在那里，我自己的项目也用了这个库。

另外说 Chromium 比 Flutter 快，从技术上也是没道理的。因为两者都是用的 Google 的 Skia 2D 渲染引擎（ Android 原生也是）。都是一个师傅，破不了招啊。

[jeesk]

谁来适配 webview ？

工作量半年起步（我帮公司适配过，现在都不敢升级），你干不干？

ionic 官方都不做的玩意。

拼多多套壳可比你淘宝天猫美团的 flutter 快 多了，还天天发技术报告。

[okakuyang]

不是有几个框架都是干这个的

[Tabjy]

> 一键把网站变成用起来接近 Native 体验

PWA ，请。PWA 完美符合这句话的要求，问题是现在的问题是软件厂商宁愿用 web 技术套壳做 native app 也不愿意正儿八经做 web first 然后用 PWA ，至于原因就是老生常谈的互联网越来越封闭的趋势了。

> 为什么 Android 、iOS 上没有

PWA 在 Android 上体验挺好的，iOS 上有 PWA 但是被恶意做得极其残废，不过欧盟好像在立法整顿这个事情。

[jchnxu]

@minami 这些名词感觉是起码 10 年前流行的了

[chloerei]

https://native.hotwired.dev/

[musi]

Electron 得益于 chromium 能在桌面端跨平台，chromium 能在安卓上跑但是 ios 上只能跑 safari 啊，所以就只能用系统内置的 webview ，按照这个思路 taurl 这么做了，但是体验就。。。

[LinYa]

@chloerei 第一次见这个，感觉好像更偏向精通 原生端的开发者？

[jqtmviyu]

每次听到吹 Flutter 的我就想起经常发技术报告的闲鱼团队.
套壳套得流畅的还得是拼多多团队. 那么小的安装包, 塞进一堆转盘 广告 喂鸡 农场 打牌. 关键还是一点都不卡, 甚至弹窗弹得太快了.

[DingJZ]

@minami #2 牢 phonegap

[roundgis]

@livin2 一般来说 2018 年以后的手机都还可以用了。过于古老的版本还是老实原生吧

[roundgis]

@w568w flutter 听说换引擎了

[murmur]

@minami 现在是 capacitor ，我们正在用，挺好的，h5 才是最适合多端复用的路线，还好写好开发，尤其是界面太舒服了

[jeepc]

@jqtmviyu #19 flutter 理论上是不会卡的，咸鱼卡是因为混合开发，以及业务问题

[lidayl]

@jeepc 应该不是混合开发的原因 我有过混合开发和纯 Flutter 开发中大型项目 体验远没有咸鱼那么糟糕 感觉咸鱼就是为了 KPI 魔改了 Flutter 导致的

[AoEiuV020JP]

@drymonfidelia #3 卡到 2 帧了都毫不怀疑自己的问题，这种自信我也想学，

[zhangfeiwudi]

@jqtmviyu 没做过前端，拼多多 app 是纯 h5 吗 还是部分页面是

[flytsuki]

Electron 比 Flutter 流畅???

[lizy0329]

所以不想学习新语言就用 capacitor 会好吗？

[duanxianze]

怎么没有？小程序不就是？手机原生的，还有快应用

[neutrino]

@AoEiuV020JP 反正 electron 没卡，flutter 卡了，还很离谱

[jqtmviyu]

@zhangfeiwudi #27 应该大部分页面都是 h5. 甚至有内部版才 2.55M, 什么转盘 农场 种花 都有.

[chloerei]

@LinYa hotwire 提取自 Ruby on Rails 框架母公司的项目 Basecamp 和 Hey ，是以服务端渲染为中心的移动端方案。现在 hotwire 已经解藕不依赖于 Rails ，但需要服务端框架做一些适配，这里有个适配列表 https://hotwire.io/frameworks 。

可能的坑点是非常小众，遇到问题不一定有人能解答。

[LinYa]

@chloerei #33 昨天大致浏览了一遍，感觉 Ruby 的同学开发 app 会更方便。我一直在寻找和 capacitor 类似，但能自定义程度更高的框架，觉得 hotwire 挺好的，但没想到会和服务端渲染关联性更高😂