我在腾讯这一年

·  阅读 24043
我在腾讯这一年

时光不负,创作不停,本文正在参加2022年中总结征文大赛

去年初,我从 Shopee 离职加入了腾讯文档前端团队,当时也是奔着大名鼎鼎的 AlloyTeam 去的。

原本最初的目标是去找一份做跨端开发或者 NodeJS 开发的工作,但还是被当时的组长以 "我们是华南地区最强前端技术团队之一" 给诱惑了。

思来想去,在线文档确实是前端天花板项目了,再加上是知名技术团队,觉得比较靠谱。

核心竞争力

当时对自己的实力还是有自信的,我觉得自己看源码速度很快,刷过各种库的源码,懂各种原理,还在慕课网写过一本教程。

以前做过移动端开发,也做过管理系统,也做过 NodeJS、CI 等等,涉及到的技术栈很多,但都缺少深度,只是多而杂。这里的深度并非指读源码,而是在某一个领域有非常深的造诣。

其实做一百个页面和十个页面其实没有本质区别,来一个应届生一样可以做,那为什么还需要我呢?

所以在从 Shopee 离职的时候,我一直在思考,自己的核心竞争力在哪里呢?

基于对这些的思考,加上当时已经快四年经验了,内心也是比较焦虑的。按照当时的水平,如果去面阿里,一定是到不了 P7 的。实际上去面了一圈,虽然大厂 offer 都拿了,但职级就是上不去。

当时的想法是,一定要好好选一个靠谱的前端团队,选择一个领域多耕耘几年。

腾讯文档

刚入职的时候,比较能够感受到腾讯文档浓厚的技术氛围。这边是我待过最大的前端技术团队(一百多号人),很多业界的技术大牛都在这边。

当时印象比较深刻的 Code Review 和单元测试。由于当时在搞 EPC(虽然争议很大),所以要求非常严格,经常一条 MR 被提20多条问题。每周会有一天时间留给写单元测试,对代码质量要求很高。

文档不同于传统 Web 项目,整体的复杂度很高,更像是自己造了一个浏览器排版+渲染引擎,需要保持不断地学习。

以下面这个为例,如果我们要在文档里面渲染这么一句话,要怎么去处理呢?

在传统的 HTML + CSS 里面,只需要在文本外设置一个 Div,设置一下换行策略就好了,浏览器会帮你去处理要在哪里换行?要不要加省略号...?

但在 Canvas 里面,这些都需要我们自己去算。最简单的方式就是对这串文本进行二分法,每次用 measureText 来测宽度,不断地去二分,最终找到了原来需要在"的"和"在"之间换行,需要在"编辑"后面加上省略号。

但这样也会有问题,比如我二分测量了十次,那"腾讯文档"这四个字宽度也被测量了10次,如果文档内容比较多,整体排版耗时不就显著增加了吗?

更好的方式就是对这句话做分词,按照一定的规则将一句话拆成多个词,对词宽度进行测量,将测量后的宽度缓存起来,由于文档里面大都是重复的文字,所以这样可以避免很大的重复测量。

那这里也要注意一下,为什么要分词呢?直接测单独的文字宽度不行?确实是不行,尤其是英文里面,不同的字母的 kerning(间隔)是不一样的,直接测单个字母宽度累加是不准的。

除了这个,遇到 emoji 的场景又要如何处理呢?尤其是 👪 这种 length 大于1的 emoji。日文韩文泰文等又怎么处理呢?

这只是工作中遇到的一个场景,但也已经体现了文档业务的复杂性。

智能表格

试用期转正后,当时有两条路可以选择,一个是继续留在 Word 组做底层的 ooxml 数据升级,另一个是去隔壁组做智能表格新项目。

当时思考了一下,自己对文档完全零基础,试用期也一直在做一些杂活,继续留在 Word 也会比较难,果断选择了去做智能表格。

接触了智能表格之后,才发现这是多么一个创新的产品,尤其适合 B 端用户。一份数据,多种展示形态,本质上是一个在线数据库,是天然的低代码平台。

国外的 Airtable 早就已经火起来了,国内的维格表、飞书多维表格、黑帕云等都想占领这个市场,我们算是起步比较晚的。

经历了一年的开发,前阵子终于正式对外发布了。

传送门:请新建智能表

Canvas 和性能优化

去年中之前一直没有接触过 Canvas,以前完全没有这方面的经验。

刚去做智能表格的时候,被安排做渲染层,当时觉得充满了挑战,对于未知领域的技术,我一向是保持好奇心的。

趁着做渲染层的这段时间,先后刷了 Konva、ZRender(echarts)、Antv 这几个库的源码,对 Canvas 各种特性都很快就了解了。现在在 Google 搜 Konva,第一页还能看到我去年写的文章。

image.png

在这期间都在接触类似上面那个例子一样复杂的场景,几乎每天都在思考如何做性能优化,对着火焰图看是常态了,也经常去咨询团队或者公司内外的一些大佬们,咨询一些优化方案。

在智能表格这段时间,不仅做了渲染层的业务,还做了滚动 FPS 优化,做了服务端渲染,做了首屏异步分片计算,也做了 Canvas 的 Devtool 调试插件。

期间写了一些博客,基本上都上了内网头条。

至今依然觉得 Web 渲染是一个很好的方向,尤其是元宇宙的火热,对这方面人才的需求会越来越多。

回校授课

虽然这件事说了很多遍,但对于我来说是一件比较有意义的事情。

去年有幸成为腾讯文档前端菁英班 Web 前端选修课的讲师(16课时、一学分),全程负责了菁英班的课程制作、现场授课、作业布置和批改、期末考核等等。

再次回到母校的感觉还是有很大的不一样。以前回到学校后能明显感觉到自己早已不属于这里了,但这几次回去能感觉到我是学校的一份子,还是以老师的身份回来的。

未来

我是对未知的技术非常好奇的那种人,永远保持一颗热爱技术的心。目前在文档还有很大的空间要走,有很多大牛值得我去学习,也有很多功能需要我们去完善、优化。

收藏成功!
已添加到「」, 点击更改