首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
阿里云
registered
V2EX  ›  分享创造

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

  •  1
     
  •   registered · 71 天前 · 7994 次点击
    这是一个创建于 71 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用不成熟的 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 写移动端,首要原因就是在移动端的渲染和原生在视觉上还是有很大差距。

    欢迎资源推荐或拍砖~

    第 1 条附言  ·  71 天前

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

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

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