这是一个创建于 2165 天前的主题，其中的信息可能已经有所发展或是发生改变。
用不成熟的 flutter web 做了个网站
目前，flutter web 还不成熟，官方不建议在生产环境中使用。于是我本着“我不入地狱谁入地狱”的觉悟，趟了趟这坑浑水。
说实话，比想象中的坑少，并没有被坑得爬不起身。但依旧还有几个大问题还没有找到解决方案。
先上地址：
-
放在垃圾服务器上面的：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。如果有优化想法的同学，欢迎与我交流。
 | 1 murmur 2020-01-20 14:05:30 +08:00 windows 下这渲染看着真难受。。。 |
 | 2 xttli123 2020-01-20 14:06:56 +08:00 很卡 |
 | 3 maomaomao001 2020-01-20 14:12:07 +08:00 mac 上非常卡 （滑动时） |
 | 4 Vegetable 2020-01-20 14:14:49 +08:00 一言那个模块，回弹太快了点，用滚轮都鬼畜了 |
| 5 murmur 2020-01-20 14:16:49 +08:00 另外一个问题，电影的页面似乎只支持滚轮，不支持键盘事件 |
 | 6 ngrok111 2020-01-20 14:18:19 +08:00 github 地址访问速度还行，另一个半天都打不开( 土澳渣网 ) |
 | 7 windfarer 2020-01-20 14:18:34 +08:00 有点卡 |
 | 8 Tink PRO 图好像全挂了 |
 | 9 0vv0 2020-01-20 14:23:32 +08:00 下雨的效果是一阵一阵的 |
 | 10 zhw2590582 2020-01-20 14:24:33 +08:00 慢，而且控制台很多错误 |
 | 11 speedofstephen 2020-01-20 14:30:08 +08:00 好巧阿，我这几天也想着这个创意呢。感觉网易云音乐很多歌曲的精彩评论也很催泪。 |
 | 12 zhanziyang 2020-01-20 14:30:56 +08:00 太丧了，玩不下去 |
 | 13 CoCoMcRee 2020-01-20 14:32:43 +08:00 很好奇...怎么会如此的卡 |
 | 14 jayin 2020-01-20 14:36:13 +08:00 还有很大的改进空间 |
 | 15 lookas2001 2020-01-20 14:45:34 +08:00 via Android 卡。。卡的 |
 | 16 oubenruing 2020-01-20 14:51:17 +08:00 我还以为写 flutter web，写的楼主哭了一场。 |
| 17 murmur 2020-01-20 14:52:20 +08:00 不知道你们说网卡还是页面卡，windows 7 代 u chrome cpu 瞬时占用突破 50%，750ti 亮机卡都有 30%负载，不过时好时坏，考虑到 windows 的 chrome 比 osx 要好，mac 卡也是应该的 关雨保平安 |
 | 18 heijiangjun 2020-01-20 15:01:50 +08:00 简单的效果也这么卡，确实有点不能接受。话说设计挺漂亮的，楼主自己设计的吗 |
| 19 heijiangjun 2020-01-20 15:05:23 +08:00 “flutter 在 web 上的渲染还能接受，之所以不想用 flutter 写移动端，首要原因就是在移动端的渲染和原生在视觉上还是有很大差距。“ 我用 flutter 自己写了个小应用玩，debug 模式下运行在红米 k20 上感觉挺流畅的，视觉上也和原生没太多区别啊 |
 | 20 pota 2020-01-20 15:06:34 +08:00 1.5M 的 js。。。 |
 | 21 Lombard 2020-01-20 15:10:43 +08:00 不知道为啥，我对这种 hover 效果有种生理上的不适 |
 | 22 lylijincheng 2020-01-20 15:23:57 +08:00 @CoCoMcRee 同好奇。。 |
 | 24 kkniub 2020-01-20 15:33:18 +08:00 (((((()))))) 是这样的吗? |
 | 25 love 2020-01-20 15:48:59 +08:00 via Android 看了标题还以为是 flutter 写 web 太痛苦了大哭了一场 |
 | 26 gaigechunfeng 2020-01-20 16:31:25 +08:00 我靠。为什么我看着一点都不卡啊？ 难道是我的电脑配置太牛逼了。 |
 | 27 mmrx 2020-01-20 16:43:45 +08:00 确实一卡一卡的，不是很流畅 不知道是代码的问题，还是确实 flutter web 转 js 优化做得不够 楼主行动力很强 |
 | 28 mgrddsj 2020-01-20 16:45:14 +08:00 via Android 移动端竖屏显示不出来电影图片，横屏时内容显示不全。滑动时卡得不行，Android Chrome 79 + 骁龙 835 |
 | 29 chanchan 2020-01-20 16:53:38 +08:00 电影简介应该用渐变缓慢翻页的动画,这样弹出来一点都不想哭 别的动画也太突兀了,没内味儿 |
