第十六届D2大会（I）

一、ReScript: JavaScript平台上高质量大规模程序构建的秘密武器

• 设计为js提供服务的脚本语言

• 数据与函数分离

  二、使用跨端方案 Rax 编写鸿蒙应用

  
  
  
  

• 多操作系统模式都有自己的一套体系，基于大前端的思路更加高效（人工成本更低）

• vDOM是一种标准的数据结构，数据驱动UI

• 多端渲染对接方案：1、语法编译，编译时思路；2、运行时思路；3、底层渲染指令思路

• 多端工程构建：大前端思路下构建多webpack任务（或者多其他打包工具任务，如rollup、vite、gulp等）

• 构建跨端方案离不开IDE侧的构建，对研发链路进行串联，兜底方案可以通过Dev Server方案对接第三方的IDE

  三、V8 JS AOT化的探索与实践

  
  
  
  
  

• JS AOT方案：1、使用本地代码（机器码，汇编），缺点：编译慢、体积大、内存高、性能差、CPU架构不通用；2、全字节码缓存，缺点：性能损耗；3、部分字节码缓存，缺点：版本问题、CPU通用性、机型通用性

• 有效性：1、PGO（Profile-guided optimization）预发布；2、先验规则，预测需要被执行的代码，增量更新；

• 兼容性：1、在线生成，① 空闲时间预热 ② 访问时生成；2、离线生成

• 移动端可做预发布阶段，为JS提供AOT的方案

  四、浅谈 web component 实践与应用

• Custom Element、Shadow DOM

  五、解读千万级关系网络下的数据探寻可视化技术

  

• 海量数据关系处理，使用DAGRE布局+视觉通道映射（颜色）技术绘制节点依赖关系

• 海量数据处理方案：1、离线渲染技术，PlanUml及Offline Canvas；2、局部渲染技术，脏矩阵渲染；3、双引擎切换，GPU渲染

• “毛团”现象处理，图简化技术：1、点聚合，划分粒度，如：下钻访问、交互；2、边剪枝，减少视觉混乱，如：反向删除算法、Prim算法；3、边绑定，减少视觉混乱，如：突出边缘模式；

• 可视分析，从业务需求角度出发，包括图数据库等的建立

• 可视布局：解决通用布局策略局限性，使用布局融合技术解决：1、子图嵌入（DAGRE+GRID）；2、布局叠加：前置布局+力导布局+节点压实+网路对齐+网格扩容；3、子图融合；4、智能布局；5、渐进布局

• 子图嵌入方案：1、节点分层；2、虚拟分组；3、节点布局；4、分组内嵌

• 图质量分析：1、分组分析；2、地理空间分析；3、时序分析；4、算法分析

• 图产品思路：上游链路分析，下游影响分析

  六、向量到墨水：从绘画视角解析三维模型的漫画风格渲染技术

  

• CEL 动漫风格，着色器渲染：1、颜色相接(Color Differential)，由色相、对比度、饱和度插值产生；2、深度断层(Depth Fall)，由深度变化的不连续产生；3、面的压缩(Compression of Surface)，由视线与物体边缘相切程度产生

  七、开源表单方案 Formily 的核心设计思路

  
  
  
  

• “数据+协议”表单框架：协议层+桥接层+应用层

• 工具类编辑器海量字段表单渲染方案

• 扩展方案：1、属性扩展；2、上下文扩展；3、连接器扩展；4、模板扩展

  八、协同文档工作机制简介

  

• 文档模型 -> 视图模型，无依赖contentEditable

• OT及CRDT协同

  九、CRDT 实时协作技术在稿定编辑器中的应用

  
  

• Event Souring机制：1、rebase机制，如：git操作；2、operation机制，如：OT(Operational Transform)；3、model机制，如：CRDT(Conflict-free Replicated Data Type)

• YATA算法，Yjs落地

• 性能优化

• 测试方案

  十、虚拟偶像诞生记 - 数字人行业和技术探究

  
  
  
  

• 虚拟人物构建

• web3.0困境

• 云渲染：Serverless、web 3d+puppeteer、非实时渲染

  十一、Web端短视频编辑器的设计与实现 - 像做PPT一样做视频

  
  
  

• 编辑器设计：通用编辑器构建，分层构建
• 视频编辑器分层：应用层、引擎层、依赖层

• 时钟同步、音视频编辑码
• 编解码方案：1、FFmpeg+wasm；2、WebCodecs API+库（如：mux.js）