2021 TWeb 腾讯前端技术大会精彩回顾(附PPT)

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

周日参加了 TWeb 腾讯前端技术大会, 这里根据自己的理解, 对部分主题进行总结回顾, 一些主题本文只是做概要性的介绍, 如果对主题感兴趣, 可以关注 "前端Q", 号内回复 tweb 领取大会全部 ppt.

我们来看第一个主题~

腾讯文档渲染优化之路

讲师: 肖骏 - 腾讯前端开发工程师

腾讯文档目前有 1.6 亿月活, 日活用户峰值超过了 1600 万, 它需要支撑起千人同时编辑, 极限情况下，需要支撑数十万行的数据渲染交互不卡顿.

讲师讲述了在河南暴雨汛情期间, 一份 "救命文档" 写下的民间史诗. 验证了腾讯文档的高性能以及重要性.

腾讯文档是怎么一步步优化性能的呢? 讲师从以下几步做了阐述

• dom 时代:

  • 使用will-change 或translateZ 等提升元素层级

  • 使用transform 和opacity 属性

  • 尽量避免改变元素的几何属性（例如宽度、高度、左侧或顶部位置等）

  • 修改“paint only”属性（例如背景颜色、文字颜色等）-> repaint

  • layout

  • paint 优化

  • dom 滚动复用, 通过虚拟列表减少渲染的 dom 数量

• canvas 时代:

  • 遍历待绘制内容

  • 相同状态内容整理

  • 分类渲染

  • 单元格使用 canvas 渲染

  • 减少渲染时触发 GC

  • canvas 切换状态机优化

  • 离屏 canvas 与复用

讲师除了介绍腾讯文档的优化手段, 还介绍了如何精确、自动化地统计 FPS, 这里就不展开了, 详细的可以在 ppt 查看, 我们继续下一个主题~

Flutter 音视频开发实践

讲师: 牛赞 - 腾讯前端高级工程师

根据 statista 和 stackoverflow 的统计数据, 今年 flutter 的热度已经超过了 react native.

讲师介绍了 Flutter 的架构, Flutter 和 Web 开发的差异. 也介绍了腾讯实时音视频 TRTC（Te