第十六屆D2大會(I)

野林發表於2021-12-19

一、ReScript: JavaScript平臺上高質量大規模程式構建的祕密武器

141639790079_.pic_hd.jpg

  • 設計為js提供服務的指令碼語言

151639790483_.pic_hd.jpg

  • 資料與函式分離

    二、使用跨端方案 Rax 編寫鴻蒙應用

    161639791417_.pic_hd.jpg
    171639791552_.pic_hd.jpg
    181639791786_.pic_hd.jpg
    191639791856_.pic_hd.jpg

  • 多作業系統模式都有自己的一套體系,基於大前端的思路更加高效(人工成本更低)

201639792127_.pic_hd.jpg
211639792191_.pic_hd.jpg
221639792247_.pic_hd.jpg

  • vDOM是一種標準的資料結構,資料驅動UI

231639792340_.pic_hd.jpg
241639792497_.pic_hd.jpg

  • 多端渲染對接方案:1、語法編譯,編譯時思路;2、執行時思路;3、底層渲染指令思路

251639792624_.pic_hd.jpg
261639792692_.pic_hd.jpg

  • 多端工程構建:大前端思路下構建多webpack任務(或者多其他打包工具任務,如rollup、vite、gulp等)

271639792714_.pic_hd.jpg
281639792795_.pic_hd.jpg

  • 構建跨端方案離不開IDE側的構建,對研發鏈路進行串聯,兜底方案可以通過Dev Server方案對接第三方的IDE

    三、V8 JS AOT化的探索與實踐

    301639793501_.pic_hd.jpg
    321639793598_.pic_hd.jpg
    341639793760_.pic_hd.jpg
    351639793921_.pic_hd.jpg
    361639794052_.pic_hd.jpg

  • JS AOT方案:1、使用原生程式碼(機器碼,彙編),缺點:編譯慢、體積大、記憶體高、效能差、CPU架構不通用;2、全位元組碼快取,缺點:效能損耗;3、部分位元組碼快取,缺點:版本問題、CPU通用性、機型通用性

371639794169_.pic_hd.jpg
381639794337_.pic_hd.jpg

  • 有效性:1、PGO(Profile-guided optimization)預釋出;2、先驗規則,預測需要被執行的程式碼,增量更新;

391639794434_.pic_hd.jpg
401639794527_.pic_hd.jpg
411639794640_.pic_hd.jpg

  • 相容性:1、線上生成,① 空閒時間預熱 ② 訪問時生成;2、離線生成

421639794754_.pic_hd.jpg
431639795008_.pic_hd.jpg

  • 移動端可做預釋出階段,為JS提供AOT的方案

    四、淺談 web component 實踐與應用

  • Custom Element、Shadow DOM

    五、解讀千萬級關係網路下的資料探尋視覺化技術

    441639805937_.pic_hd.jpg

  • 海量資料關係處理,使用DAGRE佈局+視覺通道對映(顏色)技術繪製節點依賴關係

451639806142_.pic_hd.jpg
461639806199_.pic_hd.jpg

  • 海量資料處理方案:1、離線渲染技術,PlanUml及Offline Canvas;2、區域性渲染技術,髒矩陣渲染;3、雙引擎切換,GPU渲染

471639806365_.pic_hd.jpg

  • “毛團”現象處理,圖簡化技術:1、點聚合,劃分粒度,如:下鑽訪問、互動;2、邊剪枝,減少視覺混亂,如:反向刪除演算法、Prim演算法;3、邊繫結,減少視覺混亂,如:突出邊緣模式;

481639806502_.pic_hd.jpg
491639806589_.pic_hd.jpg
501639806660_.pic_hd.jpg
511639806815_.pic_hd.jpg

  • 可視分析,從業務需求角度出發,包括圖資料庫等的建立

521639806942_.pic_hd.jpg
531639806999_.pic_hd.jpg
541639807082_.pic_hd.jpg

  • 可視佈局:解決通用佈局策略侷限性,使用佈局融合技術解決:1、子圖嵌入(DAGRE+GRID);2、佈局疊加:前置佈局+力導佈局+節點壓實+網路對齊+網格擴容;3、子圖融合;4、智慧佈局;5、漸進佈局

