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

[3dwelcome]

字节大佬的分享视频，完全是按照游戏的方式，去自渲染 HTML 和自定义的 CSS 子集。

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

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

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



https://www.bilibili.com/video/BV1xa411k77h

[liandi1990]

之前看字节前端 jd ，里面有一条“熟悉 webkit 内核优先”

[murmur]

正常，现在互联网都在裁员，不赶紧整出点轮子位置不保

就国内互联网公司的产品，3 年不开发甚至倒退 3 年都没什么问题，前者性能稳定后者小而美

[4ark]

卷出天际，快进到前端手写操作系统

[otakustay]

那后端早就自己改 JVM 了算什么？

[66beta]

@murmur 非常赞同，一个简单的流程，非要扯一些“千人千面、丰富多样的活动模型、流量输出”，把产品经理都辞退了，中文互联网能清净很多

[AV1]

没啥，我还手写 WebAssembly 呢。

[tabris17]

扯淡吧，写个 CSS 解析器+换个 JS 引擎就叫开发浏览器了？

[3dwelcome]

@tabris17

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

人家字节大佬不但敢设想，也同时做出来了，还有真实产品上架的。

[tabris17]

@3dwelcome 我能不能写出 CSS 解析器跟写个 CSS 解析器就吹牛逼“变成开发浏览器了”没有半毛钱关系

[Kilerd]

基本能到 95%通过率

老实说我真的不相信

[faceair]

记得阿里搞过类似的 https://openkraken.com/

[Sasasu]

看起来是把 CSS 翻译成 Flutter

[fgwmlhdkkkw]

nt

[fgwmlhdkkkw]

对于产品来说，有什么必要吗？

[agagega]

遇到问题->思考解决方案->判断解决方案需要的工作量是否值得->执行合适的方案 才是正确的思维方式。看到别人做了个什么看似底层的东西就说卷，有点学生思维了

[ipwx]

这就是为啥互联网大裁员。以前资本入驻互联网，为了全面垄断的预期，拼命砸钱耗死对手，所以什么人都养得起。现在政策变了，不允许全面垄断了，互联网即将转变为成熟的行业 —— 计较成本，不追求全面垄断了。所以这种人不一定会养得起了 lol

[murmur]

@agagega 思考解决方案，那今日头条最适合小程序啊，纯文字的浏览，浏览不知道真假还是谣言的东西，这太典型的小程序场景了

[otakustay]

@murmur #17 你这个定义的问题是用户视角的问题，可能字节更多还要看市场和商业的问题吧，比如如何实现用户价值的最大转化

[otakustay]

@3dwelcome #8 解析器是能写出来的，引擎就写不动了

[lneoi]

这 阿里不是在做北海 不是跟这个一个意思

[gaozihang]

实现看上去类似于 `flutter_html`, 另外 dart 有 css 解析库 `csslib`, 不知道是基于这个库写的还是完全从零开发。

[kisshere]

这不叫重复造轮子了，这叫重新种植橡胶树、冶炼橡胶了

[momocraft]

浏览器 css 太多文字排版的遗产了
用作 ui layout 其实不怎方便

[xff1874]

内卷太严重了

[feiandxs]

@momocraft flex 我觉得是一套优秀的体系，可以理解为某种底层 layout 的上层封装，是挺好用。
其他的我觉得靠 top left margin 耶差不多了。。。

[xylxAdai]

这就是我之前在字节做过的东西。。其实没那么玄乎，但是工作量真的很大。

[Biwood]

重复造轮子，跟微信小程序一样，明明有现成的技术标准，硬要自己圈出一套更封闭的系统，把原有的东西重新实现一遍，这就是“卷”的思维模式。
做产品的都喜欢学习 Apple 的风格，但是也没见到 Apple 强行重新发明一套 HTML 和 CSS 吧。

[Bijiabo]

我认为用 Flutter 开发应用这个行为本身就是一个因为卷、不愿意好好做事，至于在上面继续做什么，完全不奇怪，哪怕是因为这个去造个屏幕显示 Flutter 的画面都是可以理解的——早就脱离了业务本身。

[sikong31]

使用过 Flutter 的应该觉得这是一个正常的想法，况且难度上不是很高，对布局的补充，其实挺好的

