V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
3dwelcome
V2EX  ›  前端开发

前端技术已经卷到自己写 CSS 解析器了。

  •  2
     
  •   3dwelcome · 2021-12-22 09:44:32 +08:00 · 8082 次点击
    这是一个创建于 827 天前的主题,其中的信息可能已经有所发展或是发生改变。
    字节大佬的分享视频,完全是按照游戏的方式,去自渲染 HTML 和自定义的 CSS 子集。

    也就是说,他们用的 Flutter 渲染底层,并没有支持传统的 HTML+CSS+JS 的开发方式,但是他们自己硬塞了一个解析模块和 JS 运行时进去。

    可能大家不知道,Flutter 自带的 Flex ,和 DIV 的 Flex 不一样,很多布局都不支持,他们自己按照 W3C ,写 CSS 解析,进行 CSS 覆盖测试,基本能到 95%通过率。

    大佬最后说,不能再做下去了,要不然就真的变成开发浏览器了。



    https://www.bilibili.com/video/BV1xa411k77h
    56 条回复    2022-02-25 23:24:13 +08:00
    liandi1990
        1
    liandi1990  
       2021-12-22 09:46:36 +08:00 via iPhone
    之前看字节前端 jd ,里面有一条“熟悉 webkit 内核优先”
    murmur
        2
    murmur  
       2021-12-22 09:48:19 +08:00   ❤️ 15
    正常,现在互联网都在裁员,不赶紧整出点轮子位置不保

    就国内互联网公司的产品,3 年不开发甚至倒退 3 年都没什么问题,前者性能稳定后者小而美
    4ark
        3
    4ark  
       2021-12-22 09:48:28 +08:00 via iPhone   ❤️ 1
    卷出天际,快进到前端手写操作系统
    otakustay
        4
    otakustay  
       2021-12-22 10:05:18 +08:00   ❤️ 3
    那后端早就自己改 JVM 了算什么?
    66beta
        5
    66beta  
       2021-12-22 10:27:45 +08:00   ❤️ 5
    @murmur 非常赞同,一个简单的流程,非要扯一些“千人千面、丰富多样的活动模型、流量输出”,把产品经理都辞退了,中文互联网能清净很多
    DOLLOR
        6
    DOLLOR  
       2021-12-22 10:28:15 +08:00 via Android
    没啥,我还手写 WebAssembly 呢。
    tabris17
        7
    tabris17  
       2021-12-22 10:28:49 +08:00   ❤️ 1
    扯淡吧,写个 CSS 解析器+换个 JS 引擎就叫开发浏览器了?
    3dwelcome
        8
    3dwelcome  
    OP
       2021-12-22 10:36:20 +08:00
    @tabris17

    talk is cheap, 你写一个兼容 W3C 95%的 CSS 解析器试试?前端里最魔幻的就是 CSS 各种奇怪语法了。

    人家字节大佬不但敢设想,也同时做出来了,还有真实产品上架的。
    tabris17
        9
    tabris17  
       2021-12-22 10:55:52 +08:00   ❤️ 18
    @3dwelcome 我能不能写出 CSS 解析器跟写个 CSS 解析器就吹牛逼“变成开发浏览器了”没有半毛钱关系
    Kilerd
        10
    Kilerd  
       2021-12-22 10:56:05 +08:00
    基本能到 95%通过率

    老实说我真的不相信
    faceair
        11
    faceair  
       2021-12-22 10:57:37 +08:00
    记得阿里搞过类似的 https://openkraken.com/
    Sasasu
        12
    Sasasu  
       2021-12-22 11:05:41 +08:00
    看起来是把 CSS 翻译成 Flutter
    fgwmlhdkkkw
        13
    fgwmlhdkkkw  
       2021-12-22 11:07:42 +08:00
    nt
    fgwmlhdkkkw
        14
    fgwmlhdkkkw  
       2021-12-22 11:08:34 +08:00
    对于产品来说,有什么必要吗?
    agagega
        15
    agagega  
       2021-12-22 11:11:59 +08:00 via iPhone   ❤️ 2
    遇到问题->思考解决方案->判断解决方案需要的工作量是否值得->执行合适的方案 才是正确的思维方式。看到别人做了个什么看似底层的东西就说卷,有点学生思维了
    ipwx
        16
    ipwx  
       2021-12-22 11:12:29 +08:00
    这就是为啥互联网大裁员。以前资本入驻互联网,为了全面垄断的预期,拼命砸钱耗死对手,所以什么人都养得起。现在政策变了,不允许全面垄断了,互联网即将转变为成熟的行业 —— 计较成本,不追求全面垄断了。所以这种人不一定会养得起了 lol
    murmur
        17
    murmur  
       2021-12-22 11:14:11 +08:00
    @agagega 思考解决方案,那今日头条最适合小程序啊,纯文字的浏览,浏览不知道真假还是谣言的东西,这太典型的小程序场景了
    otakustay
        18
    otakustay  
       2021-12-22 11:23:35 +08:00
    @murmur #17 你这个定义的问题是用户视角的问题,可能字节更多还要看市场和商业的问题吧,比如如何实现用户价值的最大转化
    otakustay
        19
    otakustay  
       2021-12-22 11:26:18 +08:00
    @3dwelcome #8 解析器是能写出来的,引擎就写不动了
    lneoi
        20
    lneoi  
       2021-12-22 11:38:30 +08:00
    这 阿里不是在做北海 不是跟这个一个意思
    gaozihang
        21
    gaozihang  
       2021-12-22 11:50:15 +08:00
    实现看上去类似于 `flutter_html`, 另外 dart 有 css 解析库 `csslib`, 不知道是基于这个库写的还是完全从零开发。
    kisshere
        22
    kisshere  
       2021-12-22 12:16:27 +08:00   ❤️ 1
    这不叫重复造轮子了,这叫重新种植橡胶树、冶炼橡胶了
    momocraft
        23
    momocraft  
       2021-12-22 12:17:41 +08:00
    浏览器 css 太多文字排版的遗产了
    用作 ui layout 其实不怎方便
    xff1874
        24
    xff1874  
       2021-12-22 12:25:29 +08:00
    内卷太严重了
    feiandxs
        25
    feiandxs  
       2021-12-22 13:16:00 +08:00
    @momocraft flex 我觉得是一套优秀的体系,可以理解为某种底层 layout 的上层封装,是挺好用。
    其他的我觉得靠 top left margin 耶差不多了。。。
    xylxAdai
        26
    xylxAdai  
       2021-12-22 13:22:58 +08:00
    这就是我之前在字节做过的东西。。其实没那么玄乎,但是工作量真的很大。
    Biwood
        27
    Biwood  
       2021-12-22 13:30:51 +08:00   ❤️ 3
    重复造轮子,跟微信小程序一样,明明有现成的技术标准,硬要自己圈出一套更封闭的系统,把原有的东西重新实现一遍,这就是“卷”的思维模式。
    做产品的都喜欢学习 Apple 的风格,但是也没见到 Apple 强行重新发明一套 HTML 和 CSS 吧。
    Bijiabo
        28
    Bijiabo  
       2021-12-22 13:48:52 +08:00
    我认为用 Flutter 开发应用这个行为本身就是一个因为卷、不愿意好好做事,至于在上面继续做什么,完全不奇怪,哪怕是因为这个去造个屏幕显示 Flutter 的画面都是可以理解的——早就脱离了业务本身。
    sikong31
        29
    sikong31  
       2021-12-22 13:51:00 +08:00
    使用过 Flutter 的应该觉得这是一个正常的想法,况且难度上不是很高,对布局的补充,其实挺好的
    lnim
        30
    lnim  
       2021-12-22 13:52:52 +08:00
    之前组里搞热更新, 移动端上打包一个手写的 jvm 用来跑动态代码下发~ 而且这玩意还是纯 C, 跨平台~ 麻了 !!! 卷出天际
    steptodream
        31
    steptodream  
       2021-12-22 14:31:43 +08:00
    服务器运维的,老板拉一车沙子,让我造 cpu
    crs0910
        32
    crs0910  
       2021-12-22 16:19:31 +08:00
    @3dwelcome 『大佬最后说,不能再做下去了,要不然就真的变成开发浏览器了。』这句视频里没看到呀。人家的意思是成本和性能要控制,变成你这个表达容易招黑啊。
    ClassicOldSong
        33
    ClassicOldSong  
       2021-12-22 16:33:48 +08:00 via iPhone
    在 Flutter 里用 JS 渲染 Flutter 应用
    套娃🤣
    uqf0663
        34
    uqf0663  
       2021-12-22 16:38:12 +08:00
    小白弱弱的问一下,微信小程序是不是也类似这样自己写 CSS 解析器?
    murmur
        35
    murmur  
       2021-12-22 16:40:51 +08:00
    @uqf0663 微信小程序就是 webview ,但是应该加了一套东西让原本的 html+js+css 成了太监
    az467
        36
    az467  
       2021-12-22 16:43:54 +08:00
    写浏览器怎么够。
    WebOS ,我看行。
    maplelin
        37
    maplelin  
       2021-12-22 17:53:39 +08:00
    我有个问题,国内这么卷,为啥技术力还是没法赶超欧美。
    ldspg123
        38
    ldspg123  
       2021-12-22 18:03:40 +08:00
    @maplelin 因为无效
    xinyu0
        39
    xinyu0  
       2021-12-22 18:03:52 +08:00
    ,,,开发浏览器,兄弟你详细了解下完整开发浏览器的难度吧,,,
    pengtdyd
        40
    pengtdyd  
       2021-12-22 18:39:05 +08:00
    只要能承载整个公司的业务,公司就离不开我,让自己不可替代,除非公司倒闭了,这就是卷的逻辑,
    salmon5
        41
    salmon5  
       2021-12-22 18:50:19 +08:00
    @maplelin #37 ,都是华而不实吹牛逼的东西,反正也没人 care 品质;这种现象太多了
    secondwtq
        42
    secondwtq  
       2021-12-22 18:58:22 +08:00
    这个主题最大的问题不在“开发浏览器”那块,是在于标题 ... 这个不仅仅是个解析器的问题 ... 解析器只是第一步,最 tricky 的应该是布局引擎那块。JS 引擎应该是现成的。
    horizon
        43
    horizon  
       2021-12-22 19:37:03 +08:00
    @maplelin 国内做的最多的还是对技术的包装,而不是创新。
    Geo200
        44
    Geo200  
       2021-12-22 19:53:41 +08:00 via Android
    怕不是 KPI 产物吧,等过一两年看项目还能不能活着再说
    musi
        45
    musi  
       2021-12-22 20:08:47 +08:00
    css 95%的通过率,牛逼吗?
    至少比我牛逼
    但是 css 100%的通过率就能做出来一个浏览器吗?
    melvin
        46
    melvin  
       2021-12-22 20:13:42 +08:00
    不就做了一层包装,封装了一个皮,有什么可值得炫耀的,让他写个 js 引擎试试
    wktrf
        47
    wktrf  
       2021-12-22 21:07:19 +08:00
    第一时间想起微信小程序
    mmmfj
        48
    mmmfj  
       2021-12-23 01:29:46 +08:00
    天天吹牛逼,也不见技术比国外强多少,踏实做事吧,已经是网红圈子了
    WenhaoWu
        49
    WenhaoWu  
       2021-12-23 04:35:07 +08:00 via iPhone
    还好吧,跟我公司用 dart 写一套 dsl 有异曲同工之妙
    undefine2020
        50
    undefine2020  
       2021-12-23 09:00:42 +08:00
    为什么国内大厂吹起技术跟老母猪带奶罩一样,一套接一套, 但是, 就是没有几个享誉全球的?
    murmur
        51
    murmur  
       2021-12-23 09:23:12 +08:00
    @maplelin 就是起步晚了,开源社区实在太成熟了,成熟到你挑不出一点毛病,就 cordova 这种你们说死透的东西还有维护,而且还后继有人
    2i2Re2PLMaDnghL
        52
    2i2Re2PLMaDnghL  
       2021-12-23 09:34:13 +08:00
    @maplelin 就『内卷』这个词的词源,印度尼西亚的单亩农产量难道赶超了欧美?
    内卷就是赶超无望后发生的事情。
    Biwood
        53
    Biwood  
       2021-12-23 15:58:02 +08:00
    @maplelin
    你应该说“正因为卷,所以没法超赶别人”,“内卷”英文词语是 involution ,也就是 evolution (进化) 的反义词:退化
    gearkey
        54
    gearkey  
       2021-12-28 09:25:13 +08:00 via Android
    啊这。。还是赶紧工人自治吧:github/gearkey/bluebook
    qe9999
        55
    qe9999  
       2022-01-14 20:39:21 +08:00
    解析 CSS 成 AST (有很多现成工具做,比如著名的 PostCSS ) -> 遍历 AST ,生成 Dart 的对应样式 widget 代码。

    仔细看看你也行,并没有涉及底层图形实现,不要太惊慌。但我非常好奇的是这种纯浪漫的项目为什么在字节也能够被支持,有啥落地场景吗?
    mostkia
        56
    mostkia  
       2022-02-25 23:24:13 +08:00
    自产自销还在使用 jquery 和原生 js 一把梭的表示不能理解,开发速度不依旧是老样子吗?前端造了那么多年的轮子,几年一换的技术,实际生产力也没见提高多少,以前一天几张页面,现在依旧没快多少,真心想不通为什么要卷成这样,而且我看现在的大部分的站点原代码也依旧停留在 jquery 阶段,不知道现在会 vue 全家桶、less 、nodejs 之类的那么多程序员都是给谁在写代码。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   981 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 22:08 · PVG 06:08 · LAX 15:08 · JFK 18:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.