共计 3165 个字符，预计需要花费 8 分钟才能阅读完成。
写在开始
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 没洗掉 😝
祝 segmentfault 越来越好，D-Day 越来越棒~
by 我说的
本文参加了 SegmentFault D-Day 征文，欢送正在浏览的你也退出。
正文完