2021 TWeb 騰訊前端技術(shù)大會精彩回顧(附PPT)

周日參加了 TWeb 騰訊前端技術(shù)大會, 這里根據(jù)自己的理解, 對部分主題進(jìn)行總結(jié)回顧, 一些主題本文只是做概要性的介紹, 如果對主題感興趣, 可以關(guān)注 "前端Q", 號內(nèi)回復(fù) tweb 領(lǐng)取大會全部 ppt.

我們來看第一個主題~

騰訊文檔渲染優(yōu)化之路

講師: 肖駿 - 騰訊前端開發(fā)工程師

騰訊文檔目前有 1.6 億月活, 日活用戶峰值超過了 1600 萬, 它需要支撐起千人同時編輯, 極限情況下，需要支撐數(shù)十萬行的數(shù)據(jù)渲染交互不卡頓.

講師講述了在河南暴雨汛情期間, 一份 "救命文檔" 寫下的民間史詩. 驗(yàn)證了騰訊文檔的高性能以及重要性.

騰訊文檔是怎么一步步優(yōu)化性能的呢? 講師從以下幾步做了闡述

• dom 時代:
• 使用will-change 或translateZ 等提升元素層級
• 使用transform 和opacity 屬性
• 盡量避免改變元素的幾何屬性（例如寬度、高度、左側(cè)或頂部位置等）
• 修改“paint only”屬性（例如背景顏色、文字顏色等）-> repaint
• layout
• paint 優(yōu)化
• dom 滾動復(fù)用, 通過虛擬列表減少渲染的 dom 數(shù)量
• canvas 時代:
• 遍歷待繪制內(nèi)容
• 相同狀態(tài)內(nèi)容整理
• 分類渲染
• 單元格使用 canvas 渲染
• 減少渲染時觸發(fā) GC
• canvas 切換狀態(tài)機(jī)優(yōu)化
• 離屏 canvas 與復(fù)用

講師除了介紹騰訊文檔的優(yōu)化手段, 還介紹了如何精確、自動化地統(tǒng)計 FPS, 這里就不展開了, 詳細(xì)的可以在 ppt 查看, 我們繼續(xù)下一個主題~

Flutter 音視頻開發(fā)實(shí)踐

講師: 牛贊 - 騰訊前端高級工程師

根據(jù) statista 和 stackoverflow 的統(tǒng)計數(shù)據(jù), 今年 flutter 的熱度已經(jīng)超過了 react native.

期間, 講師詳細(xì)介紹了 TRTC 的架構(gòu), 以及 Flutter 在這個架構(gòu)中扮演的角色.

最后, 講師介紹了 TRTC Flutter 音視頻的 SDK 設(shè)計, 主要圍繞以下面臨的幾個挑戰(zhàn)來闡述:

這些問題, 讀者如果感興趣, 可以獲取到 ppt 后進(jìn)一步了解~

我們來看下一個主題:

如何設(shè)計一門上萬人使用的 DSL - 騰訊問卷 DSL 實(shí)踐之路

講師: 李澤帆 - 騰訊前端工程師

騰訊問卷的開發(fā)同學(xué)會做一些問卷的定制開發(fā), 每份問卷, 和需求方溝通, 可能要 3 天時間才能開發(fā)完. 通常會出現(xiàn)如下情況:

面對這種溝通成本巨大的場景, 需求方清楚地知道邏輯, 但不會寫代碼. 這種情況就適合用 DSL 來解決.

這里簡單介紹下 DSL (Domain-specific language), 中文翻譯為領(lǐng)域特定語言，例如 SQL、JSON、正則表達(dá)式等。與之形成對比的是 GPL（General Purpose Language），中文翻譯為通用編程語言，我們熟悉的C、C++、JavaScript、Java 語言等就是。

DSL 有如下特點(diǎn):

• 是一門便于人們理解的編程語言或規(guī)范語言，并且可以被計算機(jī)解釋執(zhí)行。
• 相比于通用編程語言，只能表達(dá)有限的邏輯。
• 因?yàn)槭芟薜谋磉_(dá)性，所以只會在某一些領(lǐng)域廣泛應(yīng)用。

我們來看一下騰訊問卷實(shí)現(xiàn)的 DSL

我們來簡單了解下實(shí)現(xiàn)原理:

• 通過使用解析器生成器將 DSL 翻譯成可執(zhí)行的語句, 騰訊問卷使用了 PEG.js

  

