【React...归纳】

npm

NPM（Node Package Manager）是用于管理和分发JavaScript模块的包管理器，它允许开发者在项目中引入、安装和更新第三方库和工具。

NPM有两个重要的版本，分别是全局版本和项目本地版本：

• 全局版本：全局版本是通过NPM安装在系统上的一个可执行文件，用于在命令行中执行各种NPM命令。可以使用npm -v命令来查看全局NPM的版本号。

• 项目本地版本：项目本地版本是安装在特定项目目录中的NPM。项目本地版本的NPM通常保存在项目的node_modules目录下，并且与项目的其他依赖项一起管理。

除了全局版本和项目本地版本之外，NPM还有一些与语义化版本（Semantic Versioning）相关的概念：

• 主版本号（Major version）：当进行不兼容的API更改时，主版本号会增加。

• 次版本号（Minor version）：当向后兼容地添加功能时，次版本号会增加。

• 修订版本号（Patch version）：当进行向后兼容的修复时，修订版本号会增加。

  这些版本号通常以 MAJOR.MINOR.PATCH 的格式表示，例如 1.2.3。

在项目的 package.json 文件中，可以指定依赖项的版本范围，如使用 ^ 表示允许更新到次版本号，使用 ~ 表示允许更新到修订版本号。

总结：

NPM有全局版本和项目本地版本。
全局版本是NPM的可执行文件，用于在命令行中执行NPM命令。
项目本地版本是安装在特定项目目录中的NPM，用于管理项目的依赖项。
NPM还有与语义化版本相关的主版本号、次版本号和修订版本号的概念。

不同版本

npm 是 Node.js 的包管理器，它允许你下载、安装和管理 JavaScript 包和依赖项。npm 有许多不同版本，每个版本都有其自己的特性和功能。下面是一些常见的 npm 版本：

• npm 5.x: 这是较早的版本，提供了基本的包管理功能。它支持 package.json 文件，可以通过 npm install 命令来安装依赖项，并能够处理简单的版本范围和锁定依赖项的版本。

• npm 6.x: 这是一个重要的更新，带来了一些新的功能和改进。其中一个主要的功能是引入了 package-lock.json 文件，用于确保在不同环境中安装相同的依赖项版本。此外，npm 6.x 还改进了安装速度和可靠性，增加了命令别名和脚本钩子等功能。

• npm 7.x: 这是最新的稳定版本，引入了一些重要的变化。一个重要的新功能是自动保存依赖项的版本符号（如 ^、~）到 package.json 文件中，这样可以更好地管理包的更新。此外，npm 7.x 还改进了安装速度、提供了更好的冲突解决机制，以及增加了工作区（workspaces）功能，方便同时管理多个包。

除了这些稳定版本，npm 还有一些预发布版本和开发版，用于测试新功能和接口。你可以通过 npm install -g npm@next 命令安装最新的预发布版本。

通常情况下，建议使用最新的稳定版本（目前是 npm 7.x），以享受最新功能和改进。可以通过在终端中运行 npm -v 命令来查看你当前安装的 npm 版本。如果你需要升级 npm，可以运行 npm install -g npm 命令来进行更新。

Nginx

配置文件

nginx的配置文件位于/etc/nginx目录下，主要包括nginx.conf和sites-available目录。

nginx.conf：这是nginx的主配置文件，其中定义了全局的配置项。可以使用文本编辑器打开该文件进行修改。例如，可以通过修改worker_processes参数来指定nginx工作进程的数量，以及通过修改error_log参数来指定错误日志的路径和级别等。

sites-available目录：该目录下存放着各个虚拟主机（server block）的配置文件。每个配置文件代表一个虚拟主机，用来定义该主机的访问规则、域名等。可以使用文本编辑器创建或修改这些配置文件。

在修改配置文件后，需要重新加载nginx配置使更改生效。可以使用以下命令来重载配置：

sudo systemctl reload nginx
注意，在修改配置文件之前，请备份原始配置文件以防止意外发生。

前端性能优化

利用CDN

使用CDN（内容分发网络）是一种常见的前端性能优化策略。CDN可以将网站的静态资源（例如图片、CSS、JavaScript文件等）分布到全球各个节点，并通过就近访问提供快速的内容传输和加载。

以下是前端利用CDN进行性能优化的几种方法：

• 资源引用使用CDN链接：将CSS和JavaScript文件的引用链接指向CDN上的资源地址，例如使用jQuery或其他流行的开源库时，可以使用CDN提供的链接来引入对应的库文件。这样可以在用户请求页面时，加快加载速度，因为CDN通常具有更好的带宽和更低的延迟。

• 图片和媒体文件使用CDN存储：将网站中的图片和媒体文件上传至CDN存储，通过CDN进行分发。这样可以减少服务器的负载压力，提高用户访问速度。

• 缓存静态资源：利用CDN的缓存功能，将静态资源设置为长时间有效，以减少对服务器的请求次数。CDN会在首次请求后，在其边缘节点上缓存资源，接下来的访问将直接从缓存中获取，提高加载速度。

• 负载均衡：使用CDN的负载均衡功能，将用户请求分发到离用户最近的节点上，以减少网络延迟和提高响应速度。CDN会通过智能路由选择最佳的节点来处理请求，从而优化用户体验。