| 30 murmur 2020-01-20 16:55:47 +08:00 |
 | 31 Cbdy 2020-01-20 17:01:43 +08:00 f12 了一下，这个页面爬虫没法爬 |
| 32 mmrx 2020-01-20 17:05:29 +08:00 @murmur 哈哈哈哈 @registered 建 议 改 为： 撸 一 场 |
 | 33 hst001 2020-01-20 17:15:33 +08:00 滑动卡看起来像 bug，比较有规律 |
 | 34 moonrailgun 2020-01-20 17:43:30 +08:00 这个下雨的特效惊到我了 |
 | 35 sneezry 2020-01-20 17:48:11 +08:00 内容非常好！如果滚动能顺滑一点，过度动画慢一点感觉会更好 |
 | 36 wdaye 2020-01-20 17:54:03 +08:00 mac 打字 滑动 都卡到不行。 |
 | 37 snowspace 2020-01-20 18:18:21 +08:00 “移动端的渲染和原生在视觉上还是有很大差距” 差距貌似不大呀 |
 | 38 superpeaser 2020-01-20 18:35:22 +08:00 看着还不错啊 |
 | 39 registered OP @murmur 关雨保平安， |
| 40 registered OP @xttli123 关雨保平安， |
| 41 registered OP @maomaomao001 关雨保平安， |
| 42 registered OP @Vegetable 额，是我考虑不周，很多年没用过鼠标了 |
| 43 registered OP @murmur 额，没太明白您的意思。是说电影的介绍信息的滚动吗 |
| 44 registered OP @ngrok111 等我有钱了，肯定换个国内的服务器， |
| 45 registered OP @windfarer 关雨保平安， |
| 46 registered OP @Tink “照片”板块的图片源和其它的图片源不一样，应该不会同时挂吧 |
 | 47 banliyaya 2020-01-20 19:02:59 +08:00 via iPhone 用 macbookpro 和 xr 很流畅，但是切换到下雨就明显有点顿了。除了下雨其他动画很舒服哈啊哈 |
 | 48 LancerComet 2020-01-20 19:04:34 +08:00 除了下雨卡，我感觉速度还 OK，Windows 10 + Chrome，Thinkpad X1E |
 | 49 Anarchy 2020-01-20 19:46:32 +08:00 下雨比较卡，其他没什么问题 macbookpro 2015 款 |
| 50 registered OP @zhw2590582 嗯，发现了两个错误。一个是逻辑错误，一个是权限问题。感谢指出 |
| 51 registered OP @heijiangjun 谢谢，是自己设计的 |
| 52 registered OP @heijiangjun 我说的差距不是说性能，是视觉感受。确实和很多同学交流，他们都说没什么区别，我倔强的认为有差别，如果非要形容一下的话，就是“无质感”。 |
| 53 registered OP @speedofstephen 感兴趣的话可以一起来玩啊 ~ |
| 54 registered OP @chanchan 感谢指出。欢迎交互大佬提建议 |
 | 55 viewsnake 2020-01-20 20:11:10 +08:00 非常棒的网站，加入我的收藏夹了，现在这个碎片化时代，我特别讨厌头条抖音快手那种主动推送的 APP，让你失去主动思考的灵魂，统统卸载，手机只保留支付宝和微信。 |
| 56 registered OP @itstudying 是的。因为如果是连续的话，对象没办法复用，会更卡，暂时做不到。 |
| 57 registered OP @viewsnake 哥们你这个留言像是机器人呀 ~ |
 | 58 kasusa 2020-01-20 20:16:59 +08:00 嗯，，好卡呀不知道为啥 |
| 59 0vv0 2020-01-20 20:25:54 +08:00 想去说点啥看到需要回复诗句的下一句，想去百度搜答案发现不能复制，想去 f12 复制发现定位不到标签，最后还是来这回复了。就别为难我这个没文化的后端 boy 了，所以，用 dart 写出来就是不能定位标签的吗？还是我姿势不对 |
 | 60 stardust21 2020-01-20 20:27:18 +08:00 完成度挺高的了，不过 js 是真的挺大的 |
