V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1748 天前的主题，其中的信息可能已经有所发展或是发生改变。

用不成熟的 flutter web 做了个网站

目前，flutter web 还不成熟，官方不建议在生产环境中使用。于是我本着“我不入地狱谁入地狱”的觉悟，趟了趟这坑浑水。

说实话，比想象中的坑少，并没有被坑得爬不起身。但依旧还有几个大问题还没有找到解决方案。

先上地址：

放在 github.io 上的：https://dev.kuyichang.com
放在垃圾服务器上面的：http://www.kuyichang.com

两个地址都非常慢，无法忍受的慢，所以如果不是非常感兴趣，恐怕你是和它无缘了。

tips：挂代理速度还是可以的

既然如此，先挂几张图吧

简单介绍一下这个小破站 - 哭一场（ kuyichang ）：

包括电影、故事、照片、一言、说点五个板块，内容核心就是两个字：“催泪”，网站定位是帮憋屈的你哭出来，让你哼着歌进去，喊着娘出来。
电影数据来自豆瓣
故事、照片、一言来自网络收集
说点里面的诗词 API 来自https://www.jinrishici.com/
有一个切换天气的功能，使用动画实现，事实证明大量控件的 rebuild 会干死自己
目前没有做适配

需要吐槽的地方：

debug 是真难用
图片上面不能盖一层颜色(纯色或渐变)
build 的 js 太大了
多控件 rebuild 还是卡的

总体感受：

确实能很真切地感受到 web 端的不成熟，很多交互和布局都是移动端的模式，硬用在 web 上来感觉有些别扭。

不得不夸赞的地方是，dart 用得很舒服，继承了传统语言的优点，又具有现代语言的优雅高效。

刚开始对于 widget 的嵌套很不适应，但慢慢地也就习惯了，其实它也促使你更细化地分离组件，对于 flutter 的 widget 树 rebuild 机制来说，组件颗粒度是越小越好的。

flutter 在 web 上的渲染还能接受，之所以不想用 flutter 写移动端，首要原因就是在移动端的渲染和原生在视觉上还是有很大差距。

欢迎资源推荐或拍砖~

第 1 条附言 · 2020-01-20 20:05:04 +08:00

雨越大越卡。上文有提到，是因为大量对象的rebuild。如果有优化想法的同学，欢迎与我交流。

99 条回复 • 2020-06-12 02:21:46 +08:00

murmur

2020-01-20 14:05:30 +08:00

windows 下这渲染看着真难受。。。

xttli123

2020-01-20 14:06:56 +08:00

很卡

maomaomao001

2020-01-20 14:12:07 +08:00

mac 上非常卡（滑动时）

Vegetable

2020-01-20 14:14:49 +08:00

一言那个模块，回弹太快了点，用滚轮都鬼畜了

murmur

2020-01-20 14:16:49 +08:00

另外一个问题，电影的页面似乎只支持滚轮，不支持键盘事件

ngrok111

2020-01-20 14:18:19 +08:00

github 地址访问速度还行，另一个半天都打不开( 土澳渣网 )

windfarer

2020-01-20 14:18:34 +08:00

有点卡

Tink

2020-01-20 14:22:32 +08:00

图好像全挂了

itstudying

2020-01-20 14:23:32 +08:00

下雨的效果是一阵一阵的

zhw2590582

2020-01-20 14:24:33 +08:00

慢，而且控制台很多错误

speedofstephen

2020-01-20 14:30:08 +08:00

好巧阿，我这几天也想着这个创意呢。感觉网易云音乐很多歌曲的精彩评论也很催泪。

zhanziyang

2020-01-20 14:30:56 +08:00

太丧了，玩不下去

CoCoMcRee

2020-01-20 14:32:43 +08:00

很好奇...怎么会如此的卡

jayin

2020-01-20 14:36:13 +08:00

还有很大的改进空间

lookas2001

2020-01-20 14:45:34 +08:00 via Android

卡。。卡的

oubenruing

2020-01-20 14:51:17 +08:00

我还以为写 flutter web，写的楼主哭了一场。

murmur

2020-01-20 14:52:20 +08:00

