写在开始
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 生产 虚构利用剖析运行时依赖 -> 构建第三方虚构利用 -> 编译 作为hostwebpack5文件缓存的能力工程能力 运行时能力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 ... iframenpm包应用React Vue 不同技术栈组件库痛点 antd 人力 工夫 老本兼容实质是 html css js 越倒退 复用能力越弱磨平框架带来的限度社区间接原生当初计划能解决 但不够优良1. single-spa 主从利用 利用调度器 模块调用；主利用只是调用子利用生命周期 ; 对老逻辑敌对2. web components 原生标签tag3. omi4. 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）提案的设计思维，打造更贴合浏览器发展趋势的微前端框架，并以此解决咱们理论的业务问题。systemJScjs npm i 过程umd window全局变量esm 兼容性问题组件服务化模式webpack module federation 生产-复用逻辑的过程也会因而受限于构建工具带来的体系 vite rollupweb components 基本局限: html作为标记语言 只能承接String的Attributes propsWC框架的常见解决方案 DSL，Magic所有问题都能够通过一个函数解决最大水平贴合当初开发者习惯 缩小学习老本如何复用单元实用变幻无穷场景畛域驱动六边形架构(装璜器?)webpack插件机制magic应用过程: 援用 注册 应用Magic外围: 设计概念jquery工具 m也是提供工具函数 贴合开发者的应用舒适度 应用直觉### 业务落地打磨过程页面的模块化复用场景集群型微前端场景社区PortalsRealms为什么不 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特点: 预编译技术、关怀触发更新的节点、没有虚构dom2. 树级更新粒度React两棵树比拟变动的局部特点: 根本没有编译、不关怀触发更新的节点、虚构dom3. 组件级更新粒度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. ?star2. io网络提早 : 申请尽快收回去 suspensereact18 全新ssr解构#### notereact所有节点加Key 工夫复杂度是O(n^3) ？不给所有加 升高工夫复杂度 那是多少？吧啦吧啦最初啦
- 以上纯属集体现场笔记，暂没有做进一步的整顿，xdm对付看哈，关键点除了看不清的，我想应该算是比拟齐全咯~
- 官网赠送的短袖设计挺好的，原本想衣着进来秀一波，今早洗时候发现掉色有点狠，还好logo没洗掉
祝 segmentfault 越来越好，D-Day 越来越棒~
by 我说的
本文参加了 SegmentFault D-Day 征文 ，欢送正在浏览的你也退出。