來看一個案例, 如何通過 DSL 表述兩分鐘前:

來看一下基于 peg.js 的實(shí)現(xiàn):

可以看到, 有了 PEG.js, 我們不需要了解編譯原理, 就可以很好地完成一個簡單的 DSL 語言的編寫.

講師除了介紹 DSL 的實(shí)現(xiàn)方法之外, 還介紹了怎么設(shè)計更容易被書寫, 以及 DSL 利弊. 詳情還是查看 ppt 啦~

遠(yuǎn)程辦公下開發(fā)測試協(xié)同如何提效

講師: 楊晨(騰訊前端工程師) & 吳文斌 (騰訊前端高級工程師(whistle 作者))

兩位講師主要介紹了一個基于【W(wǎng)histle】的代理集成多種功能的免代理平臺 TDE (Tencent Debugging Experience). 對于還不了解 whistle 是什么的同學(xué), 可以點(diǎn)擊這里了解:Whistle實(shí)用功能介紹.

擁有了 TDE, 我們就可以不用在本地安裝 whistle, 而是通過一套系統(tǒng), 在被測界面上注入操作面板解決各種代理, 抓包問題. 比如切換環(huán)境只需要在被測界面的面板點(diǎn)一下. 另外就是可以做到云抓包, 比如開發(fā)可以抓到測試同學(xué)的包. 同時 TDE 也解決了我們的代理配置無法共享的問題:

本次分享, 講師還詳細(xì)介紹了實(shí)現(xiàn)原理, 比如 whistle, nohost 的架構(gòu)和實(shí)現(xiàn)細(xì)節(jié), 安全機(jī)制等.

這個主題很多很多干貨,就不列舉了，只能說不能錯過。?大家感興趣的話還是進(jìn)一步查看 ppt 哈~

Kubernetes 微服務(wù)體系下的便捷 BFF 開發(fā)

講師: 王振威 - CODING 研發(fā)總監(jiān)

講師介紹了 BFF (Backend for Frontend) 的由來, 在沒有 BFF 層時, 前端向后端請求數(shù)據(jù), 會面臨一個 N + 1 問題 (一個界面請求 N 個接口), 如:

這是不合理的, 渲染一個博客列表, 不僅需要查詢博客列表, 還需要查詢博客詳情, 另外還要再分別發(fā)請求獲取博客的評論, 點(diǎn)贊信息的請求.

這里的本質(zhì)問題是前端是界面思維, 后端是數(shù)據(jù)思維, 這么直接請求, 就會導(dǎo)致接口調(diào)用復(fù)雜失控, 不利于后期維護(hù):

所以我們需要 BFF 層:

接著, 講師介紹在 kubernetes 下, BFF 會面臨以下問題:

• 環(huán)境搭建
• 微服務(wù)數(shù)量多, 環(huán)境搭建復(fù)雜
• 環(huán)境脆弱，易損壞
• 本地資源不夠用
• 微服務(wù)占用資源太多
• 編碼自測循環(huán)耗時太久, 有些服務(wù)本地?zé)o法完成調(diào)試, 需要部署到開發(fā)或測試環(huán)境.

講師介紹了通過 K8s 生態(tài)打造彈性環(huán)境體系來解決以上問題, 彈性環(huán)境體系可以確保每個人擁有云上獨(dú)立的開發(fā)測試環(huán)境, 此外還可以通過 vscode 插件直連開發(fā)環(huán)境, 做到修改代碼及時生效.

這一切, 都封裝在背后, 對于開發(fā)者而言, 只是簡單的改動代碼, 環(huán)境, 資源都不需要考慮.

如上圖, vscode 通過安裝 nocalhost 插件, 點(diǎn)擊開發(fā)環(huán)境右側(cè)的小錘圖標(biāo)按鈕, 即可在本地開發(fā)代碼, 而這些代碼, 包括 vscode 中的命令行, 都是一個云上的, 改完代碼重啟服務(wù)可以立即看到效果, 而無需等待漫長的 CI CD 流程.

如果大家想進(jìn)一步了解 nocalhost, 可以觀看如下視頻, 或查看 ppt:

TWeb 還有很多主題這里沒有介紹, 如低代碼, 可視化, 跨端, 編輯器和效能方面的一些主題, 限于篇幅, 這里就不一一展開了, 大家可以關(guān)注 "前端Q", 號內(nèi)回復(fù) tweb 領(lǐng)取大會全部 ppt 進(jìn)行學(xué)習(xí)哦~