不知道你们说网卡还是页面卡，windows 7 代 u chrome cpu 瞬时占用突破 50%，750ti 亮机卡都有 30%负载，不过时好时坏，考虑到 windows 的 chrome 比 osx 要好，mac 卡也是应该的
关雨保平安

heijiangjun

2020-01-20 15:01:50 +08:00

简单的效果也这么卡，确实有点不能接受。话说设计挺漂亮的，楼主自己设计的吗

heijiangjun

2020-01-20 15:05:23 +08:00

“flutter 在 web 上的渲染还能接受，之所以不想用 flutter 写移动端，首要原因就是在移动端的渲染和原生在视觉上还是有很大差距。“ 我用 flutter 自己写了个小应用玩，debug 模式下运行在红米 k20 上感觉挺流畅的，视觉上也和原生没太多区别啊

pota

2020-01-20 15:06:34 +08:00

1.5M 的 js。。。

Lombard

2020-01-20 15:10:43 +08:00

不知道为啥，我对这种 hover 效果有种生理上的不适

lylijincheng

2020-01-20 15:23:57 +08:00

@CoCoMcRee 同好奇。。

zokingo

2020-01-20 15:24:32 +08:00

@Lombard 是的，我也有这种感觉。画风变换太大又给人卡顿的感觉。不知道是不是单纯 PC 端的问题

kkniub

2020-01-20 15:33:18 +08:00

(((((()))))) 是这样的吗?

love

2020-01-20 15:48:59 +08:00 via Android

看了标题还以为是 flutter 写 web 太痛苦了大哭了一场

gaigechunfeng

2020-01-20 16:31:25 +08:00

我靠。为什么我看着一点都不卡啊？
难道是我的电脑配置太牛逼了。

mmrx

2020-01-20 16:43:45 +08:00

确实一卡一卡的，不是很流畅
不知道是代码的问题，还是确实 flutter web 转 js 优化做得不够
楼主行动力很强

mgrddsj

2020-01-20 16:45:14 +08:00 via Android

移动端竖屏显示不出来电影图片，横屏时内容显示不全。滑动时卡得不行，Android Chrome 79 + 骁龙 835

chanchan

2020-01-20 16:53:38 +08:00

电影简介应该用渐变缓慢翻页的动画,这样弹出来一点都不想哭
别的动画也太突兀了,没内味儿

murmur

2020-01-20 16:55:47 +08:00

@mmrx 应该是 flutter 转 js 优化不行，edge 的调试工具看 70%的 cpu 占用都在脚本上

建议谁给楼主优化一下，做个欢快点的主题，名字我都想好了就叫撸一场

Cbdy

2020-01-20 17:01:43 +08:00

f12 了一下，这个页面爬虫没法爬😂

mmrx

2020-01-20 17:05:29 +08:00

@murmur 哈哈哈哈 @registered 建议改为：撸一场

hst001

2020-01-20 17:15:33 +08:00

滑动卡看起来像 bug，比较有规律

moonrailgun

2020-01-20 17:43:30 +08:00

这个下雨的特效惊到我了

sneezry

2020-01-20 17:48:11 +08:00

内容非常好！如果滚动能顺滑一点，过度动画慢一点感觉会更好

wdaye

2020-01-20 17:54:03 +08:00

mac 打字滑动都卡到不行。

snowspace

2020-01-20 18:18:21 +08:00

“移动端的渲染和原生在视觉上还是有很大差距” 差距貌似不大呀

superpeaser

2020-01-20 18:35:22 +08:00

看着还不错啊

registered

2020-01-20 18:54:46 +08:00

@murmur 关雨保平安，😝

registered

2020-01-20 18:55:06 +08:00

@xttli123 关雨保平安，😝

registered

2020-01-20 18:55:41 +08:00

@maomaomao001 关雨保平安，😝

registered

2020-01-20 18:56:26 +08:00

@Vegetable 额，是我考虑不周，很多年没用过鼠标了

registered

2020-01-20 18:57:24 +08:00

@murmur 额，没太明白您的意思。是说电影的介绍信息的滚动吗

registered