• 预加载和预解析：使用CDN的预加载和预解析功能，在页面加载完成后，提前加载下一页所需的资源文件。预加载可以在用户点击链接之前加载静态资源，以提前准备好所需的资源。预解析可以在用户实际点击链接之前，对DNS进行解析，加快访问速度。

总之，CDN是一种强大的工具，可以通过将静态资源分发到全球各个节点，提高网站的性能和可用性。前端开发者可以利用CDN来加速页面加载、减轻服务器负载，并提供更好的用户体验。

浏览器

引擎分类

浏览器引擎是指驱动浏览器的核心组件，用于解析和渲染网页内容。根据不同的制造商和开发团队，浏览器引擎可以分为以下几种主要分类：

• Trident（Trident / MSHTML）：这是微软开发的浏览器引擎，最初用于Internet Explorer浏览器。它在过去是最常见的浏览器引擎之一，但目前已经被EdgeHTML取代。
• Gecko：这是Mozilla基金会开发的浏览器引擎。最著名的浏览器，如Mozilla Firefox和旧版的Netscape Navigator，都使用Gecko作为其核心引擎。Gecko引擎以其高度可定制性和标准兼容性而闻名。
• WebKit：这是苹果公司开发的浏览器引擎，最初用于Safari浏览器。WebKit引擎在移动设备领域非常流行，并且许多其他浏览器，如Google Chrome的早期版本和Opera浏览器，也采用了WebKit引擎。Webkit的一个重要分支是Blink引擎。
• Blink：Blink是Google与Chromium项目合作开发的浏览器引擎，用于Google Chrome和Opera等浏览器。Blink引擎基于WebKit引擎进行了大量修改和改进。目前，Blink已成为许多流行浏览器的主要引擎。
• EdgeHTML：这是微软为其Edge浏览器开发的浏览器引擎。EdgeHTML最初是取代Internet Explorer中的Trident引擎而开发的。然而，自2019年开始，微软宣布将采用Chromium作为其Edge浏览器的底层引擎，并逐渐废弃EdgeHTML。

需要注意的是，这些浏览器引擎在不断演化和更新中，各自有其特定的特性、优势和兼容性。因此，开发人员在编写网页和Web应用程序时，需要考虑各个引擎的差异和兼容性，以确保其在不同浏览器中的正确显示和良好性能。

事件对象

浏览器事件对象是在触发事件时由浏览器自动创建的JavaScript对象，它包含了与事件相关的信息和属性。通过事件对象，我们可以获取事件的类型、触发元素、坐标位置等信息，以及对事件的处理进行控制。

以下是一些常见的浏览器事件对象属性：

event.type：获取事件的类型，比如"click"、"keydown"等。

event.target：获取触发事件的元素。

event.currentTarget：获取当前正在处理事件的元素。

event.clientX 和 event.clientY：获取鼠标指针相对于浏览器视口的水平和垂直坐标。

event.pageX 和 event.pageY：获取鼠标指针相对于整个页面文档的水平和垂直坐标。

event.keyCode 和 event.key：获取触发键盘事件的键码或按键的值。

event.preventDefault()：阻止事件的默认行为。

event.stopPropagation()：停止事件的传播，防止事件冒泡到父元素。

event.stopImmediatePropagation()：立即停止事件的传播，并且阻止任何其他注册在同一元素上的事件处理函数被调用。

这些只是事件对象的一部分属性，实际上还有许多其他属性和方法可用于处理和控制事件。通过使用事件对象，我们可以在JavaScript中对用户的交互进行灵活的响应和处理。

同源

浏览器的同源策略是一种安全机制，用于限制一个网页文档或脚本如何与另一个不同源（来源）的网页进行交互。同源指的是两个网页具有相同的协议（例如http、https）、主机名和端口号。

同源策略的主要目的是保护用户信息的隐私和在浏览器环境中防止恶意行为。它通过限制跨域请求和资源共享来实现安全控制。

同源策略的规则如下：

• DOM访问限制：一个网页无法直接访问另一个不同源的网页的DOM元素。
• 跨域资源共享限制（CORS）：XMLHttpRequest和Fetch等Ajax请求受到同源策略的限制，只能请求同源的资源，除非服务器明确允许跨域请求（通过设置响应头的Access-Control-Allow-Origin等字段）。
• Cookie、LocalStorage和IndexDB限制：浏览器会限制一个网页只能访问其自身域下的Cookie、LocalStorage和IndexDB，不同源的网页无法访问。
• JavaScript脚本限制：一个网页无法引用不同源网页的JavaScript脚本。

同源策略不适用于其他协议（例如file和data），因为这些协议通常在本地机器上使用，不存在跨域的安全问题。

需要注意的是，有一些特定的机制和标记（如CORS头部、JSONP、postMessage等）可以用于绕过同源策略进行受控跨域访问和交互。但这些机制都需要明确的配置和合法的使用，以确保安全性。

浏览器内核属性

IE: trident 兼容性差，安全性差

firefox:gecko 代码公开，跨平台内核

safari:webkit

opera:presto(现在blink)

chrome:blink (基于webkit由Opera、Chrome共同开发)

用户行为对浏览器缓存的影响

用户的行为可以对浏览器缓存产生不同的影响。浏览器缓存是一种将资源保存在本地存储中的机制，以减少页面加载时间并提高用户体验。

