写在开始
2021.7.31 是个礼拜六，享受双休的日子。但早上闹钟把我喊起来，说有个很重要的线下技术沙龙，就在中关村，必须去啊，哈哈哈~
中午吃了顿肉肉，然后睡了一个小时 o(╯□╰)o 养精蓄锐，毕竟下午有好多新知识要消化。大概13:30时候，拎着电脑就冲向了隔壁微软。
没想到的是，人家CEO也去现场了。有句让我印象很深：'我们希望保持技术的纯粹性'。听到这句话，我知道接下来的技术会比硬广要少一些，是值得听下去的。
我的分享
截止目前，现场小伙伴们呼吁的讲师们PPT还没有公开，那我就暂时把自己按照议题顺序记下的笔记发出来，供小伙伴们参考。
一、淘系 web 前端架构开发实践
脚手架
框架: 1. 提供标准 2. 技术收收敛
Icejs ice-scriptes2.x
设计:
工程设计: 底层依赖 插件体系 配置文件 对外命令
核心 插件机制
ESM
默认webpack vite；默认webpack: 应用多 社区方案多；两者 对比
Webpack 预编译 module f (知乎有个文章介绍) host remote 消费 虚拟应用
分析运行时依赖 -> 构建第三方虚拟应用 -> 编译 作为host
webpack5文件缓存的能力
工程能力 运行时能力
Ssr...
研发升级模式 ？
同仓库 同依赖 同命令
共享src 类型 代码
一起开发 一起部署这个略微有点小失望的是讲师没到，播放的视频。
二、如何进行前端性能的观测
### 可观测性
指标 日志 链路
### 前端指标以及如何采集
1. 性能指标
页面性能 资源性能
LCP 载入速度 <2.5s 4.0s
FID 互动性 100ms 300ms
CLS 稳定性 0.1 0.25
以及...具体
2. Error信息
network http request
console
runtime window.onerror
3. 用户操作
action winddow onclick 排除无效aciton(无dom更新、无网络请求)
采集 跟上
### 观测指标数据可视化
分类 图表 查询(DQL) es
组件库
接入SDK
### 系统的全链路可观测性方案
应用性能检测 开源方案 zipkin DDTrace Skywalking jaeger
数据链路的关联性
场景: 指标库 基础设施日志分析 应用性能 用户访问 安全巡检 云观测
DataFlux (sass形式)
讲的点点很多，基础知识我也跟着回顾了下，挺赞的老师 👍🏻
三、面向未来与浏览器规范的前端 DDD 架构设计
### 技术背景
微前端 bit qiankun webpack的mf ... iframe
npm包
使用React Vue 不同技术栈
组件库痛点 antd 人力 时间 成本
兼容
本质是 html css js 越发展 复用能力越弱
磨平框架带来的限制
社区
直接原生
现在方案能解决 但不够优秀
1. single-spa 主从应用 应用调度器 模块调用；主应用只是调用子应用生命周期 ; 对老逻辑友好
2. web components 原生标签tag
3. omi
4. shoelace 更便捷的使用体验
共有局限 自建体系或DSL 无法快速承接已有逻辑
结合 single-spa + web components
### 能力实现
微服务本质 领域驱动设计
先看后端DDD模式实现 docker
微服务 抽象和分治的过程
所有框架的render逻辑 本质就是appendChild 从共性点入手 -> webcomponents提供容器+spa生命周期让用户自定义渲染逻辑 -> webc兼容性
浏览器原生能力得到更好的支持
本次分享我们将会介绍在现有的业务场景下，我们对前端 DDD 架构体系的思考过程以及设计实践，最终如何借助社区 Portals（ https://github.com/WICG/portals ）以及 Realms（https://github.com/tc39/proposal-realms）提案的设计思想，打造更贴合浏览器发展趋势的微前端框架，并以此解决我们实际的业务问题。
systemJS
cjs npm i 过程
umd window全局变量
esm 兼容性问题
组件服务化模式
webpack module federation 生产-复用逻辑的过程也会因此受限于构建工具带来的体系 vite rollup
web components 根本局限: html作为标记语言 只能承接String的Attributes props
WC框架的常见解决方案 DSL，
Magic一切问题都可以通过一个函数解决
最大程度贴合现在开发者习惯 减少学习成本
如何复用单元适用千变万化场景
领域驱动
六边形架构(装饰器?)
webpack插件机制
magic使用过程: 引用 注册 使用
Magic核心: 设计概念
jquery工具 m也是提供工具函数 贴合开发者的使用舒适度 使用直觉
### 业务落地
打磨过程
页面的模块化复用场景
集群型微前端场景
社区
Portals
Realms
为什么不 iframe 类似flash 沙箱
需更灵活的触达渲染底层的能力
### 未来展望
《围城》
社区框架 svelte vue3 react
探索阶段
搭积木
###### 讲师
语速 节奏很快
时间把控
这个话题是我觉得今天分享中，讲师持续讲话最多的一位 😄
四、前端电子表格技术分享
表...
### 性能- 表格渲染
HTML5 Canvas 绘制模型
canvas 分层渲染
油画绘制
分为主体图层和装饰图层
双缓存画布
页面滚动: 清空主画布 裁剪缓存画布 绘制新内容 更新缓存画布
问题 js精度 高dpi
### 内存-数据存储
二维数组
对象数组
数据字典
按需构建 节省内存
json序列化
基于行模式的稀疏矩阵存储策略
### 可靠性
1. 支撑复杂逻辑运算的计算引擎
1. 公式字符串
1. 词法分析 得到字符串数组
2. 语法分析 根据优先级，将字符串数组组成装成表达式树
3. 计算表达式树 通过递归调用来计算
4. 3同时 构建依赖关系的计算链，统计入度(rudu: 单元格依赖其他单元格的数量)
1. 常规运算(有向无环图)
2. 按需计算 脏的概念
公式IRR 内部回报率 应用
gogosheet 逼近算法?
葡萄城社区
### 感想
刚开始的“表”释义和话题开始衔接, 前一个讲师有点多.
罗列式
这块跟算法强相关
五、React 对全球前端框架发展的影响
React的定位(视图状态)
领域状态 + 视图状态
状态管理
路由 请求库 工程化
### 架构层面
极致的运行时概念
svelte solid 编译时
vue3 运行+编译
UI = Fn(state) => 视图=库(数据)
#### 更新粒度
1. 节点级更新粒度
Svelte
特点: 预编译技术、关心触发更新的节点、没有虚拟dom
2. 树级更新粒度
React
两棵树比较变化的部分
特点: 基本没有编译、不关心触发更新的节点、虚拟dom
3. 组件级更新粒度
Vue
组件子树去更新 react整棵树虚拟
特点: 虚拟dom、关心触发更新节点、有预编译能力
描述视图的方式 => 虚拟dom => 真实dom
↓
(jsx 模板语法) => vue都有
### 特性层面
Hooks
设计理念: 代数效应
工程角度: 逻辑收敛、功能复用
hooks是一个初一数学知识
2x + 1 = y x自变量 y因变量
有副作用的因变量 无副作用的因变量
(卡老师开启绕口令模式...)
#### React Concurrent Mode (CM)
https://zhuanlan.zhihu.com/p/60307571
视图库
性能瓶颈：
1. cpu
减少运行时流程： 提供性能优化API
减少用户感知：
时间切片
1. 自动批处理
2. ?star
2. io
网络延迟 : 请求尽快发出去 suspense
react18 全新ssr解构
#### note
react所有节点加Key 时间复杂度是O(n^3) ？
不给所有加 降低时间复杂度 那是多少？
吧啦吧啦最后啦
- 以上纯属个人现场笔记，暂没有做进一步的整理，xdm凑合看哈，关键点除了看不清的，我想应该算是比较齐全咯~
- 官方赠送的短袖设计挺好的，本来想穿着出去秀一波，今早洗时候发现掉色有点狠，还好logo没洗掉 😝