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

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

  •  2
     
  •   3dwelcome · 148 天前 · 7077 次点击
    这是一个创建于 148 天前的主题,其中的信息可能已经有所发展或是发生改变。
    字节大佬的分享视频,完全是按照游戏的方式,去自渲染 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  
       148 天前 via iPhone
    之前看字节前端 jd ,里面有一条“熟悉 webkit 内核优先”
    murmur
        2
    murmur  
       148 天前   ❤️ 14
    正常,现在互联网都在裁员,不赶紧整出点轮子位置不保

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

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

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

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

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