以下是一些用户行为对浏览器缓存的常见影响：

1. 页面首次加载：当用户首次访问一个网页时，浏览器会下载该页面的所有资源（如 HTML、CSS、JavaScript、图像等）。这些资源会被缓存到浏览器的缓存中，以便下次访问相同页面时能够更快地加载。

2. 页面再次访问：如果用户再次访问相同的页面，浏览器会检查缓存，如果资源在缓存中存在且仍然有效（即未过期），则直接从缓存加载资源，而不需要重新下载。这样可以显著减少页面加载时间。

3. 强制缓存：服务器可以通过设置 HTTP 响应头来控制资源的缓存行为。常用的缓存控制方式包括：

   • Expires：通过设置一个特定的过期日期时间，告诉浏览器在该时间之前可以使用缓存副本。

   • Cache-Control：通过设置 max-age 指令，告诉浏览器资源在多长时间内可以被缓存。

   当资源被缓存后，即使用户再次访问相同的页面，浏览器会根据缓存控制策略判断是否需要重新下载资源。

4. 条件请求：当资源处于缓存有效期内，但服务器希望进行一些验证或更新时，可以使用条件请求，如：

   If-Modified-Since 和 Last-Modified：服务器返回资源的最后修改时间，浏览器通过比较该时间来决定是否需要重新下载资源。

   If-None-Match 和 ETag：服务器返回资源的唯一标识符（ETag），浏览器通过比较该标识符来判断资源是否有更新。

   在条件请求中，如果服务器返回 304 Not Modified 状态码，则表示资源未发生变化，浏览器将使用缓存的副本。

5. 用户操作：用户可以通过手动刷新页面、清除浏览器缓存或使用开发者工具等方式来影响缓存行为。手动刷新页面会忽略缓存并强制重新下载所有资源；清除浏览器缓存会删除所有缓存的资源，下次访问时需要重新下载。

总的来说，浏览器缓存可以显著提高网页加载性能和用户体验。合理设置缓存策略，并与服务器端配合使用条件请求，可以最大程度地利用缓存，减少网络请求和数据传输，加快页面加载速度。但需要注意，如果服务器端资源有更新，应确保在更新后适时更新缓存，以使用户能够获得最新的内容。

CSRF/XSS

CSRF（跨站请求伪造）和XSS（跨站脚本攻击）都属于DOM型攻击。

CSRF攻击：
CSRF攻击是一种利用用户的身份进行非自愿操作的攻击方式。攻击者通过构造恶意请求，使用户在已经登录的受信任网站上执行非自愿的操作，如更改密码、发送资金等。CSRF攻击的关键在于利用了受害者已登录的身份，欺骗网站认为这些请求是合法的。在这种攻击中，DOM并没有直接作用，而是利用了浏览器自动发送cookie等凭证信息来实现攻击。

XSS攻击：
XSS攻击是一种通过注入恶意脚本代码来篡改网页内容或窃取用户信息的攻击方式。攻击者将恶意脚本嵌入到网页中，当其他用户访问该页面时，恶意脚本会在受害者的浏览器中执行。XSS攻击可以分为存储型、反射型和DOM-based型，其中DOM-based型攻击涉及恶意脚本通过DOM操作对页面进行修改和篡改。

虽然CSRF攻击和XSS攻击都与DOM有关，但它们不属于持久型攻击。持久型攻击通常涉及将恶意代码或数据持久存储在后端数据库或文件系统中，并在后续请求中从中读取和执行，而CSRF和XSS攻击是利用用户的浏览器环境和网站对用户输入的处理不当导致的漏洞。

为了保护Web应用程序免受CSRF和XSS攻击，开发者应该采取以下一些措施：

• 输入验证和过滤：对用户输入进行验证、过滤和转义处理，以防止恶意代码注入。
• 验证和授权：在敏感操作上实施严格的身份验证和授权机制，确保只有合法的用户可以执行这些操作。
• 使用合适的安全标头：如使用CSP来限制脚本来源、使用HTTPOnly标记来保护敏感Cookie等。
• 令牌验证：为每个用户请求生成和验证令牌，以确保请求来源的合法性。
• 定期更新和修补：及时更新和修补Web应用程序和相关框架，以修复已知漏洞。

DOM型攻击：
DOM型攻击是一种利用Web应用程序对用户提供的输入进行不正确处理所导致的安全漏洞。这种攻击主要针对使用JavaScript操作Document Object Model（DOM）来动态更新页面内容的应用程序。攻击者通过构造恶意的输入，使得应用程序在解析和处理用户输入时产生漏洞，导致恶意代码被执行。由于DOM操作直接影响网页的结构和内容，攻击可以导致信息泄露、篡改页面内容或进行其他恶意操作。防范DOM型攻击的方法包括对用户输入进行严格的验证和转义、避免将用户输入直接插入到DOM操作中等。

持久型攻击：
持久型攻击或称为存储型攻击，是指攻击者将恶意数据或脚本持久化存储在Web应用程序的后端数据库或文件系统中，并在后续请求中从中读取和执行。这种攻击通常针对一些允许用户提交内容或上传文件的应用程序，如论坛、博客、留言板等。攻击者通过在提交的数据中注入恶意脚本或恶意代码，然后当其他用户访问包含该数据的页面时，就会触发恶意代码的执行。持久型攻击可能导致XSS漏洞、代码注入、恶意文件上传等安全问题。防范持久型攻击的方法包括对用户输入进行严格验证和过滤、对上传的文件进行合理的处理和检查、使用参数化查询等。

