在项目中，我们经常会遇到同时发送多个HTTP请求的情况，对于同域名的请求，浏览器会限制同时发起的请求数量，当超过浏览器并发请求限制时，超过的请求将会等待，直到有请求返回时才会进行下一次请求。这是浏览器的一种保护机制，为了防止通过浏览器发起过量的请求，耗尽资源。在小程序中也会有同样的机制，例如，微信小程序中说明 wx.request 的最大并发限制是 10 个，wx.connectSocket 的最大并发限制是 5 个（参见 微信小程序官方文档-基础能力/网络/使用说明-网络-3.网络请求-使用限制 ），但是这里有个BUG，在小程序中如果并发请求超过10个，并不会等待而是直接失败，所以实际上需要用户自己处理并发请求数，在超过10个时，请求需要在队列中等待而不是直接失败。
前端性能优化
目的
对比两款功能相似的产品，我们如何才能说一个产品的性能优于另外一个产品呢，无外乎以下几种情况
- 页面打开的速度快，用户可以很快的看到期望的内容
- 页面流转流畅，不会出现卡顿的情况
- 页面不会出现非预期的错误，例如白屏
性能优化也即从技术的角度提升产品的用户体验。
前端异常监控
前端异常监控是指在能够对前端项目运行过程中的错误和异常能够记录和上报从而可以对项目不断分析和优化的流程。从流程上来分，前端异常监控分为数据捕获和数据上报两个部分。
前端依赖管理npm
2009年，Ryan Dahl 写了 Node.js 以后，缺少包管理器，Isaac Z. Schlueter 苦于如何推广自己的包管理器，于是俩人一拍即合，最终 Node.js 内置了 npm 。后来，随着 Node.js 的流行, npm 也跟着流行了起来。
前端常用软件与工具
集成开发环境
集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套（组）都可以叫集成开发环境。
前端开发常用英文缩写名词解释
运营与分析
| 简称 | 含义 | 解释 | 说明 |
|---|---|---|---|
| PV | Page View | 页面访问量 | 页面浏览量，用户每次进入页面或刷新页面即被计算一次，反映了页面的活跃程度 |
| UV | Unique Visitor | 独立访客 | 和PV类似，同样是反映页面的活跃程度，可以防止通过多次刷新页面等方法导致的虚假的活跃 |
| DAU | Daily Active Users | 日活跃用户 | 用于反映网站活跃情况。DAU 通常统计一日（统计日）之内，登录或使用了某个产品的用户数（去除重复登录的用户） |
| MAU | Monthly Active Users | 月活跃用户 | 与DAU类似反应网站的活跃情况，由于产品可能因工作日/休息日等原因造成波动，MAU是以月维度统计的网站活跃程度，可以去除这种波动 |
| QPS | Query Per Second | 每秒查询率 | 一般指接口的每秒最大响应请求数，反映了接口的承压能力(吞吐量) |
| PR | Page Rank | 网页权重 | 反映了页面的重要程度。一般级别从 1 到 10 级。PR 值越高说明该网页越受欢迎 |
设计与编程
| 简称 | 含义 | 解释 | 说明 |
|---|---|---|---|
| SPA | Single Page Application | 单页面应用 | 一种网络应用程序(WebApp)模型，通过Ajax技术动态地重写页面的部分与用户交互，而避免了过多的页面重载，页面响应速度更快，用户体验更好 |
| SSR | Server Side Render | 服务器渲染 | 根据数据与页面模板在服务器上渲染出页面并发送到浏览器的技术 |
| SEO | Search Engine Optimization | 搜索引擎优化 | 通过了解搜索引擎的运作规则（如何抓取网站页面，如何索引以及如何根据特定的关键字展现搜索结果排序等）来调整网站，以提高该网站在搜索引擎中某些关键词的搜索结果排名的技术 |
| MVC | Model View Controler | 模型-视图-控制器 | 一种数据与视图分离的软件设计模式，最早由Xerox PARC在二十世纪八十年代为编程语言Smalltalk－80发明 |
| MVP | Model View Presenter | 模型-视图- | 1990年代Taligent公司创造的，一个用于C++ CommonPoint的模型，将model和view更清晰的分离 |
| MVVM | Model View ViewModel | 模型-视图-视图模型 | 最初是由微软在使用Windows Presentation Foundation和SilverLight时定义，核心概念是数据绑定 |
| HTML | Hyper Text Markup Language | 超文本标记语言 | 是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体 |
| CSS | Cascading Style Sheets | 层叠样式表 | 一种用来表现HTML或XML等文件样式的计算机语言 |
| URI | Uniform Resource Identifier | 统一资源标识符 | 一个指向资源的字符串。最通常用在 URL 上来指定Web上资源文件的具体位置 |
| URL | Uniform Resource Locator | 统一资源定位器 | 指定在Internet上可以找到资源的位置的文本字符串 |
| Ajax | Asynchronous JavaScript And XML | 异步 Javascript 与 XML | 一种使用 XMLHttpRequest 技术构建更复杂，动态的网页的编程实践 |
| GUI | Graphical User Interface | 图形用户接口 | 采用图形方式显示的计算机操作用户界面 |
| API | Application Programming Interface | 应用编程接口 | 软件（应用）中的一系列特性和规则，这些特性和规则允许其他软件与之交互（与用户界面相对） |
| HMR | Hot Module Repalacement | 模块热更新 | 一种通过监控文件修改实时编译预览的技术，webpack即提供该功能 |
| IIFE | Immediately Invoked Function Expression | 立即调用的函数表达式 | 一个在定义时就会立即执行的 JavaScript 函数 |
| JSON | JavaScript Object Notation | Javascript 对象表示 | 一种数据交换格式 |
| DOM | Document Object Model | 文档对象模型 | 用来呈现以及与任意 HTML 或 XML文档交互的API。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分 |
| P2P | Peer-to-peer | 端到端 | 一种计算机网络体系结构，其中所有参与的节点（对等方）都有同等的权限并共享工作负载 |
| RSS | Really Simple Syndication | 简易信息聚合 | 用于发布站点更新的数种 XML 文档格式 |
| CORS | Cross-Origin Resource Sharing | 跨域资源共享 | 由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应 |
| CSP | Content Security Policy | 内容安全策略 | 用于检测和减轻用于 Web 站点的特定类型的攻击 |
| CRUD | Create Read Update Delete | 增删改查 | 对于存储的信息可以进行操作类型 |
| CSRF | Cross-Site Request Forgery | 跨站请求伪造 | 一种冒充受信任用户，向服务器发送非预期请求的攻击方式 |
| DDoS | Distributed Denial of Service | 分布式拒绝服务 | 一种网络攻击手段，它通过给服务器发送大量请求来阻止对资源的合法使用 |
| PR | Pull Request | 拉取请求 | 使用 Git 做代码管理的一个流程，请求将改动拉取到目标代码仓库 |
云专有名词
| 简称 | 含义（阿里） | 含义（腾讯） | 含义（百度） | 含义（华为） | 解释 | 说明 |
|---|---|---|---|---|---|---|
| ECS/CVM/BCC/ECS | Elastic Compute Service | Cloud Virtual Machine | Baidu Cloud Compute | Elastic Cloud Server | 云服务器 | 一种弹性可伸缩的云计算服务 |
| OSS/COS/BOS/OBS | Object Storage Service | Cloud Object Storage | Baidu Object Storage | Object Storage Service | 云对象存储 | 一种基于对象的存储服务 |
| EBS/CBS/CDS/EVS | Elastic Block Storage | Cloud Block Storage | Cloud Disk Service | Elastic Volume Service | 块存储/云硬盘/云磁盘 | 一种为计算服务提供持久性块存储的服务 |
| NAS/CFS/CFS/SFS | Apsara File Storage | Cloud File Storage | Cloud File Storage | Scalable File Service | 云文件存储 | 一种可扩展的云文件存储服务 |
| SLB/CLB/BLB/ELB | Server Load Balancer | Cloud Load Balancer | Baidu Load Balance | Elastic Load Balance | 负载均衡 | 一种流量分发服务，可以将访问流量自动分配到云中的多台云服务器上以降低服务器负载 |
| ACK/TKE/CCE/CCE | Alibaba Cloud Container Service for Kubernetes | Tencent Kubernetes Engine | Cloud Container Engine | Cloud Container Engine | 云容器 | 一种基于原生 kubernetes 提供以 docker 容器为核心的、高度可扩展的高性能容器管理服务 |
网络与安全
| 简称 | 含义 | 解释 | 说明 |
|---|---|---|---|
| SSL | Secure Socket Layer | 安全套接层 | 在传输通信协议（TCP/IP）上实现的一种安全协议，采用公开密钥技术 |
| NAT | Network Address Translation | 网络地址转换 | 一个 IETF 标准，用于在本地网络中使用私有地址，允许一个整体单位机构以一个公用IP地址出现在互联网上 |
| EIP | Elastic IP | 弹性公网 | 为用户提供独立的公网带宽服务 |
| CDN | Content Delivery Network | 内容分发网络 | 通过将站点内容发布至遍布全球的网络节点以降低用户访问时间，提升下载速度 |
| VPC | Virtual Private Cloud | 专有网络/私有网络 | 专属的云上网络空间，不同私有网络间完全逻辑隔离 |
| VPN | Virtual Private Network | 虚拟专用网络 | 在公用网络上建立专用网络以进行加密通讯 |
项目管理
| 简称 | 含义 | 解释 | 说明 |
|---|---|---|---|
| CMS | Content Management System | 内容管理系统 | 一个允许用户发布、组织、修改、删除多种类型的内容的管理系统 |
| CRM | Customer Relationship Managment | 客户关系管理 | 客户关系管理是指企业为提高核心竞争力，利用相应的信息技术以及互联网技术协调企业与顾客间在销售、营销和服务上的交互，从而提升其管理方式，向客户提供创新式的个性化的客户交互和服务的过程 |
| ERP | Enterprise Resource Planning | 企业资源计划 | ERP是针对物资资源管理（物流）、人力资源管理（人流）、财务资源管理（财流）、信息资源管理（信息流）集成一体化的企业管理软件 |
| BPM | Business Process Management | 业务流程管理 | 一套达成企业各种业务环节整合的全面管理模式 |
| SCM | Supply Chain Management | 供应链管理 | 一种集成的管理思想和方法，它执行供应链中从供应商到最终用户的物流的计划和控制等职能 |
| MIS | Management Information System | 管理信息系统 | 用于管理需要的记录，并对记录数据进行相关处理，将处理的信息及时反映给用户的一套网络管理系统 |
| IDE | Integrated Development Environment | 集成开发环境 | 为程序员提供了软件开发所需的完善工具链的软件应用，一个 IDE 通常包含一个代码编辑器，自动编译工具和一个调试器 |
| ISP | Internet Service Provider | 互联网服务供应商 | 通过电话线上的拨号连接（这在以前比较常见），或宽带连接（如电缆调制解调器或 DSL 服务）出售互联网接入服务的供应商。例如联通、电信、移动 |
| SCM | Source Control Management | 源代码控制管理 | 管理源代码的系统，例如 CVS、SVN、Git |
| UX/UE | User Experience | 用户体验 | 研究用户和系统之间的交互。其目标是使系统易于从用户的角度进行交互 |
| MRD | Market Requirements Document | 市场需求文档 | 主要是描述市场分析、竞品调研，阐述什么样的功能和特点的产品（包含产品版本）可以在市场上取得成功 |
| PRD | Product Requirements Document | 产品需求文档 | 对MRD中的内容进行指标化和技术化，阐述产品的功能改善、产品的细节说明、产品原型 |
| FSD | Functional Specifications Document | 功能详细设计说明 | 定义产品功能需求的全部细节的文档 |
| RFC | Request For Comments | 征求意见稿 | 由互联网工程任务组（IETF）发布的一系列备忘录。文件收集了有关互联网相关信息，以及UNIX和互联网社群的软件文件，以编号排定。FC文件是由互联网协会（ISOC）赞助发行 |
| PMO | Project Management Office | 项目管理办公室 | 在组织内部将 实践、过程、运作 形式化和标准化的部门 |
机构与协会
| 简称 | 含义 | 解释 | 说明 |
|---|---|---|---|
| ECMA | European Computer Manufacturers Association | 欧洲计算机制造商协会 | 一个开发计算机硬件、通信和程序语言标准的非盈利组织。JavaScript 语言的核心规范 the ECMA-262 specification（即 ECMAScript）的制定者。总部位于瑞士日内瓦。 |
| W3C | World Wide Web Consortium | 万维网联盟 | 一个维护网络相关规则与架构的国际技术标准机构。HTML标准，CSS标准，XML标准的制定者。由 Web 的发明者 Tim Berners-Lee 及 W3C 的首席执行官 Jeffrey Jaffe 领导，由设立在美国麻省理工大学（MIT）、欧洲数学与信息学研究联盟（ERCIM）、日本庆应大学（Keio University）和中国北京航空航天大学（Beihang University）的四个全球总部（W3C Hosts）的全球团队联合运营。 |
| ISOC | Internet Society | 国际互联网协会 | 一个非政府、非营利性、全球性的互联网组织，致力于推动互联网全球化，加快网络互连技术、发展应用软件、提高互联网普及率。总部及秘书处设在美国弗吉尼亚州莱斯顿地区，并在美国华盛顿和瑞士日内瓦设有办事处。 |
| IETF | The Internet Engineering Task Force | 国际互联网工程任务组 | 一个公开性质的大型国际团体，汇集了与互联网架构和互联网顺利运作相关的网络设计者、运营者、投资人和研究人员，主要任务是负责互联网相关技术规范的研发和制定。TCP协议，IP协议，HTTP协议的制定者。ISOC的下属机构。 |
| IEEE | Institute of Electrical and Electronics Engineers | 电气和电子工程师协会 | 世界上最大的非营利性专业技术学会，致力于电气、电子、计算机工程和与科学有关的领域的开发和研究、行业标准设定。IEEE 802.11 等标准的制定者。总部位于美国纽约。 |
| ISO | International Organization for Standardization | 国际标准化组织 | 一个全球性的非政府组织。ISO9001质量保证体系的制定者。总部位于瑞士日内瓦。 |
系统与协议
| 简称 | 含义 | 解释 | 说明 |
|---|---|---|---|
| CDN | Content Delivery Network | 内容分发网络 | 指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本，因此服务器可以根据哪些服务器与用户距离最近，来满足数据的请求 |
| DNS | Domain Name System | 域名系统 | 一个层次化、分散化的Internet连接资源命名系统。DNS维护着一个包含域名与对应资源例如IP地址的列表 |
| SSH | Secure Sheel | 安全外壳协议 | 建立在应用层基础上的安全协议 |
| FTP | File Transfer Protocol | 文件传输协议 | 一种在 Internet 上主机之间传输文件的标准协议 |
| HTTP(S) | HyperText Transfer Protocol (Secure) | 超文本传输协议 | 用于在 Web 上传输超媒体文件的底层协议 ，最典型场景的是在浏览器和服务器之间传递数据，以供人们浏览 |
| SMTP | Simple Mail Transfer Protocol | 简单邮件传输协议 | 用于发送的邮件的协议。类似于POP3和NNTP，是一个状态机驱动的协议 |
| TCP | Transmission Control Protocol | 传输控制协议 | 主要的网络协议之一。它使两台主机能够建立连接并交换数据流 |
| UDP | User Datagram Protocol | 用户数据流协议 | 当传输速度和效率比安全性和可靠性更重要时，通过IP一起用来发送数据的一种协议 |
人员称谓
| 简称 | 含义 | 解释 | 说明 |
|---|---|---|---|
| CEO | Chief Executive Officer | 首席执行官 | 类似总经理、总裁，一般同时为企业的法人代表 |
| COO | Chief Operations Officer | 首席运营官 | 类似常务总经理 |
| CFO | Chief Financial Officer | 首席财务官 | 类似财务总经理 |
| CIO | Chief Information Officer | 首席信息官 | 主管企业信息的收集和发布 |
| CTO | Chief Technology Officer | 首席技术官 | 类似总工程师 |
| GM | General Manager | 总经理 | - |
| VP | Vice President | 副总裁 | - |
| HRD | Humen Resource Director | 人力资源总监 | - |
| OD | Operations Director | 运营总监 | - |
| MD | Marketing Director | 市场总监 | - |
| OM | Operations Manager | 运营经理 | - |
| PM | Production Manager | 生产经理 | - |
| FE | Front-End | 前端 | 通常指前端开发人员 |
| RD | Research & Development | 调研与开发 | 通常指后端开发人员 |
| PM | Product Manager | 产品经理 | - |
| QA | Quality Assurance | 质量保证 | 通常指测试人员 |
| QC | Quality Control | 质量控制 | 通常指测试人员 |
| OP | Operations | 运维 | 通常指代运维人员 |
| DBA | Database Administrator | 数据库管理员 | - |
需要注意的是 SCM、PM、PR 等术语在不同的语境下有不同的含义，例如 SCM 可能是Supply Chain Management(供应链管理)、Software Configuration Management(软件配置管理)、Source Control Management(源代码控制管理)，PM 可以为 Project Management(项目管理)、Project Manager(项目经理)、Prodcut Manager(产品经理)、Production Manager(生产经理)，还可能代表 Post Meridiem(下午)、Particulate Matter(颗粒物)
前端技术选型
本文主要面向前端基础框架和库的选型，不包括构建工具、 UI 库和框架配套解决方案的选择。由于前端发展速度很快，框架层出不穷，特标明本文发布时间为 2021年6月6日，更新时间 2022年2月21日，更新时间 2022年3月14日，只适用于2021年前端基础框架技术选型。只选择了 web 应用开发时使用的框架，桌面端框架如 Electron、Tauri、Flutter，或者跨平台框架例如 React Native、Weex 或者众多的小程序框架本质上和如下列出的框架不是解决同一类问题所以不在对比之列。
前端API缓存方案
API 缓存
在开发 web 应用程序时，性能都是必不可少的话题。对于单页面应用程序而言，我们可以采用很多方式来对性能进行优化，比方说 tree-shaking、模块懒加载、利用网络cdn加速等这些常规的优化。
而事实上，缓存一定是提升web应用程序性能最有效方法之一，这是一种用空间换取时间的做法，尤其是用户受限于网速的情况下，利用额外的存储来提升系统的响应能力，降低网络的消耗，可以有效的提升 web 应用的性能。
以浏览器而言，我们有很多缓存数据与资源的方法，例如 标准的浏览器缓存（包括强缓存和协商缓存） 以及 Service worker 等技术。但一般而言，他们都更适合静态内容的缓存。例如 html，js，css以及图片等文件。而如果需要缓存系统数据的话，我们需要采用另外的方案。
前端工程化
前端工程化是使用软件工程的技术和方法来对前端项目的开发、测试、上线和维护进行管理的方法。前端工程化的目的是为了提升开发效率，提高产品质量。主要包括以下几个方面：
模块化
前端模块化是指前端项目中包括 Javascript、CSS、HTML 和图片、字体、文本、声音等各种资源文件的编译、拆分、合并和引用的过程。
前端相关语言框架与库
收录了一些前端工程师需要了解的语言、框架、工具，进行了简单的解释，并收录了官网、Github地址及一些中文学习网站。
语言
HTML
超文本标记语言（HyperText Markup Language）是一种简单的、由不同元素组成的标记语言，它定义了网页内容的含义和结构。最新的标准为 HTML5 。
官网: https://html.spec.whatwg.org/multipage/
Github: https://github.com/whatwg/html
