435 - 《前端知识图谱 02 - 其他能力》
基于 https://frontendmasters.com/guides/front-end-handbook/2024/ 整理，总共 80+。前端的子领域真是多地吓人。整理这个是为了让自己再回顾一遍，同时也方便后续遇到前端资讯时找到合适的地方填充。和上一篇一样，内容部分会过滤掉课程广告和补充一些我的理解。
1、A/B Testing。
A/B 测试，又称分割测试，是一种用于比较网页、应用程序功能或其他产品元素的两个版本，以确定哪一个表现更好的方法。这种方法允许数据驱动决策，并能有效改进用户界面和体验，从而提高用户满意度，改善网络项目的性能。
2、AI 驱动的编码工具
人工智能驱动的编码工具是使用人工智能（AI）和机器学习（ML）协助开发人员编写代码的软件程序。这些工具能显著提高开发人员的生产力和效率。
了解更多：
3、自适应设计
网页开发中的自适应设计指的是一种创建网页的策略，这种网页可以在多种不同屏幕尺寸和分辨率的设备上正常运行。响应式设计依靠流体网格和灵活的图像来动态调整布局以适应浏览环境，而自适应设计则不同，它通常涉及设计多种固定的布局尺寸。
4、算法
算法是解决问题的步骤或公式。在网络开发和编程中，它指的是为执行特定任务或解决特定问题而设计的一系列指令。算法是计算机科学和软件工程（包括网络开发）各个方面的基础。
了解更多：
5、异步编程。
JavaScript 中的异步编程是一个强大的概念，它允许以非阻塞的方式执行代码。在异步编程中，您可以启动一项操作，然后在操作完成前继续执行其他任务。一旦操作完成，通常会执行一个回调函数来处理结果。这种方法允许网页在等待这些耗时的操作完成时保持响应性和交互性。
了解更多：
- MDN 上的 异步 JavaScript 指南
6、Atomic CSS。
原子 CSS 是网页开发中的一种样式设计方法，包括使用范围和功能有限的单用途类。原子 CSS 中的每个类都只做一件事，而且要做得很好，只代表一个样式属性和值。这种方法与一个类可能包含多个样式规则的传统 CSS 方法截然不同。
了解更多：
7、Backend as a Service（Baas）。
BaaS 是一种云服务模式，它为开发人员提供一种简化后端开发流程的方法，加快应用程序开发。BaaS 通常会提供数据库管理、用户认证、推送通知、云函数、文件存储和管理、API 集成等。对于规模较小的团队和初创企业来说，BaaS 尤其具有显著优势，因为他们可能没有足够的资源来全面开发和维护定制的后端解决方案。
一些 BaaS 服务：
8、大 O 表示法。
大 O 表示法用于描述算法的性能或复杂性。具体来说，它以算法相对于输入大小（即 “n”）的增长速度来描述算法的时间复杂性或空间复杂性。术语 “大 O” 实质上指的是复杂度的上限，它给出了算法需要多少时间或内存的最坏情况。
9、构建。
构建指的是将源代码文件转换为可在计算机或服务器上运行的独立软件的过程。在网络开发中，构建对于优化网络应用程序的性能和兼容性至关重要。它可确保应用程序高效、可扩展，并可跨不同浏览器和设备访问。
10、CI/CD。
CI/CD 是持续集成（Continuous Integration）和持续交付（Continuous Delivery）或持续部署（Continuous Deployment）的缩写，是现代软件开发的关键概念。CI/CD pipeline 通常通过 Jenkins、GitLab CI/CD、CircleCI、Travis CI 等 DevOps 工具来实现。
一些 CI/CD 服务：
11、CMS。
CMS 全称 Content Management System，旨在帮助用户创建、管理和修改网站内容，而无需专业的技术知识。
12、代码复杂性。
代码复杂度是对一段代码的复杂或错综程度的衡量。通常用代码行数或代码分支数来衡量。代码越复杂，就越难理解、调试和维护。代码复杂性工具有助于识别此类复杂代码，并提供改进代码的见解。
了解更多：
13、代码覆盖率。
代码覆盖率是软件测试中的一个关键指标，用于衡量测试过程中程序源代码被执行的程度。它对于识别代码库中未经测试的部分和确保关键功能得到彻底测试至关重要。代码覆盖率的主要类型包括语句覆盖率、分支覆盖率、函数覆盖率和条件覆盖率，每种覆盖率都侧重于代码的不同方面，如可执行语句、控制结构分支、函数调用和布尔子表达式。
14、代码格式化。
代码格式化工具（如 Prettier）是用于软件开发的工具，可自动以一致的风格格式化代码。这在团队中尤为重要，因为不同的开发人员可能会有不同的编码风格，导致代码库难以阅读和维护。
一些代码格式化工具：
- Prettier
- Biome，基于 Rust，速度极快
15、CSS in JS。
CSS in JS 是现代网络开发中使用的一种样式技术，尤其是在基于 JavaScript 的用户界面框架和库中。它是在 JavaScript 代码中直接编写 CSS 样式，为基于 UI 组件的架构提供了多种优势。
一些 CSS in JS 的库：
16、CSS 动画。
CSS 动画是网页开发中的一个强大工具，可用于创建引人入胜的交互式用户界面。通过 CSS 动画，您可以将 HTML 元素和 CSS 属性制作成动画，让网页栩栩如生。CSS 动画尤其适用于创建基于状态的动画，如悬停效果和过渡效果。
了解更多：
- MDN 上的 Using CSS animations
一些 CSS 动画库：
17、CSS 框架。
一些流行的通用 CSS 框架包括 Bootstrap 和 Bulma。这些框架因其易用性、丰富的文档和大量的社区支持而被广泛使用。对于需要快速设计原型或不想处理复杂的纯 CSS 常见布局和样式任务的开发人员来说，它们尤其有用。
18、CSS Resets。
在制作网页时，你会发现不同的浏览器对各种 HTML 元素都有自己的默认样式。这些默认样式会导致网页在不同浏览器上的外观不一致。CSS Resets 可移除浏览器应用于 HTML 元素的默认样式，从而确保不同浏览器之间的一致性。
一些 CSS Resets 库：
19、数据 API 测试。
数据 API 测试包括验证用于在服务器和客户端（如网络浏览器）之间传输数据的 API 是否正常运行。
一些工具：
20、数据结构。
数据结构是计算机科学和编程中的一个基本概念，在有效组织、管理和存储数据方面发挥着至关重要的作用。了解不同数据结构的类型和用途对任何程序员来说都很重要，因为它们会影响你如何快速、轻松地操作应用程序所处理的数据。
21、声明式编程。
声明式编程是一种构建计算机程序结构和元素的风格，它只表达计算的逻辑，而不描述其控制流，不涉及其实现的细节，重点在于 "是什么 "而不是 “怎么做”。比如 HTML、SQL、JSX 都是声明式的。它与命令式编程形成鲜明对比，后者侧重于明确描述如何实现操作。
22、设计系统。
设计系统是用户界面/用户体验设计的基础框架，是融合组织设计原则和元素的一套具有凝聚力的指导方针。这种综合方法不仅能确保产品和服务的品牌一致性，还能简化设计流程，提高效率和协作性。蚂蚁的 Ant Design 和 Google 和 Meterial Design 都是很好的例子。
了解更多：
23、设备测试。
设备测试，是确保网站或网络应用程序在不同设备上正常运行的关键过程。使用真实设备进行测试能让您更准确地了解用户体验，并发现在模拟器或仿真器中可能无法发现的问题。这是开发过程中的一个重要环节，尤其是在设备种类繁多的今天。
一些用于设备测试的服务：
24、开发服务器。
开发服务器是开发和测试网络应用程序过程中使用的软件工具或组件，尤其是在前端方面。它们的主要用途是在开发阶段为网络应用程序文件提供服务，使开发人员在将应用程序部署到生产环境之前，能更轻松地处理代码、实时查看更改和测试应用程序。
25、仿真设备测试。
使用仿真技术进行设备测试包括在开发环境中模拟不同的设备。这意味着您可以测试网站或应用程序在智能手机、平板电脑和台式机等不同设备上的表现，而无需物理设备本身。（注意：虽然仿真技术非常有用，但它并不能完全取代在实际设备上进行的测试。）
26、DOM 操作。
DOM 脚本涉及与 DOM 的交互和操作，DOM 是浏览器提供的编程接口，它将 HTML 页面表示为一棵对象树。
27、前端框架和库。
前端网络开发框架和库是现代网络开发的基本工具，比如 Angular、React 和 Vue。它们为构建客户端呈现的网络应用程序提供了结构化和标准化的方法。这些框架和库提供了一整套功能，可简化开发流程、提高生产率并简化复杂的任务。
28、全栈 Web 开发框架（元框架）。
全栈 Web 开发框架将前端和后端功能无缝整合在一起。这些工具提供了构建网络应用程序的整体方法，具有全面的工具集，可提高效率、提升生产力并简化复杂的编码任务。
一些全栈框架：
29、函数式编程（FP）。
函数式编程是一种编程范式，它将计算视为数学函数的评估，并避免使用变化状态和易变数据。在函数式编程中，函数是一等公民，这意味着它们可以像其他数据类型一样，被赋值给变量，作为参数传递给其他函数，以及从其他函数返回。
了解更多：
30、功能测试和 E2E 测试。
端到端（E2E）测试和功能测试是软件测试中的两种重要方法，它们各有特点。E2E 测试旨在从头至尾测试应用程序的流程，其目的是复制真实的用户场景，确保系统在完全集成的环境中按预期运行。功能测试包括单元测试、集成测试、系统测试等。
一些工具：
31、GraphQL。
GraphQL 是一种 API 查询语言，也是一种通过现有数据执行这些查询的运行时。它不同于传统的 REST API 方法。在 REST 中，通常有多个端点用于不同的数据请求，但 GraphQL 只有一个端点。这使得数据检索更加高效和灵活。
了解更多：
相关工具：
32、Headless CMS。
Headless CMS 是一种 CMS，它将 “主体”（即内容存储和管理）与 “头部”（即显示这些内容的表现层）分离开来。这与 WordPress 或 Joomla 等传统内容管理系统平台不同。Headless CMS 提供了更大的灵活性、更高的性能以及 API 驱动的内容管理方法，使其成为需要在各种平台和设备上显示内容的现代网站开发项目的理想选择。
一些 Headless CMS 方案：