为了防止DOM型攻击和持久型攻击，开发者应该采取以下一些措施：

• 输入验证和过滤：对用户输入进行验证、过滤和转义处理，以防止恶意代码注入。
• 使用安全的API和框架：使用安全可靠的DOM操作API和框架，并遵循最佳实践原则。
• 限制权限：确保Web应用程序在执行敏感操作时使用最小权限。不要将用户输入直接用于执行系统级操作。
• 保持软件更新：定期更新和修补Web应用程序和相关框架，以修复已知漏洞。
• 安全编码实践：遵循安全编码实践，如避免使用eval()函数、避免拼接用户输入到DOM操作中等。
  综合使用这些安全措施可以有效降低DOM型攻击和持久型攻击的风险，并提高Web应用程序的安全性

CC攻击

CC攻击是指针对网络服务器或网站的拒绝服务（Denial of Service，DoS）攻击中的一种形式。CC是“HTTP Flood with CC”（HTTP CC Flood）的简称，CC代表Challenge Collapsar。

在CC攻击中，攻击者通过大量虚假的HTTP请求，将大量流量同时发送至目标服务器或网站，以超过其处理能力的范围，使其无法正常提供服务。这种攻击通常会导致服务器负载过高，网络拥堵，甚至服务崩溃。

攻击者的目标可以是任何使用HTTP协议提供服务的服务器或网站，包括企业的网站、政府机构、电子商务平台等。攻击者可能出于各种动机进行CC攻击，如故意破坏、勒索、竞争对手的恶意行为等。

为了应对CC攻击，目标服务器或网站通常会采取一系列防御措施，如增加带宽、限制连接数、使用CDN等，以减轻攻击造成的影响，并确保正常用户的访问体验。此外，网络安全公司和云服务提供商也提供专门的防御解决方案来抵御CC攻击。

CC攻击（即拒绝服务攻击）的目标通常是网络服务或服务器，而不是特定的文件类型或编程语言。ASP、PHP、JSP和HTML是常见的网页开发技术和文件类型，它们用于创建动态网页，运行在服务器端。这些文件类型本身并不是CC攻击的目标。

CC攻击的目标是通过向目标服务器发送大量恶意请求来消耗服务器资源，从而使目标服务器无法正常提供服务。攻击者可能会利用各种协议（如HTTP、HTTPS），并向服务器的各种服务（如Web服务器、DNS服务器等）发送攻击请求。因此，在防御CC攻击时，需要针对整个网络基础设施进行保护，包括网络层、应用层等，并采取相应的安全措施，如入侵检测系统、DDoS防护等。

HTTP/HTTPS

HTTP请求报文

HTTP请求报文是客户端发送给服务器的消息格式，包含了请求行、请求头和请求体三个部分。

1. 请求行： 请求行包含了请求方法、请求URI和协议版本。格式如下：
   <请求方法> <请求URI> <协议版本>

2. 常用的请求方法有：

   GET：获取资源
   POST：提交数据
   PUT：更新资源
   DELETE：删除资源
   HEAD：获取资源的元信息

3. 请求头： 请求头包含了关于请求的附加信息，格式为键值对，每个键值对占据一行。常见的请求头包括：
   Host：服务器主机名和端口号
   User-Agent：客户端的用户代理信息
   Content-Type：请求体的数据类型
   Cookie：携带的Cookie信息
   Authorization：身份验证凭证

4. 请求体： 请求体是可选的，适用于需要发送数据给服务器的请求，比如POST请求。请求体可以包含各种数据格式，如表单数据、JSON、XML等。
   下面是一个示例的HTTP请求报文：

GET /example HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Cookie: sessionid=abc123

以上是一个GET请求，请求的URI是/example，协议版本为HTTP/1.1。请求头中包含了Host、User-Agent、Accept和Cookie等信息。

需要注意的是，请求报文的格式需严格遵循HTTP协议规范。

HTTP协议交互原理

HTTP（Hypertext Transfer Protocol）是一种用于客户端和服务器之间进行通信的应用层协议。它基于请求-响应模型，客户端发送HTTP请求到服务器，服务器返回HTTP响应给客户端。

以下是HTTP协议的交互原理：

1. 建立连接：

   客户端通过TCP/IP建立与服务器的连接。默认使用80端口进行非加密的HTTP通信，或443端口进行加密的HTTPS通信。

2. 发送请求：

   客户端构建HTTP请求报文，包括请求行、请求头和请求体，然后将请求报文发送给服务器。
   请求行包含请求方法（GET、POST等）、请求URI和协议版本。
   请求头包含附加的请求信息，比如Host、User-Agent、Cookie等。
   请求体（可选）包含需要传输给服务器的数据。

3. 服务器处理请求：

   服务器接收到请求报文后，解析请求行、请求头和请求体。
   根据请求行中的URI确定要处理的资源。
   根据请求头的其他信息（如Cookie、Authorization等）进行相关处理。