2020-01-20 18:59:36 +08:00

@ngrok111 等我有钱了，肯定换个国内的服务器，🐶

registered

2020-01-20 18:59:58 +08:00

@windfarer 关雨保平安，😝

registered

2020-01-20 19:00:43 +08:00

@Tink “照片”板块的图片源和其它的图片源不一样，应该不会同时挂吧

banliyaya

2020-01-20 19:02:59 +08:00 via iPhone

用 macbookpro 和 xr 很流畅，但是切换到下雨就明显有点顿了。除了下雨其他动画很舒服哈啊哈

LancerComet

2020-01-20 19:04:34 +08:00

除了下雨卡，我感觉速度还 OK，Windows 10 + Chrome，Thinkpad X1E

Anarchy

2020-01-20 19:46:32 +08:00

下雨比较卡，其他没什么问题 macbookpro 2015 款

registered

2020-01-20 20:01:33 +08:00

@zhw2590582 嗯，发现了两个错误。一个是逻辑错误，一个是权限问题。感谢指出

registered

2020-01-20 20:06:01 +08:00

@heijiangjun 谢谢，是自己设计的

registered

2020-01-20 20:07:53 +08:00

@heijiangjun 我说的差距不是说性能，是视觉感受。确实和很多同学交流，他们都说没什么区别，我倔强的认为有差别，如果非要形容一下的话，就是“无质感”。

registered

2020-01-20 20:08:26 +08:00

@speedofstephen 感兴趣的话可以一起来玩啊 ~

registered

2020-01-20 20:10:58 +08:00

@chanchan 感谢指出。欢迎交互大佬提建议

viewsnake

2020-01-20 20:11:10 +08:00

非常棒的网站，加入我的收藏夹了，现在这个碎片化时代，我特别讨厌头条抖音快手那种主动推送的 APP，让你失去主动思考的灵魂，统统卸载，手机只保留支付宝和微信。

registered

2020-01-20 20:12:23 +08:00

@itstudying 是的。因为如果是连续的话，对象没办法复用，会更卡，暂时做不到。

registered

2020-01-20 20:14:19 +08:00

@viewsnake 哥们你这个留言像是机器人呀 ~

kasusa

2020-01-20 20:16:59 +08:00

嗯，，好卡呀不知道为啥

itstudying

2020-01-20 20:25:54 +08:00

想去说点啥看到需要回复诗句的下一句，想去百度搜答案发现不能复制，想去 f12 复制发现定位不到标签，最后还是来这回复了。就别为难我这个没文化的后端 boy 了，所以，用 dart 写出来就是不能定位标签的吗？还是我姿势不对

stardust21

2020-01-20 20:27:18 +08:00

完成度挺高的了，不过 js 是真的挺大的

itstudying

2020-01-20 20:33:55 +08:00

@itstudying #59 哦就是都转成了 js，全都是 js 在操作 dom 呗

registered

2020-01-20 21:02:55 +08:00

@mgrddsj 没有做适配哟 ~

viewsnake

2020-01-20 21:58:02 +08:00

@registered 为啥像机器人，难道我已经变成机器人了哈

droiz

2020-01-20 21:59:52 +08:00

transform 的计算全靠 js 啊，这 tm 真的卡

HuHui

2020-01-20 22:18:31 +08:00

http://www.imooc.com/article/289434
可以加个高斯模糊

userdhf

2020-01-20 22:37:43 +08:00

f12 了一下，刷新了三观。。。还不如纯 dom。。一路嵌套，是 flutter 就这德行，还是楼主刚上手??

yafoo

2020-01-20 23:02:26 +08:00 via Android

以前觉得 flutter 很牛逼，现在突然觉得这东西高不成低不就。

oatw

2020-01-20 23:38:06 +08:00 via iPhone

我用手机 safari 看的点不动呀

GPLer

2020-01-21 00:46:43 +08:00 via Android

Firefox 操作完全不卡，就是这雨怎么一阵一阵的。（

ccraohng

2020-01-21 06:37:58 +08:00 via Android

手机上的滚动好僵硬

nicevar

2020-01-21 08:17:30 +08:00 via Android

