爱意满满的作品展示区。
registered

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

  •  1
     
  •   registered · Jan 20, 2020 · 21059 views
    This topic created in 2490 days ago, the information mentioned may be changed or developed.

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

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

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

    先上地址:

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

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

    既然如此,先挂几张图吧

    电影

    故事

    照片

    一言

    说点

    简单介绍一下这个小破站 - 哭一场( kuyichang ):

    • 包括电影、故事、照片、一言、说点五个板块,内容核心就是两个字:“催泪”,网站定位是帮憋屈的你哭出来,让你哼着歌进去,喊着娘出来。

    • 电影数据来自豆瓣

    • 故事、照片、一言来自网络收集

    • 说点里面的诗词 API 来自https://www.jinrishici.com/

    • 有一个切换天气的功能,使用动画实现,事实证明大量控件的 rebuild 会干死自己

    • 目前没有做适配

    需要吐槽的地方:

    • debug 是真难用

    • 图片上面不能盖一层颜色(纯色或渐变)

    • build 的 js 太大了

    • 多控件 rebuild 还是卡的

    总体感受:

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

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

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

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

    欢迎资源推荐或拍砖~

    Supplement 1  ·  Jan 20, 2020

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

    99 replies  •  2020-06-12 02:21:46 +08:00
    murmur
    murmur
    Jan 20, 2020
    1
    windows 下这渲染看着真难受。。。
    xttli123
    xttli123
    Jan 20, 2020
    2
    很卡
    maomaomao001
    maomaomao001
    Jan 20, 2020
    3
    mac 上非常卡 (滑动时)
    Vegetable
    Vegetable
    Jan 20, 2020
    4
    一言那个模块,回弹太快了点,用滚轮都鬼畜了
    murmur
    murmur
    Jan 20, 2020
    5
    另外一个问题,电影的页面似乎只支持滚轮,不支持键盘事件
    ngrok111
    ngrok111
    Jan 20, 2020
    6
    github 地址访问速度还行,另一个半天都打不开( 土澳渣网 )
    windfarer
    windfarer
    Jan 20, 2020
    7
    有点卡
    Tink
    Tink
    Jan 20, 2020
    8
    图好像全挂了
    0vv0
    0vv0
    Jan 20, 2020
    9
    下雨的效果是一阵一阵的
    zhw2590582
    zhw2590582
    Jan 20, 2020
    10
    慢,而且控制台很多错误
    speedofstephen
    speedofstephen
    Jan 20, 2020
    11
    好巧阿,我这几天也想着这个创意呢。感觉网易云音乐很多歌曲的精彩评论也很催泪。
    zhanziyang
    zhanziyang
    Jan 20, 2020
    12
    太丧了,玩不下去
    CoCoMcRee
    CoCoMcRee
    Jan 20, 2020
    13
    很好奇...怎么会如此的卡
    jayin
    jayin
    Jan 20, 2020
    14
    还有很大的改进空间
    lookas2001
    lookas2001
    Jan 20, 2020 via Android
    15
    卡。。卡的
    oubenruing
    oubenruing
    Jan 20, 2020
    16
    我还以为写 flutter web,写的楼主哭了一场。
    murmur
    murmur
    Jan 20, 2020
    17
    不知道你们说网卡还是页面卡,windows 7 代 u chrome cpu 瞬时占用突破 50%,750ti 亮机卡都有 30%负载,不过时好时坏,考虑到 windows 的 chrome 比 osx 要好,mac 卡也是应该的
    关雨保平安
    heijiangjun
    heijiangjun
    Jan 20, 2020
    18
    简单的效果也这么卡,确实有点不能接受。话说设计挺漂亮的,楼主自己设计的吗
    heijiangjun
    heijiangjun
    Jan 20, 2020
    19
    “flutter 在 web 上的渲染还能接受,之所以不想用 flutter 写移动端,首要原因就是在移动端的渲染和原生在视觉上还是有很大差距。“ 我用 flutter 自己写了个小应用玩,debug 模式下运行在红米 k20 上感觉挺流畅的,视觉上也和原生没太多区别啊
    pota
    pota
    Jan 20, 2020
    20
    1.5M 的 js。。。
    Lombard
    Lombard
    Jan 20, 2020
    21
    不知道为啥,我对这种 hover 效果有种生理上的不适
    lylijincheng
    lylijincheng
    Jan 20, 2020
    22
    @CoCoMcRee 同好奇。。
    zokingo
    zokingo
    Jan 20, 2020
    23
    @Lombard 是的,我也有这种感觉。画风变换太大又给人卡顿的感觉。不知道是不是单纯 PC 端的问题
    kkniub
    kkniub
    Jan 20, 2020
    24
    (((((()))))) 是这样的吗?
    love
    love
    Jan 20, 2020 via Android
    25
    看了标题还以为是 flutter 写 web 太痛苦了大哭了一场
    gaigechunfeng
    gaigechunfeng
    Jan 20, 2020
    26
    我靠。为什么我看着一点都不卡啊?
    难道是我的电脑配置太牛逼了。
    mmrx
    mmrx
    Jan 20, 2020
    27
    确实一卡一卡的,不是很流畅
    不知道是代码的问题,还是确实 flutter web 转 js 优化做得不够
    楼主行动力很强
    mgrddsj
    mgrddsj
    Jan 20, 2020 via Android
    28
    移动端竖屏显示不出来电影图片,横屏时内容显示不全。滑动时卡得不行,Android Chrome 79 + 骁龙 835
    chanchan
    chanchan
    Jan 20, 2020
    29
    电影简介应该用渐变缓慢翻页的动画,这样弹出来一点都不想哭
    别的动画也太突兀了,没内味儿
    murmur
    murmur
    Jan 20, 2020
    30
    @mmrx 应该是 flutter 转 js 优化不行,edge 的调试工具看 70%的 cpu 占用都在脚本上

    建议谁给楼主优化一下,做个欢快点的主题,名字我都想好了就叫撸一场
    Cbdy
    Cbdy
    Jan 20, 2020
    31
    f12 了一下,这个页面爬虫没法爬😂
    mmrx
    mmrx
    Jan 20, 2020
    32
    @murmur 哈哈哈哈 @registered 建 议 改 为: 撸 一 场
    hst001
    hst001
    Jan 20, 2020
    33
    滑动卡看起来像 bug,比较有规律
    moonrailgun
    moonrailgun
    PRO
    Jan 20, 2020
    34
    这个下雨的特效惊到我了
    sneezry
    sneezry
    Jan 20, 2020
    35
    内容非常好!如果滚动能顺滑一点,过度动画慢一点感觉会更好
    wdaye
    wdaye
    Jan 20, 2020
    36
    mac 打字 滑动 都卡到不行。
    snowspace
    snowspace
    Jan 20, 2020
    37
    “移动端的渲染和原生在视觉上还是有很大差距” 差距貌似不大呀
    superpeaser
    superpeaser
    Jan 20, 2020
    38
    看着还不错啊
    registered
    registered
    OP
    Jan 20, 2020
    39
    @murmur 关雨保平安,😝
    registered
    registered
    OP
    Jan 20, 2020
    40
    @xttli123 关雨保平安,😝
    registered
    registered
    OP
    Jan 20, 2020
    41
    @maomaomao001 关雨保平安,😝
    registered
    registered
    OP
    Jan 20, 2020
    42
    @Vegetable 额,是我考虑不周,很多年没用过鼠标了
    registered
    registered
    OP
    Jan 20, 2020
    43
    @murmur 额,没太明白您的意思。是说电影的介绍信息的滚动吗
    registered
    registered
    OP
    Jan 20, 2020
    44
    @ngrok111 等我有钱了,肯定换个国内的服务器,🐶
    registered
    registered
    OP
    Jan 20, 2020
    45
    @windfarer 关雨保平安,😝
    registered
    registered
    OP
    Jan 20, 2020
    46
    @Tink “照片”板块的图片源和其它的图片源不一样,应该不会同时挂吧
    banliyaya
    banliyaya
    Jan 20, 2020 via iPhone
    47
    用 macbookpro 和 xr 很流畅,但是切换到下雨就明显有点顿了。除了下雨其他动画很舒服哈啊哈
    LancerComet
    LancerComet
    Jan 20, 2020
    48
    除了下雨卡,我感觉速度还 OK,Windows 10 + Chrome,Thinkpad X1E
    Anarchy
    Anarchy
    Jan 20, 2020
    49
    下雨比较卡,其他没什么问题 macbookpro 2015 款
    registered
    registered
    OP
    Jan 20, 2020
    50
    @zhw2590582 嗯,发现了两个错误。一个是逻辑错误,一个是权限问题。感谢指出
    registered
    registered
    OP
    Jan 20, 2020
    51
    @heijiangjun 谢谢,是自己设计的
    registered
    registered
    OP
    Jan 20, 2020
    52
    @heijiangjun 我说的差距不是说性能,是视觉感受。确实和很多同学交流,他们都说没什么区别,我倔强的认为有差别,如果非要形容一下的话,就是“无质感”。
    registered
    registered
    OP
    Jan 20, 2020
    53
    @speedofstephen 感兴趣的话可以一起来玩啊 ~
    registered
    registered
    OP
    Jan 20, 2020
    54
    @chanchan 感谢指出。欢迎交互大佬提建议
    viewsnake
    viewsnake
    Jan 20, 2020
    55
    非常棒的网站,加入我的收藏夹了,现在这个碎片化时代,我特别讨厌头条抖音快手那种主动推送的 APP,让你失去主动思考的灵魂,统统卸载,手机只保留支付宝和微信。
    registered
    registered
    OP
    Jan 20, 2020
    56
    @itstudying 是的。因为如果是连续的话,对象没办法复用,会更卡,暂时做不到。
    registered
    registered
    OP
    Jan 20, 2020
    57
    @viewsnake 哥们你这个留言像是机器人呀 ~
    kasusa
    kasusa
    Jan 20, 2020
    58
    嗯,,好卡呀不知道为啥
    0vv0
    0vv0
    Jan 20, 2020
    59
    想去说点啥看到需要回复诗句的下一句,想去百度搜答案发现不能复制,想去 f12 复制发现定位不到标签,最后还是来这回复了。就别为难我这个没文化的后端 boy 了,所以,用 dart 写出来就是不能定位标签的吗?还是我姿势不对
    stardust21
    stardust21
    Jan 20, 2020
    60
    完成度挺高的了,不过 js 是真的挺大的
    0vv0
    0vv0
    Jan 20, 2020
    61
    @itstudying #59 哦 就是都转成了 js,全都是 js 在操作 dom 呗
    registered
    registered
    OP
    Jan 20, 2020
    62
    @mgrddsj 没有做适配哟 ~
    viewsnake
    viewsnake
    Jan 20, 2020
    63
    @registered 为啥像机器人,难道我已经变成机器人了哈
    droiz
    droiz
    Jan 20, 2020
    64
    transform 的计算全靠 js 啊,这 tm 真的卡
    HuHui
    HuHui
    Jan 20, 2020
    65
    http://www.imooc.com/article/289434
    可以加个高斯模糊
    userdhf
    userdhf
    Jan 20, 2020
    66
    f12 了一下,刷新了三观。。。还不如纯 dom。。一路嵌套,是 flutter 就这德行,还是楼主刚上手??
    yafoo
    yafoo
    Jan 20, 2020 via Android
    67
    以前觉得 flutter 很牛逼,现在突然觉得这东西高不成低不就。
    oatw
    oatw
    Jan 20, 2020 via iPhone
    68
    我用手机 safari 看的 点不动呀
    GPLer
    GPLer
    Jan 21, 2020 via Android
    69
    Firefox 操作完全不卡,就是这雨怎么一阵一阵的。(
    ccraohng
    ccraohng
    Jan 21, 2020 via Android
    70
    手机上的滚动好僵硬
    nicevar
    nicevar
    Jan 21, 2020 via Android
    71
    没事,其实前端圈发展起来之后,这样卡的网站满天飞,油管也没比你这好多少
    mxT52CRuqR6o5
    mxT52CRuqR6o5
    Jan 21, 2020 via Android
    72
    优化的方法就是换个技术栈,说实话 flutter 的 native 端我也没觉得性能好到哪去
    registered
    registered
    OP
    Jan 21, 2020
    73
    @yafoo 还是新生儿。我觉得现在的问题是官方急着响应口号“适配多端”,而不是花大力气去优化
    registered
    registered
    OP
    Jan 21, 2020
    74
    @userdhf 嵌套不是重点吧。这不是手写代码,是 build 后的代码。
    Chengxians
    Chengxians
    Jan 21, 2020
    75
    收藏,下个月 vue copy 一份
    zxcslove
    zxcslove
    Jan 21, 2020
    76
    标题党,楼主没哭一场,差评
    herozzm
    herozzm
    Jan 21, 2020
    77
    得有多弱,web 都需要用 flutter
    studyro
    studyro
    Jan 21, 2020
    78
    渲染不是基于标准的 HTML 标签,导致 VIM 插件不可用了。如果 Flutter Web 在这个基础上被推广开,那真的是灾难了。
    GopherTT
    GopherTT
    Jan 21, 2020
    79
    左侧边栏 hover body 闪瞎我..
    xrr2016
    xrr2016
    Jan 21, 2020
    80
    赞一个
    maxint
    maxint
    Jan 21, 2020
    81
    很棒
    maxint
    maxint
    Jan 21, 2020
    82
    @studyro 是直接在 canvas 上画的吗
    auin
    auin
    Jan 21, 2020
    83
    关雨保流畅
    registered
    registered
    OP
    Jan 21, 2020
    84
    @herozzm 那您可不是牛逼坏了
    wanguorui123
    wanguorui123
    Jan 21, 2020 via iPhone
    85
    勇士
    xiaotianhu
    xiaotianhu
    Jan 21, 2020
    86
    我也以为是 lz 写的哭了一场....尴尬
    xuanbg
    xuanbg
    Jan 21, 2020
    87
    下雨似乎影响点击??
    Maiiiiii
    Maiiiiii
    Jan 21, 2020
    88
    一言那里好像没办法用滚轮滑动
    小雨就卡的不行
    故事内容不能被选中,对于我这种喜欢选一段高亮看字的,有点别扭
    version0
    version0
    Jan 21, 2020 via Android
    89
    @studyro 确实啊,这种唯一的用处就是做个不想被爬( SEO )的网站了吧
    milukun
    milukun
    Jan 22, 2020
    90
    感觉并不慢 打开还挺快
    sodulty
    sodulty
    Jan 22, 2020
    91
    啥时候能顶掉 rn 上位呢
    xjqxz2
    xjqxz2
    Jan 22, 2020
    92
    单页应用怎么才能给爬虫们收录啊
    loginbygoogle
    loginbygoogle
    Mar 30, 2020 via iPhone
    93
    😀
    milukun
    milukun
    Apr 18, 2020
    94
    问一下 flutter 做的 web 是不是不存在 url 的路由一说? 只能是全部运行在一个页面
    registered
    registered
    OP
    Apr 18, 2020
    95
    @milukun 据我所知,是这样的。但应该可以配合 NGINX 做到不同的地址对应不同的“页面”,这里的“页面”指的是 flutter 概念上的页面,不是指 web 页面。
    zcoderrr
    zcoderrr
    May 15, 2020
    96
    @milukun
    @registered
    既然是 web 肯定要有 url 路由的,可以看下我写的静态博客,可以直接通过地址跳到指定文章 : http://toseetheworld.cn/#/post?title=Welcome
    仓库地址: https://github.com/zcoderr/Fluttlog
    registered
    registered
    OP
    May 17, 2020
    97
    @zcoderrr nice work !之前我也这样试过,不过不知道为什么当时没成功,只能眺首页。我以为 Flutter 不支持 url 传进来的路由地址。
    39499740
    39499740
    Jun 4, 2020
    98
    @registered 话说这个你重新 build 过么? 136 天了,不知道现在的渲染效率是不是会提高一些
    CatalinaMylove
    CatalinaMylove
    Jun 12, 2020
    99
    我想哭 但是哭不出来

    等到思念像海

    太丧了,玩不下去
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2100 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 269ms · UTC 06:50 · PVG 14:50 · LAX 22:50 · JFK 01:50
    ♥ Do have faith in what you're doing.