4. 返回响应：

   服务器构建HTTP响应报文，包括响应行、响应头和响应体，然后将响应报文发送回客户端。
   响应行包含状态码（指示请求的处理结果）和协议版本。
   响应头包含附加的响应信息，如Content-Type、Content-Length等。
   响应体（可选）包含服务器返回的数据。

5. 客户端接收响应：

   客户端接收到服务器返回的响应报文后，解析响应行、响应头和响应体。
   根据状态码判断请求是否成功，进行相应的处理。
   解析响应头中的其他信息（如Cookie等）。

6. 关闭连接：

   一次HTTP通信结束后，客户端和服务器可以选择关闭连接或保持连接以进行后续的请求响应交互。
   HTTP协议是一种无状态的协议，即每个请求与响应之间是独立的，服务器并不保存客户端的状态信息。为了实现状态的管理，可以使用Cookie等机制来在客户端和服务器之间传递和保存状态信息。

以上是简要的HTTP协议交互原理，它是构成 Web 通信的基础，通过HTTP，浏览器可以向服务器请求资源，并将服务器响应的内容显示给用户。

TLS组成部分

TLS（Transport Layer Security）是一种用于保护网络通信安全的协议。它由以下几个主要组成部分组成：

1. 认证：

   客户端和服务器在TLS握手过程中进行身份认证。客户端验证服务器的身份以确保其可信，而服务器也可以要求客户端进行身份认证。
   通常使用数字证书来实现认证。服务器通过向受信任的证书颁发机构（CA）申请并获取数字证书，证书包含了服务器的公钥和其他相关信息。客户端可以验证证书的有效性来确保连接到的服务器是合法的。

2. 密钥交换：

   在TLS握手过程中，客户端和服务器协商密钥交换算法，用于生成会话密钥。
   常见的密钥交换算法有RSA、Diffie-Hellman和椭圆曲线密码等。

3. 加密算法：

   TLS使用对称加密算法来保护通信数据的机密性。握手过程中协商的会话密钥用于对通信数据进行加密和解密。
   常见的加密算法有AES（Advanced Encryption Standard）、3DES（Triple Data Encryption Standard）等。

4. 完整性保护：

   TLS使用消息认证码（MAC）或哈希函数来提供数据完整性的保护。
   在数据传输过程中，使用MAC算法对数据进行散列运算并附加到数据末尾或在数据上计算哈希，并通过比对接收端得到的结果来验证数据是否完整和未被篡改。

5. 会话管理：

   TLS支持会话缓存和会话恢复机制，以提高通信性能和减少握手时间。
   在建立初始连接时，服务器和客户端可以协商并保存会话相关的信息。在后续的连接中，可以重用这些会话信息，避免重新执行完整的握手流程。

TLS提供了端到端的安全性，保护了数据传输过程中的机密性、完整性和身份认证。它广泛用于保护Web浏览器与服务器之间的HTTPS通信，以及其他需要安全通信的应用场景。

http请求方法幂等操作

HTTP 协议定义了很多请求方法，其中一些被视为幂等操作。一个 HTTP 请求方法被称为幂等的，意味着对同一个资源进行多次该操作所产生的效果和一次操作的效果相同。

常见的 HTTP 幂等请求方法包括：

1. GET：用于获取资源，不会修改服务器上的数据。
2. HEAD：与 GET 类似，但只返回响应头信息而不返回实体主体内容。
3. PUT：用于更新现有资源或者创建新资源。
4. DELETE：删除指定 URI（统一资源标识符） 的对象。
5. OPTIONS：查询服务器支持哪些 HTTP 方法，来处理当前请求 URI 所标示出来的那个动作。

这些幂等操作通常是安全和无副作用（也就是说重复执行不会造成任何影响）。这些特性使得它们非常适合在 RESTful API 设计中使用。如果某个接口要求具备幂等性，则需要满足以下条件：

1. 对于相同参数调用多次必须总能保证结果完全一致
2. 对状态、日志及其他除结果以外在系统中留下轨迹并不能累加

通过使用幂等操作方法可以避免因为网络延迟或其他原因导致服务端收到重复请求从而造成脏数据或错误情况发生。对于开发人员来说，在设计后台 API 时候务必根据业务需求选择正确有效地HTTP 方法，并小心谨慎地控制其行为并且尽可能满足REST架构风格约束规范化API接口设计方案。

http头部字段权重

HTTP 头部字段的权重是指当一个请求或响应中出现了多个同名的头部字段时，各个字段优先级的顺序。HTTP/1.1 规范定义了一套规则用于确定头部字段的权重。

根据 HTTP/1.1 规范，下面是决定头部字段优先级的因素：

1. 请求方法：对于某些特定方法（如 CONNECT、TRACE），服务器可能会忽略一些报文头信息，其他情况下该值无关紧要。
2. 响应状态码：例如 200 OK 比 404 Not Found 更加重要。
3. 报文首部内容：如果有 Content-Length 和 Transfer-Encoding 并存，则前者更好; 如果有多个已经排序过后相等质量(Quality)级别且不为0 的 Accept-Encoding 则可使用任意一个；一般而言 User-Agent 非常难以判断其正确性，可以通过浏览器打开网站并查看用户代理字符串来得到准确信息。
4. 接收方处理能力：浏览器通常比较聪明，并能够适当地降低请求加载时间；而服务端可能就没有那么灵活和智能了。