[lnim]

之前组里搞热更新, 移动端上打包一个手写的 jvm 用来跑动态代码下发~ 而且这玩意还是纯 C, 跨平台~ 麻了 !!! 卷出天际

[steptodream]

服务器运维的，老板拉一车沙子，让我造 cpu

[catoncat]

@3dwelcome 『大佬最后说，不能再做下去了，要不然就真的变成开发浏览器了。』这句视频里没看到呀。人家的意思是成本和性能要控制，变成你这个表达容易招黑啊。

[ClassicOldSong]

在 Flutter 里用 JS 渲染 Flutter 应用
套娃🤣

[uqf0663]

小白弱弱的问一下，微信小程序是不是也类似这样自己写 CSS 解析器？

[murmur]

@uqf0663 微信小程序就是 webview ，但是应该加了一套东西让原本的 html+js+css 成了太监

[az467]

写浏览器怎么够。
WebOS ，我看行。

[maplelin]

我有个问题，国内这么卷，为啥技术力还是没法赶超欧美。

[ldspg123]

@maplelin 因为无效

[xinyu0]

，，，开发浏览器，兄弟你详细了解下完整开发浏览器的难度吧，，，

[pengtdyd]

只要能承载整个公司的业务，公司就离不开我，让自己不可替代，除非公司倒闭了，这就是卷的逻辑，

[salmon5]

@maplelin #37 ，都是华而不实吹牛逼的东西，反正也没人 care 品质；这种现象太多了

[secondwtq]

这个主题最大的问题不在“开发浏览器”那块，是在于标题 ... 这个不仅仅是个解析器的问题 ... 解析器只是第一步，最 tricky 的应该是布局引擎那块。JS 引擎应该是现成的。

[horizon]

@maplelin 国内做的最多的还是对技术的包装，而不是创新。

[Geo200]

怕不是 KPI 产物吧，等过一两年看项目还能不能活着再说

[musi]

css 95%的通过率，牛逼吗？
至少比我牛逼
但是 css 100%的通过率就能做出来一个浏览器吗？

[melvin]

不就做了一层包装，封装了一个皮，有什么可值得炫耀的，让他写个 js 引擎试试

[wktrf]

第一时间想起微信小程序

[mmmfj]

天天吹牛逼，也不见技术比国外强多少，踏实做事吧，已经是网红圈子了

[WenhaoWu]

还好吧，跟我公司用 dart 写一套 dsl 有异曲同工之妙

[undefine2020]

为什么国内大厂吹起技术跟老母猪带奶罩一样，一套接一套， 但是， 就是没有几个享誉全球的？

[murmur]

@maplelin 就是起步晚了，开源社区实在太成熟了，成熟到你挑不出一点毛病，就 cordova 这种你们说死透的东西还有维护，而且还后继有人

[2i2Re2PLMaDnghL]

@maplelin 就『内卷』这个词的词源，印度尼西亚的单亩农产量难道赶超了欧美？
内卷就是赶超无望后发生的事情。

[Biwood]

@maplelin
你应该说“正因为卷，所以没法超赶别人”，“内卷”英文词语是 involution ，也就是 evolution （进化） 的反义词：退化

[gearkey]

啊这。。还是赶紧工人自治吧：github/gearkey/bluebook

[qe9999]

解析 CSS 成 AST （有很多现成工具做，比如著名的 PostCSS ） -> 遍历 AST ，生成 Dart 的对应样式 widget 代码。

仔细看看你也行，并没有涉及底层图形实现，不要太惊慌。但我非常好奇的是这种纯浪漫的项目为什么在字节也能够被支持，有啥落地场景吗？

[mostkia]

自产自销还在使用 jquery 和原生 js 一把梭的表示不能理解，开发速度不依旧是老样子吗？前端造了那么多年的轮子，几年一换的技术，实际生产力也没见提高多少，以前一天几张页面，现在依旧没快多少，真心想不通为什么要卷成这样，而且我看现在的大部分的站点原代码也依旧停留在 jquery 阶段，不知道现在会 vue 全家桶、less 、nodejs 之类的那么多程序员都是给谁在写代码。。