| 61 0vv0 2020-01-20 20:33:55 +08:00 @itstudying #59 哦 就是都转成了 js，全都是 js 在操作 dom 呗 |
| 62 registered OP @mgrddsj 没有做适配哟 ~ |
| 63 viewsnake 2020-01-20 21:58:02 +08:00 @registered 为啥像机器人，难道我已经变成机器人了哈 |
 | 64 droiz 2020-01-20 21:59:52 +08:00 transform 的计算全靠 js 啊，这 tm 真的卡 |
 | 65 HuHui 2020-01-20 22:18:31 +08:00 http://www.imooc.com/article/289434 可以加个高斯模糊 |
 | 66 userdhf 2020-01-20 22:37:43 +08:00 f12 了一下，刷新了三观。。。还不如纯 dom。。一路嵌套，是 flutter 就这德行，还是楼主刚上手?? |
 | 67 yafoo 2020-01-20 23:02:26 +08:00 via Android 以前觉得 flutter 很牛逼，现在突然觉得这东西高不成低不就。 |
 | 68 oatw 2020-01-20 23:38:06 +08:00 via iPhone 我用手机 safari 看的 点不动呀 |
 | 69 GPLer 2020-01-21 00:46:43 +08:00 via Android Firefox 操作完全不卡，就是这雨怎么一阵一阵的。（ |
 | 70 ccraohng 2020-01-21 06:37:58 +08:00 via Android 手机上的滚动好僵硬 |
 | 71 nicevar 2020-01-21 08:17:30 +08:00 via Android 没事，其实前端圈发展起来之后，这样卡的网站满天飞，油管也没比你这好多少 |
 | 72 mxT52CRuqR6o5 2020-01-21 09:20:47 +08:00 via Android 优化的方法就是换个技术栈，说实话 flutter 的 native 端我也没觉得性能好到哪去 |
| 73 registered OP @yafoo 还是新生儿。我觉得现在的问题是官方急着响应口号“适配多端”，而不是花大力气去优化 |
| 74 registered OP @userdhf 嵌套不是重点吧。这不是手写代码，是 build 后的代码。 |
 | 75 Chengxians 2020-01-21 10:32:41 +08:00 收藏，下个月 vue copy 一份 |
 | 76 zxcslove 2020-01-21 10:35:27 +08:00 标题党，楼主没哭一场，差评 |
 | 77 herozzm 2020-01-21 10:36:36 +08:00 得有多弱，web 都需要用 flutter |
 | 78 studyro 2020-01-21 10:58:07 +08:00 渲染不是基于标准的 HTML 标签，导致 VIM 插件不可用了。如果 Flutter Web 在这个基础上被推广开，那真的是灾难了。 |
 | 79 GopherTT 2020-01-21 11:03:51 +08:00 左侧边栏 hover body 闪瞎我.. |
 | 80 xrr2016 2020-01-21 11:10:10 +08:00 赞一个 |
 | 81 maxint 2020-01-21 11:21:22 +08:00 很棒 |
 | 83 liuxey 2020-01-21 11:28:30 +08:00 关雨保流畅 |
| 84 registered OP @herozzm 那您可不是牛逼坏了 |
 | 85 wanguorui123 2020-01-21 11:49:15 +08:00 via iPhone 勇士 |
 | 86 xiaotianhu 2020-01-21 12:56:30 +08:00 我也以为是 lz 写的哭了一场....尴尬 |
 | 87 xuanbg 2020-01-21 13:24:15 +08:00 下雨似乎影响点击？？ |
 | 88 Maiiiiii 2020-01-21 13:44:31 +08:00 一言那里好像没办法用滚轮滑动 小雨就卡的不行 故事内容不能被选中，对于我这种喜欢选一段高亮看字的，有点别扭 |
 | 90 milukun 2020-01-22 10:53:05 +08:00 感觉并不慢 打开还挺快 |
 | 91 sodulty 2020-01-22 14:01:31 +08:00 啥时候能顶掉 rn 上位呢 |
 | 92 xjqxz2 2020-01-22 14:31:37 +08:00 单页应用怎么才能给爬虫们收录啊 |
 | 93 loginbygoogle 2020-03-30 17:27:52 +08:00 via iPhone |
| 94 milukun 2020-04-18 11:50:32 +08:00 问一下 flutter 做的 web 是不是不存在 url 的路由一说？ 只能是全部运行在一个页面 |
| 95 registered OP @milukun 据我所知，是这样的。但应该可以配合 NGINX 做到不同的地址对应不同的“页面”，这里的“页面”指的是 flutter 概念上的页面，不是指 web 页面。 |
 | 96 zcoderrr 2020-05-15 10:48:08 +08:00 @milukun @registered 既然是 web 肯定要有 url 路由的，可以看下我写的静态博客，可以直接通过地址跳到指定文章 ： http://toseetheworld.cn/#/post?title=Welcome 仓库地址： https://github.com/zcoderr/Fluttlog |
Select Language