需要注意的是，在实践中各种浏览器、web框架和服务器会有自己默认设置和行为方式。除此之外也存在企业内网络环境或 CDN 架构配置设施防火墙等技术影响因素。在进行具体场景调试优化之前需要详细分析问题场景及解决方案并采取合理有效措施。

q-values

HTTP/1.1 规范中，Quality Values（q-values）是一种用于表示不同权重的机制，通常用于对请求头、响应头和 Accept-Language 头部字段等进行排序。

在 HTTP 报文中使用 q 值来指定多个同名报文字段的优先级。例如，在 Accept-Encoding 头部字段中可以包含多个编码方式，如 gzip 和 deflate，并使用 q 值来确定它们之间的优先级：

Accept-Encoding: gzip;q=1.0, identity; q=0.5, *;q=0

其中，每一个编码方式后面都有一个以分号为分隔符的参数列表。q 代表 Quality Factor（质量因子），取值范围从 0 到 1，且只保留三位小数。比较两个质量因子时，将把小数点右侧不足三位补齐为三位。

在上述例子中，gzip 的 q 值为 1.0（默认值），而 identity 的 q 值为 0.5。最后一个星号表示没有特殊要求的任意编码都可以接受并且其权重最低，默认情况下其 Q-Factor 是零。

当多个请求支持相同格式但不同选项时，在请求首部 “Accept” 字段里通过设置各自所希望某项内容出现概率大小（即Q值）从而使服务器能够判断客户端期待收到什么样类型和格式数据，并给出最合适响应作答或处理方案。

总体来说，在实际开发过程中需要根据业务需求选择合适头部字段、权重及 Q-Factors 方式并检查相关组件库源代码防止异常情况发生。

gzip编码

gzip编码不是一种客户端编码方式，而是一种数据压缩算法和编码方式，用于在网络传输中减小数据的传输大小。

当客户端发送HTTP请求时，可以通过设置请求头字段中的"Accept-Encoding"来指定客户端支持的压缩编码方式。其中，如果客户端支持gzip编码，可以设置：

Accept-Encoding: gzip
这样，客户端告知服务器它支持使用gzip算法对响应数据进行压缩编码。

服务器在收到这个请求头字段后，如果服务器支持gzip编码，并且对要发送的响应内容进行了压缩，就会在响应头中添加"Content-Encoding: gzip"字段，以告知客户端响应使用了gzip编码。这样，客户端在接收到响应时会解压缩响应数据，以获取原始的数据内容。

综上所述，gzip编码是一种服务器端使用的数据压缩和编码方式，而客户端可以通过设置请求头字段来指定对gzip编码的支持。

WebSocket

WebSocket简介、WebSocket.onerror

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它可以使客户端和服务器之间的实时数据交换变得更加简单和高效。与HTTP不同，WebSocket没有请求/响应模型，而是建立一个持久连接，并且允许双方随时发送消息。

当使用WebSocket时，客户端通过向服务器发起握手来建立连接。一旦握手完成，客户端和服务器就可以相互发送消息了。这些消息可以是文本或二进制格式的任何内容。

然而，在使用WebSocket时可能会出现错误。例如，在建立连接期间发生故障、无法解析传输数据等情况下都可能会导致错误。在这种情况下，WebSocket.onerror事件将被触发，并带有相关的错误信息。

调用onerror处理程序函数后,如果返回值为true，则表示已经正确地处理并消耗掉该事件；否则返回false表明未能正确地处理此事件，默认为 false 。

• WebSocket 有同源限制。在浏览器中，WebSocket 遵循同源策略，即只允许在相同协议、域名和端口下的页面之间进行 WebSocket 连接。
• WebSocket 建立在 TCP 协议上。TCP 是一种面向连接的协议，它提供可靠的数据传输，而 WebSocket 利用 TCP 提供的可靠传输来实现双向通信。
• WebSocket 使用的数据格式相对轻量。WebSocket 数据传输使用的是二进制格式（binary format），可以直接传输原始二进制数据，而不需要像 HTTP 请求那样进行 Base64 编码或其他转换。这可以减少数据传输的开销，并提高传输效率。
• WebSocket 没有默认端口。它可以使用与 HTTP 相同的端口（通常是 80 或 443），也可以使用其他非常规端口。在连接时，需要明确指定要连接的 WebSocket 服务器的端口号。

prompt组件

在用户准备离开该页面时, 弹出提示, 返回true或者false, 如果为true, 则离开页面, 如果为false, 则停留在该页面

 <Prompt message="您确定要离开该页面吗?" when={this.state.isOpen} />

Chrome DevTools

切换设备

console.log,info,warn,error

React

Router实操

  <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>

React语法

React 是一个用于构建用户界面的 JavaScript 库。它采用了一种特殊的语法扩展，称为 JSX（JavaScript XML），用于描述组件的结构和外观。

以下是 React 中常用的语法：

1. 组件定义：通过创建类组件或函数组件来定义一个 React 组件。

• 类组件：

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

• 函数组件：

function MyComponent() {
  return <div>Hello, World!</div>;
}

2. JSX 元素：使用类似 HTML 标签的语法来表示组件的输出。
   const element = <h1>Hello, World!</h1>;

