一、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)