551639807226_.pic_hd.jpg
561639807309_.pic_hd.jpg
571639807337_.pic_hd.jpg
581639807349_.pic_hd.jpg
591639807363_.pic_hd.jpg
601639807377_.pic_hd.jpg
611639807399_.pic_hd.jpg
621639807517_.pic_hd.jpg
631639807550_.pic_hd.jpg

  • 子圖嵌入方案:1、節點分層;2、虛擬分組;3、節點佈局;4、分組內嵌

641639807613_.pic_hd.jpg

  • 圖質量分析:1、分組分析;2、地理空間分析;3、時序分析;4、演算法分析

651639807692_.pic_hd.jpg
661639807731_.pic_hd.jpg

  • 圖產品思路:上游鏈路分析,下游影響分析

    六、向量到墨水:從繪畫視角解析三維模型的漫畫風格渲染技術

    731639809047_.pic_hd.jpg

  • CEL 動漫風格,著色器渲染:1、顏色相接(Color Differential),由色相、對比度、飽和度插值產生;2、深度斷層(Depth Fall),由深度變化的不連續產生;3、面的壓縮(Compression of Surface),由視線與物體邊緣相切程度產生

    七、開源表單方案 Formily 的核心設計思路

    761639809722_.pic_hd.jpg
    811639810191_.pic_hd.jpg
    821639810251_.pic_hd.jpg
    831639810301_.pic_hd.jpg

  • “資料+協議”表單框架:協議層+橋接層+應用層

771639809838_.pic_hd.jpg
781639809916_.pic_hd.jpg
791639809972_.pic_hd.jpg
801639810016_.pic_hd.jpg

  • 工具類編輯器海量欄位表單渲染方案

841639810414_.pic_hd.jpg
851639810462_.pic_hd.jpg
861639810499_.pic_hd.jpg
871639810553_.pic_hd.jpg

  • 擴充套件方案:1、屬性擴充套件;2、上下文擴充套件;3、聯結器擴充套件;4、模板擴充套件

    八、協同文件工作機制簡介

    921639811774_.pic_hd.jpg

  • 文件模型 -> 檢視模型,無依賴contentEditable

901639811703_.pic_hd.jpg
911639811735_.pic_hd.jpg
WechatIMG94.png

  • OT及CRDT協同

    九、CRDT 實時協作技術在稿定編輯器中的應用

    951639812233_.pic_hd.jpg
    961639812382_.pic_hd.jpg

  • Event Souring機制:1、rebase機制,如:git操作;2、operation機制,如:OT(Operational Transform);3、model機制,如:CRDT(Conflict-free Replicated Data Type)

971639812629_.pic_hd.jpg
981639812693_.pic_hd.jpg
991639812798_.pic_hd.jpg
1001639812984_.pic_hd.jpg
1011639813131_.pic_hd.jpg

  • YATA演算法,Yjs落地

1021639813278_.pic_hd.jpg
1041639813436_.pic_hd.jpg
1051639813610_.pic_hd.jpg

  • 效能優化

1061639813755_.pic_hd.jpg
1071639813766_.pic_hd.jpg
1081639813828_.pic_hd.jpg

  • 測試方案

    十、虛擬偶像誕生記 - 數字人行業和技術探究

    1091639814991_.pic_hd.jpg
    1101639815629_.pic_hd.jpg
    1111639815937_.pic_hd.jpg
    1121639816463_.pic_hd.jpg

  • 虛擬人物構建

1131639816704_.pic_hd.jpg

  • web3.0困境

1151639816939_.pic_hd.jpg

  • 雲渲染:Serverless、web 3d+puppeteer、非實時渲染

    十一、Web端短視訊編輯器的設計與實現 - 像做PPT一樣做視訊

    1161639817777_.pic_hd.jpg
    1171639817842_.pic_hd.jpg
    1191639817971_.pic_hd.jpg

  • 編輯器設計:通用編輯器構建,分層構建
  • 視訊編輯器分層:應用層、引擎層、依賴層

1201639818083_.pic_hd.jpg
1221639818348_.pic_hd.jpg
1231639818403_.pic_hd.jpg
1241639818497_.pic_hd.jpg
1271639818628_.pic_hd.jpg
1281639818772_.pic_hd.jpg
1301639818879_.pic_hd.jpg

  • 時鐘同步、音視訊編輯碼
  • 編解碼方案:1、FFmpeg+wasm;2、WebCodecs API+庫(如:mux.js)

相關文章