3. 属性传递：通过在 JSX 元素上使用属性来传递数据给组件。

const name = 'John';
const element = <div>Hello, {name}!</div>;

4. 条件渲染：使用条件表达式和逻辑运算符来根据条件选择性地渲染内容。

function Greeting(props) {
  if (props.isLoggedIn) {
    return <div>Welcome back!</div>;
  } else {
    return <div>Please log in.</div>;
  }
}

5. 列表渲染：使用 map 方法将数组映射为一组 JSX 元素。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li key={number}>{number}</li>);

6. 事件处理：通过在 JSX 元素上添加事件处理函数来响应用户的交互行为。

function handleButtonClick() {
  console.log('Button clicked!');
}

const element = <button onClick={handleButtonClick}>Click Me</button>;

7. 组件间通信：使用组件之间的 props 和 state 来实现数据的传递和共享。

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: 'Hello, World!' };
  }

  render() {
    return <ChildComponent message={this.state.message} />;
  }
}

function ChildComponent(props) {
  return <div>{props.message}</div>;
}

以上是 React 中的一些常用语法。需要注意的是，JSX 语法需要经过编译才能被 JavaScript 解释执行，通常使用工具如 Babel 来将 JSX 编译为标准的 JavaScript 代码。同时，还有很多其他更高级的 React 语法和概念，如生命周期、Hooks、Context 等，可以进一步深入学习和探索。

异常处理

在 React 中，可以使用以下方式来处理异常：

1. 错误边界（Error Boundaries）: 错误边界是 React 组件的一种特殊组件，用于捕获和处理其子组件中发生的 JavaScript 错误。要创建错误边界，你需要定义一个继承自 React.Component 的类组件，并实现 componentDidCatch 方法来捕获错误。在 componentDidCatch 方法中，你可以根据需要记录错误信息、展示备用 UI 或发送错误报告。

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    // 处理错误，例如记录错误信息、展示备用 UI 等
  }

  render() {
    return this.props.children;
  }
}

// 在组件中使用错误边界
<ErrorBoundary>
  {/* 子组件 */}
</ErrorBoundary>

2. try-catch 语句: 对于无法通过错误边界捕获的错误，可以在组件的方法中使用 try-catch 语句进行捕获和处理。

class MyComponent extends React.Component {
  handleClick() {
    try {
      // 可能抛出错误的代码
    } catch (error) {
      // 处理错误
    }
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>Click Me</button>
    );
  }
}

3. 全局错误处理: React 也支持全局错误处理，在根组件中使用 window.onerror 或 window.addEventListener('error', handler) 来捕获全局错误。但需要注意的是，全局错误处理不会捕获 React 组件中的错误，因此仍然需要结合错误边界或 try-catch 语句来处理组件级别的错误。

window.onerror = function(error, url, line) {
  // 全局错误处理
};

以上是在 React 中处理异常的一些常见方式。根据具体情况选择合适的方式来捕获和处理错误。同时，建议在开发过程中使用开发者工具来检查错误和警告，以尽早发现并修复潜在问题。

react调试：source-map配置

• none: 表示不生成Sourcemap。此选项将禁用Sourcemap的生成。

• inline: 表示生成内联Sourcemap。Sourcemap将以Base64编码的形式嵌入到转换后的文件中。

• eval: 表示将Sourcemap作为eval函数的一部分生成。这种方式通常用于开发环境，Sourcemap会直接嵌入到转换后的代码中，以便在调试过程中动态加载。

• source-map: 表示生成外部Sourcemap文件。该文件将与转换后的代码文件分开存放，并通过一个独立的URL链接进行引用。

• hidden: 表示生成外部Sourcemap文件，但不公开其存在。这意味着Sourcemap文件将被保存，但不会暴露给用户或浏览器。

• cheap-eval-source-map: 生成性能较好的 Sourcemap。转换后的代码会包含 Sourcemap 信息，但只会精确到行级别，不包含列信息。适用于开发环境。

• cheap-module-eval-source-map:类似于 "cheap-eval-source-map"，但同时包含了 loader 转换后的源代码这样配置提示的错误是比较全面的，同时打包速度也是比较快的

• eval-source-map: 生成质量较高的 Sourcemap。转换后的代码会包含 Sourcemap 信息，包括行和列的映射关系。适用于开发环境。

• cheap-source-map: 生成质量较高的 Sourcemap。Sourcemap 信息会作为独立文件进行输出，包括行级别的映射关系。适用于生产环境。

• cheap-module-source-map: 生成质量较高的 Sourcemap。与 cheap-source-map 类似，但会包括原始源代码中的模块信息。适用于生产环境。

• inline-cheap-source-map: 生成性能较好的内联 Sourcemap。转换后的代码会包含 Sourcemap 信息，但只会精确到行级别，不包含列信息。适用于开发环境。

• inline-cheap-module-source-map: 生成性能较好的内联 Sourcemap。与 inline-cheap-source-map 类似，但会包括原始源代码中的模块信息。适用于开发环境。

• source-map: 生成质量较高的 Sourcemap。Sourcemap 信息会作为独立文件进行输出，包括行和列的映射关系。适用于生产环境。

• inline-source-map: 生成质量较高的内联 Sourcemap。转换后的代码会包含 Sourcemap 信息，包括行和列的映射关系。适用于开发环境。