没事，其实前端圈发展起来之后，这样卡的网站满天飞，油管也没比你这好多少

mxT52CRuqR6o5

2020-01-21 09:20:47 +08:00 via Android

优化的方法就是换个技术栈，说实话 flutter 的 native 端我也没觉得性能好到哪去

registered

2020-01-21 09:35:19 +08:00

@yafoo 还是新生儿。我觉得现在的问题是官方急着响应口号“适配多端”，而不是花大力气去优化

registered

2020-01-21 09:39:02 +08:00

@userdhf 嵌套不是重点吧。这不是手写代码，是 build 后的代码。

Chengxians

2020-01-21 10:32:41 +08:00

收藏，下个月 vue copy 一份

zxcslove

2020-01-21 10:35:27 +08:00

标题党，楼主没哭一场，差评

herozzm

2020-01-21 10:36:36 +08:00

得有多弱，web 都需要用 flutter

studyro

2020-01-21 10:58:07 +08:00

渲染不是基于标准的 HTML 标签，导致 VIM 插件不可用了。如果 Flutter Web 在这个基础上被推广开，那真的是灾难了。

GopherTT

2020-01-21 11:03:51 +08:00

左侧边栏 hover body 闪瞎我..

xrr2016

2020-01-21 11:10:10 +08:00

赞一个

maxint

2020-01-21 11:21:22 +08:00

很棒

maxint

2020-01-21 11:22:30 +08:00

@studyro 是直接在 canvas 上画的吗

liuxey

2020-01-21 11:28:30 +08:00

关雨保流畅

registered

2020-01-21 11:41:02 +08:00

@herozzm 那您可不是牛逼坏了

wanguorui123

2020-01-21 11:49:15 +08:00 via iPhone

勇士

xiaotianhu

2020-01-21 12:56:30 +08:00

我也以为是 lz 写的哭了一场....尴尬

xuanbg

2020-01-21 13:24:15 +08:00

下雨似乎影响点击？？

Maiiiiii

2020-01-21 13:44:31 +08:00

一言那里好像没办法用滚轮滑动
小雨就卡的不行
故事内容不能被选中，对于我这种喜欢选一段高亮看字的，有点别扭

version0

2020-01-21 14:13:05 +08:00 via Android

@studyro 确实啊，这种唯一的用处就是做个不想被爬（ SEO ）的网站了吧

milukun

2020-01-22 10:53:05 +08:00

感觉并不慢打开还挺快

sodulty

2020-01-22 14:01:31 +08:00

啥时候能顶掉 rn 上位呢

xjqxz2

2020-01-22 14:31:37 +08:00

单页应用怎么才能给爬虫们收录啊

loginbygoogle

2020-03-30 17:27:52 +08:00 via iPhone

😀

milukun

2020-04-18 11:50:32 +08:00

问一下 flutter 做的 web 是不是不存在 url 的路由一说？只能是全部运行在一个页面

registered

2020-04-18 15:10:17 +08:00

@milukun 据我所知，是这样的。但应该可以配合 NGINX 做到不同的地址对应不同的“页面”，这里的“页面”指的是 flutter 概念上的页面，不是指 web 页面。

zcoderrr

2020-05-15 10:48:08 +08:00

@milukun
@registered
既然是 web 肯定要有 url 路由的，可以看下我写的静态博客，可以直接通过地址跳到指定文章： http://toseetheworld.cn/#/post?title=Welcome
仓库地址： https://github.com/zcoderr/Fluttlog

registered

2020-05-17 00:44:41 +08:00

@zcoderrr nice work ！之前我也这样试过，不过不知道为什么当时没成功，只能眺首页。我以为 Flutter 不支持 url 传进来的路由地址。

39499740

2020-06-04 15:21:08 +08:00

@registered 话说这个你重新 build 过么？ 136 天了，不知道现在的渲染效率是不是会提高一些

CatalinaMylove

2020-06-12 02:21:46 +08:00

我想哭但是哭不出来

等到思念像海

太丧了，玩不下去

用不成熟的 flutter web 做了个网站 - 哭一场

用不成熟的 flutter web 做了个网站