集成测试和系统测试的区别
单元测试用用于验证编码单元的正确性。
集成测试用于验证详细设计。
验收测试用于验证正确实现了需求。
Q&A：详细设计和概要设计的区别是什么？
概要设计阶段通常得到软件结构图
详细设计阶段常用的描述方式有：流程图、N-S 图、PAD 图、伪代码等
- 概要设计就是设计软件的结构，包括组成模块，模块的层次结构，模块的调用关系，每个模块的功能等等。同时，还要设计该项目的应用系统的总体数据结构和数据库结构，即应用系统要存储什么数据，这些数据是什么样的结构，它们之间有什么关系。
- 详细设计阶段就是为每个模块完成的功能进行具体的描述，要把功能描述转变为精确的、结构化的过程描述。
MDC Web 是什么？
专为 Web 设计的 Material UI 组件，Angular 官方推荐组件库，16 版本开始进行
飞书人事前端业务架构演进之路
https://www.zaozao.run/video/c48/c48-4
工程化体系的学习，善用工具解决效能问题
云凤蝶低代码平台
第四代编程语言（4GL）被定义为非过程编程语言（声明性语言），比如 SQL，作为其中一种在数据处理方面与第三代相比抽象程度更高，当然，代码量比 3GL 也有明显减少，效率自然提升明显。
低代码平台也符合 4GL 的特点——抽象层级更高、代码量更少、效率更高，所以低代码开发环境也被算入了 4GL。提取其中的关键点：
- 声明性，隐藏过程，表达抽象需求，从高层抽象的一到低层级的多，是减少代码量，提升效率的根本。
- 语言，语法、结构、糖，语法简洁，结构清晰，含糖量适中。其实语法糖就有简化作用，就是在一定领域的更高层级的抽象。而 4GL 代表的应该是成体系的、完整的抽象。SQL 就是很好的例子，SQL 作为 DSL（领域专用语言）不再描述具体的数据库操作过程，而是直接表达数据需求。
微前端架构在蚂蚁花呗借呗的最佳实践
随着这几年的不断探索，微前端技术在基建上已经逐渐的趋于成熟和稳定，我们在微前端基础框架的能力&实现上达成了共识，社区内也涌现出了许多高质量的框架产品：qiankun、icestark 等，但在使用这些框架进行业务落地的同时，我们逐渐意识到微前端其实并不只是一个框架类产品，而是一种针对巨石应用场景、混合研发场景的最佳实践方案，除了技术框架之外，还应该有配套的应用配置&治理平台，以及辅助不同场景（Low-Code、Pro-Code、No-Code）微应用研发的最佳实践集合和工具生态
本文的侧重点是讨论基于现有微前端基建基础之上的一套完整的最佳实践方案，覆盖微应用研发、主子应用配置、主应用接入三个模块，不会过多的去讨论微前端框架基座层面的实现
雨燕
蚂蚁统一前端研发平台，管理业务应用的迭代和发布，可以看成 Git Workflow
只看到了这个介绍视频：
Google I/O 2023：提升 Web 核心性能指标优化建议
Image 图片优化：不要使用背景图、指定优先级、指定宽高影响抖动的因素、fetchprority
aspect-ratio：提前提供尺寸
BF 缓存：BF 缓存会在用户离开之后，在内存中存储一个用户加载页面后的完整 CLS 快照。如果用户返回了这个页面，就会恢复这个快照。同样的，如果用户再次向前访问，则也可以恢复这个快照。这就完全消除了任何 CLS 的加载，如果从头开始重新渲染页面，BF 缓存也会默认启用，我们不需要采取任何措施来主动启用它，但是我们可以使用某些 API 阻止浏览器使用它，但这可能会导致浏览器没办法更好的响应，建议大家不要放弃这种免费的性能优化方案。
动画使用 transform、translate 完成动画不会在浏览器的布局处理中移动内容，而是在合成器层中进行的，除了对于浏览器来说工作量较小之外，这还意味着它无法影响其他的内容，这也意味着它对 CLS 的影响就变小了。
1
2
3
4
5
6
7
8
9
10
11
12
13//Bad
@keyframes move{
0%{
top:calc(90vh - 160px)
}
}
//Good
@keyframes move{
0%{
transform:translateY(calc(90vh - 160px))
}
}分解长任务
需要 50ms 或者更长时间的渲染工作叫长任务；这可能听起来不是很多，但在浏览器术语中，这可以是网站能感觉到比较好的响应或不响应的区别。
新的和即将推出的浏览器 API ，如 isInputPending、scheduler.postTask 和 scheduler.yield，它们可以帮助大家决定何时以及如何放弃主线程。
我们可以使用设置超时 settimeout 0 毫秒延迟来放入非关键的工作和新的任务，这些新任务就会在已经排队的任何任务之后执行。https://web.dev/optimize-long-tasks/
*isInputPending*：调度 API，当浏览器有需要处理的输入事件时，调用
isInputPending()会返回true，在不传入任何参数的情况下，将会检测所有类型的输入事件，包括按键、鼠标、滚轮触控等DOM UI事件，也可以手动传入一个包含事件类型的数组参数。scheduler.postTask：是
Chrome实现的优先级调度API。
去除不必要的 JS： Chrome Devtools 的 Coverage 特性分析代码执行覆盖率，Aurora 团队还开发了一个 xjs 脚本组件，允许我们加载较少且关键的第三方代码，并采用各种策略来减少这些脚本的影响。
1
2
3
4
5
6
7
8
9//策略：预加载
<script src="xxx" strategy="beforeInteractive">
//策略：afterInteractive
<script src="xxx">
//策略：懒加载
<script src="xxx" strategy="lazyOnload">
Web.dev 是什么？
谷歌开发者指引，里面有很多性能优化官方推荐的开发方式，特别是 UI 和性能优化方面的指引，值得一看。
运行时监听内存占用
https://web.dev/monitor-total-page-memory-usage/
https://blog.csdn.net/web2022050901/article/details/126911401
帮助 HTML 元素浮动的库
目前确实总是为了元素浮动要写 CSS 和 JS，如果有 JS 方法能够快速的操作，使用会简单很多。