• hidden-source-map: 生成质量较高的 Sourcemap，但不公开其存在。Sourcemap 文件将被保存，但不会暴露给用户或浏览器。适用于生产环境。

• nosources-source-map: 生成只包含映射关系的 Sourcemap，并且不包含原始源代码内容。适用于生产环境。

这些配置选项的选择取决于开发环境和生产环境的需求，以及对性能和安全性的权衡。在开发过程中，通常使用具有较高质量的 Sourcemap 进行调试，而在生产环境中，可以使用性能更好的 Sourcemap 或者隐藏源代码信息以增加安全性

Redux中间件

Redux 中间件是对 Redux 的增强，它提供了一种可插拔的机制，在 action 被 dispatch 到 reducer 前后拦截、处理或转换它们。中间件在应用程序中被广泛使用，可以添加日志记录、异步操作和错误处理等功能。

Redux 中间件通过函数组合的方式工作，每个函数接收 Store 的 dispatch 和 getState 方法，并返回一个包含 next 参数的新函数。next 参数指向与当前 middleware 组合链中下一个 middleware 相关联的 dispatch 函数或者最终派发到 reducer 上去。

常见的 Redux 中间件有：

1. redux-thunk：支持 dispatch 异步 action。
2. redux-logger：输出每个 action 及其产生效果之前后状态树快照。
3. redux-promise：允许直接返回 Promise 对象作为 Action Payload 的值。
4. redux-saga：基于 Generator 实现复杂业务流程控制。
5. reselect：缓存计算结果以优化性能。

举例来说，我们使用 redux-thunk 来实现异步请求数据并更新 store：

// actions.js
export const fetchData = () => {
  return (dispatch) => {
    // 在此处发送网络请求获取数据

    fetch('/api/data')
      .then(res => res.json())
      .then(data => {
        // 发送成功时将 data （payload）传给 reducer 处理更新 state
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
      })
      .catch(error => console.log('fetchData Error:', error));
  };
};
// reducers.js
const initialState = { data: null };
function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_DATA_SUCCESS':
      return { ...state, data: action.payload };
    default:
      return state;
  }
}

上述代码中，在发送网络请求获取数据时需要进行异步操作。如果不使用 applyMiddleware 应用 thunk middleware ，则无法通过 dispatch 获取到异步请求得到的结果并同步更新 store 。而经过 applyMiddleware 扩展之后，则可以像上面那样编写感觉同步但实际上是异步执行流程（即“延迟”的普通 JavaScript 函数），轻松地完成这项任务。

React合成事件

React 合成事件是 React 提供的一种用于处理 DOM 事件的机制。它将所有浏览器原生事件封装成了一个跨浏览器兼容、具有相同 API 的合成事件对象，从而屏蔽了不同浏览器之间的差异性。

在 React 中，使用合成事件来处理 DOM 事件非常方便和安全，因为：

1. 可以统一管理所有组件中的事件监听函数。
2. 可以使用 event.preventDefault() 或 event.stopPropagation() 等方法阻止默认行为或停止冒泡。
3. 在某些情况下还可以提高性能（如 Event Pooling）。

React 支持大多数标准化的 DOM 事件，例如 click、change、submit 等等。其原理是通过在 document 上注册捕获阶段的统一监听函数来代替直接给每个节点添加单独的监听器。这样做可以避免内存泄漏问题，并且提高了性能。

尽管 React 已经对底层原生浏览器实现进行了限制和抹平（例如 SyntheticEvent 处理跨浏览器问题），但仍然存在一些需要注意和规避的坑点，比如：

• 对表单元素取值时需要使用 syntheticEvent.target.value 而不是 e.currentTarget.value
• 使用 setState 更新 state 值时可能会出现异步更新导致获取到旧值或者部分更新等情况
• 组件卸载后如果没有正确销毁相关资源可能会导致内存泄漏

总体上来说，在开发过程中，我们应该优先考虑使用 React 提供的合成事件机制来处理 DOM 交互逻辑并保证代码质量和易维护性。

withRouter向组件传递的props信息

withRouter 是一个高阶组件(HOC)，它主要用于将 react-router 的路由信息传递给非路由组件。

withRouter 会向被包装的组件传递以下 props：

• history：用于管理浏览器历史记录，如跳转页面、前进和后退等。
• location：当前路径相关信息，如 pathname、search、hash 等。
• match：匹配当前 URL 的参数和路径名等信息。

例如，在使用 withRouter 后，我们可以在非路由组件中使用 history.push 来进行页面跳转：

import { withRouter } from 'react-router-dom';
function MyComponent(props) {
  const handleClick = () => {
    props.history.push('/other-page');
  };
  return (
    <button onClick={handleClick}>Go to other page</button>
  );
}
export default withRouter(MyComponent);

此时 MyComponent 组件就可以访问到 this.props.history 这个对象，并且可以调用里面的方法来实现页面跳转。

JavaScript

函数，参数

Document类型

语法

运算符

对象

数字

随机

• onload事件可以操作dom并且检测浏览器版本类型

HTML5

编辑器

基础

文档

标题

• 在html 5中,<hgroup>元素用于组合标题元素

样式

CSS3

背景图像，重复

display

语法

边距

边框