前端基础知识总结(三)--计算机基础

做梦都在学习前端
105 阅读21分钟

前端基础知识总结(三)--计算机基础

目的：方便自己整体复习前端的基础知识。
资源：在鱼皮整理的前端学习路线的基础上结合自身对相关知识的掌握程度进行的总结。

DNS

DNS（Domain Name System）域名系统，DNS 维护着一个域名列表以及与之相关联的资源（例如 IP 地址）。 从域名到 IP 地址的映射过程被称为 DNS 查询（DNS lookup）。与之对应，DNS 反向查询（rDNS）用来找到与 IP 地址对应的域名。

服务器

服务器是为用户（通常称为客户端）提供服务的软件或硬件。硬件而言的服务器是互联网上的共享计算机，通常性能强劲且位于数据中心。软件而言的服务器（一般是运行在硬件服务器上）是一种向客户端程序或向用户界面提供服务的程序。

浏览器

网络浏览器或浏览器是一种从 Web 获取和显示页面的程序，并且让用户通过超链接访问更多页面。浏览器是最常见的一种用户代理。

DOM 事件流

DOM 事件流是指在 HTML 或 XML 文档中，由用户或浏览器执行的事件的传递路径。当某个元素触发一个事件时，该事件并不会立即被处理，而是会按照一个特定的流程在 DOM 中进行传播。这个过程主要包括三个阶段：捕获阶段、目标阶段和冒泡阶段。在捕获阶段，事件从根元素开始向下传递，直到到达触发事件的元素；在目标阶段，事件到达目标元素；最后，在冒泡阶段，事件从目标元素开始向上冒泡，直到到达 DOM 树的顶层。

事件委托

也称为事件代理，是一种利用事件冒泡机制的技术。它的基本思想是将元素的事件委托给其父级或更外层的元素处理。

浏览器加载顺序

  1. 解析 URL：浏览器首先解析用户输入的 URL 地址。
  2. DNS 解析：浏览器通过 DNS 将域名解析成 IP 地址。
  3. 建立连接：浏览器获取端口号，并通过 TCP 三次握手建立服务器与浏览器的连接。
  4. 发送 HTTP 请求：浏览器向服务器发送 HTTP 请求。
  5. 服务器处理请求：服务器处理请求，并返回响应结果。
  6. 断开连接：通过 TCP 四次挥手断开服务器与浏览器的连接。

浏览器加载、解析和渲染过程

  1. 加载 HTML：浏览器开始加载 HTML 文档。
  2. 解析 HTML：浏览器将 HTML 解析成 DOM 树（Document Object Model）。
  3. 加载外部资源：浏览器开始加载 HTML 中引用的外部资源，如 CSS 样式表、JavaScript 脚本、图片等。这些资源的加载顺序可能因浏览器的实现和页面中的代码而异。
  4. 解析并应用 CSS：浏览器解析 CSS 样式表，并应用到 DOM 树上，形成渲染树（Render Tree）。
  5. 执行 JavaScript：浏览器解析并执行 JavaScript 脚本。需要注意的是，JavaScript 的加载和执行可能会阻塞页面的渲染，具体取决于脚本的位置和加载方式。
  6. 布局和绘制：浏览器根据渲染树进行布局计算，确定每个元素在屏幕上的位置，然后进行绘制，将页面内容显示在屏幕上。

浏览器事件循环

浏览器的事件循环是浏览器处理 JavaScript 异步执行的一种机制。

  1. 执行同步任务：所有的同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
  2. 任务队列：主线程之外，存在一个或多个任务队列（task queue）。只要异步任务有了运行结果，就会在任务队列中放置一个事件。任务队列是先进先出（FIFO）的数据结构，用于存储异步任务。其中，任务队列又分为宏任务队列和微任务队列。宏任务包括 setTimeout、setInterval、script（整个 js 文件代码）、I/O 操作、UI 渲染等。微任务则会在当前宏任务执行完成后、下一个宏任务执行前执行。
  3. 执行异步任务：一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看里面有哪些事件。对应的异步任务于是结束等待状态，进入执行栈，开始执行。这个过程会一直重复，形成一个循环。

具体来说，当调用栈为空时，事件循环开始工作。它会首先检查宏任务队列，如果有任务，就将任务推入调用栈执行。执行完毕后，再检查微任务队列，如果有微任务，就将其依次推入调用栈执行。这个过程会一直重复进行，形成了一个循环。

浏览器同源策略

浏览器同源策略是一种安全策略，用于限制不同源（Origin）之间的交互。同源策略的主要目的是防止恶意网站通过脚本等方式访问其他源的敏感数据或进行未经授权的操作，从而确保 Web 应用程序的安全性。这里的“源”指的是由协议（如 HTTP、HTTPS）、主机名（如www.example.com）和端口号（如8080）三部分组成的URL。

同源策略主要限制以下几个方面的交互：

  1. 跨域资源读取：在浏览器中，一个网页只能通过特定的方式（如 AJAX、WebSocket 或 Fetch API 等）请求同源网站的数据。
  2. 跨域资源加载：浏览器中的脚本无法直接加载来自其他域的资源，如 JavaScript 文件、CSS 文件或字体文件。
  3. 跨域窗口通信：浏览器中的脚本只能与同源窗口进行通信，不能直接操作或获取来自其他域的窗口对象的内容。

跨域解决方案

跨域解决方案主要指的是在 Web 开发中，针对由于浏览器同源策略导致的跨域问题所采取的解决措施。

  1. JSONP（JSON with Padding）：JSONP 是一种跨域请求的通信方式，它允许网页从其他域名的服务器请求数据，即允许跨域访问。其原理是利用了 <script>标签不受浏览器同源策略的限制，通过动态创建<script>标签并请求一个带参网址来实现跨域通信。
  2. CORS（跨域资源共享）：CORS 是一种基于 HTTP 头的机制，它允许服务器标示除了它自己以外的其它 origin（域，协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。通过后端设置相应的 HTTP 头部信息，可以实现跨域资源共享。
  3. 代理服务器：通过代理服务器（如 Nginx 或 Node.js 中间件）来转发请求，客户端请求代理服务器，代理服务器再请求目标服务器，然后将目标服务器的响应返回给客户端。这种方式利用了服务器请求服务器不受浏览器同源策略的限制实现的跨域。
  4. document.domain + iframe：当两个页面具有相同的父级域时，可以通过设置 document.domain 来使它们具有相同的域，从而通过 iframe 进行跨域通信。
  5. postMessage：window.postMessage 是 HTML5 中实现跨文档消息传递的新 API。它允许来自不同源的页面通过消息传递进行通信，同时提供了源检查的功能，确保接收到的消息来自预期的源。
  6. WebSocket 协议：WebSocket 协议是一种在单个 TCP 连接上进行全双工通信的协议，它可以在不同源的页面之间建立持久的连接，实现跨域通信。

浏览器缓存

浏览器缓存（Browser Caching）,当浏览器在用户磁盘上对最近请求过的文档进行存储后，若访问者再次请求这个页面，浏览器便可以直接从本地磁盘显示文档，无需重新从服务器加载，从而显著加速页面的阅览。

浏览器缓存（这里指 HTTP 缓存）主要有两类：协商缓存和强缓存，协商缓存包括 Last-Modified 和 Etag，它们通过与服务器进行协商来确定缓存内容是否仍然有效。强缓存则使用 Cache-Control 和 Expires 头部信息来指定缓存内容的有效期。

Cache-Control 的 max-age 配置项相对于 expires 的优先级更高。当 Cache-Control 与 expires 同时出现时，我们以 Cache-Control 为准。

Last-Modified 是一个时间戳，Etag 是由服务器为每个资源生成的唯一的标识字符串，Etag 并不能替代 Last-Modified，它只能作为 Last-Modified 的补充和强化存在。 Etag 在感知文件变化上比 Last-Modified 更加准确，优先级也更高。当 Etag 和 Last-Modified 同时存在时，以 Etag 为准。

HTTP 缓存决策：当我们的资源内容不可复用时，直接为 Cache-Control 设置 no-store，拒绝一切形式的缓存；否则考虑是否每次都需要向服务器进行缓存有效确认，如果需要，那么设 Cache-Control 的值为 no-cache；否则考虑该资源是否可以被代理服务器缓存，根据其结果决定是设置为 private 还是 public；然后考虑该资源的过期时间，设置对应的 max-age 和 s-maxage 值（s-maxage 就是用于表示 cache 服务器上（比如 cache CDN）的缓存的有效时间，并只对 public 缓存有效。s-maxage 仅在代理服务器中生效，客户端中我们只考虑 max-age。）；最后，配置协商缓存需要用到的 Etag、Last-Modified 等参数。

存储

  1. localStorage：localStorage 中的键值对总是以字符串的形式存储。
localStorage.setItem("myCat", "Tom");
let cat = localStorage.getItem("myCat");
localStorage.removeItem("myCat");
localStorage.clear();
  1. sessionStorage：存储在 sessionStorage 里面的数据在页面会话结束时会被清除。即便是相同域名下的两个页面，只要它们不在同一个浏览器窗口中打开，那么它们的 Session Storage 内容便无法共享。
// 保存数据到 sessionStorage
sessionStorage.setItem("key", "value");

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem("key");

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem("key");

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

HTTP

超文本传输协议（HTTP）是一个用于传输超媒体文档（例如 HTML）的应用层协议。一般 TCP 连接的端口号是 80。

HTTP 协议的主要特点包括：

  1. 无连接：HTTP 协议使用无连接的方式处理请求，即每个请求都需要与服务器建立新的连接，处理完成后连接就断开了。
  2. 无状态：HTTP 协议本身是无状态的，即服务器不会记住之前客户端发送的请求和响应的信息。每次请求都是独立的，服务器只会根据当前请求的内容进行处理并返回响应。
  3. 基于请求-响应模式：HTTP 协议采用请求-响应模式进行通信。客户端发送一个请求到服务器，服务器处理请求后返回一个响应给客户端。请求和响应都包含了一些特定的信息，如请求方法、请求头、请求体以及响应状态码、响应头等。

HTTP 状态码

  1. 1xx：信息性状态码
  • 100 Continue：客户端应当继续发送请求。这个临时响应用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。
  • 101 Switching Protocols：服务器根据客户端的请求切换协议。只能包含在响应消息中，并且紧随一个 Upgrade 头域行之后。
  1. 2xx：成功状态码
  • 200 OK：请求成功。一般用于 GET 与 POST 请求。
  • 201 Created：请求成功并且服务器创建了新的资源。
  • 202 Accepted：服务器已接受请求，但尚未处理。
  • 204 No Content：服务器成功处理了请求，但不需要返回任何实体内容。
  1. 3xx：重定向状态码
  • 301 Moved Permanently：请求的网页已永久移动到新位置。
  • 302 Found：临时性重定向。
  • 304 Not Modified：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变。
  1. 4xx：客户端错误状态码
  • 400 Bad Request：请求报文存在语法错误。
  • 401 Unauthorized：请求需要进行身份验证。
  • 403 Forbidden：服务器理解请求客户端的请求，但是拒绝执行此请求。
  • 404 Not Found：服务器无法根据客户端的请求找到资源（网页）。
  1. 5xx：服务器错误状态码
  • 500 Internal Server Error：服务器内部错误，无法完成请求。
  • 502 Bad Gateway：作为网关或代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。
  • 503 Service Unavailable：由于临时的服务器维护或者过载，服务器当前无法处理请求。

WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。在 WebSocket API 中，浏览器和服务器只需完成一次握手，之后就可以创建持久性的连接并进行双向数据传输。它允许服务端主动向客户端推送数据。

cookie、session 和 token

HTTPS

HTTPS（Hypertext Transfer Protocol Secure）是一种安全的 HTTP 协议，它是在 HTTP 协议的基础上加入了安全层（SSL/TLS），从而保障网络通信的安全。HTTPS 的主要目的是提供对网站服务器的身份认证，并保护交换数据的隐私与完整性。

HTTPS 的工作原理大致如下：

  1. 客户端发送 HTTPS 请求到服务器。
  2. 服务器返回数字证书（包括公钥）给客户端。
  3. 客户端验证证书是否合法，如果合法，则生成一个随机的对称加密密钥。
  4. 客户端使用服务器的公钥将该密钥加密，然后发送给服务器。
  5. 服务器使用自己的私钥将密钥解密。
  6. 服务器和客户端使用该对称密钥进行加密和解密，完成后续的数据传输。

计算机网络

网络模型

OSI 七层参考模型和 TCP/IP 四层参考模型

OSI 七层参考模型

（Open System Interconnect）七层参考模型是国际标准化组织为开放式互连信息系统提供了一种功能结构的框架。这个模型定义了网络互连的七层框架，从低到高分别是：物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。每层的功能如下：

  1. 物理层（Physical Layer）：位于 OSI 参考模型的最底层，负责为数据传输提供物理通道，如光纤、电缆等。物理层定义了物理设备和它们之间的物理连接规则，为上层提供一个透明的比特流传输服务。
  2. 数据链路层（Data Link Layer）：位于物理层之上，负责将数据分成帧，并在两个相邻节点间的线路上无差错地传输这些帧。它还负责建立、维护和释放数据链路，以及处理传输错误和流量控制。
  3. 网络层（Network Layer）：负责数据包的发送和接收，包括路由选择和逻辑地址寻址。它确保数据包从源端系统正确到达目的端系统，即使它们位于不同的网络段。
  4. 传输层（Transport Layer）：位于网络层之上，负责在源端系统和目的端系统之间建立、维护和终止会话或连接。它提供可靠的数据传输服务，包括流量控制、差错控制和分段/重组等功能。
  5. 会话层（Session Layer）：负责建立、管理和终止会话连接。它确保应用程序之间的通信会话能够有序地进行，包括会话连接的流量控制、数据传输、恢复与释放等。
  6. 表示层（Presentation Layer）：对上层数据或信息进行变换以保证一个主机应用层信息可以被另一个主机的应用程序理解。表示层的数据转换包括数据的加密、压缩、格式转换等。
  7. 应用层（Application Layer）：OSI 参考模型的最顶层，负责处理用户和应用程序之间的通信。它提供了各种网络应用服务，如电子邮件、文件传输、远程登录等。

TCP/IP 四层参考模型

TCP/IP 四层参考模型是计算机网络中广泛使用的概念模型，它将网络通信功能划分为四个主要层次，以简化网络的设计和管理。这四个层次从低到高依次是：网络接口层、网络层（也称为网际层）、传输层和应用层。

  1. 网络接口层：这是 TCP/IP 模型的最低层，负责接收从网络层交来的 IP 数据包，并通过低层物理网络将其发送出去。同时，它也从低层物理网络上接收物理帧，然后抽出 IP 数据包交给网络层。这一层包括了能使用 TCP/IP 与物理网络进行通信的协议，但 TCP/IP 标准并没有定义具体的网络接口协议，旨在提供灵活性以适应各种网络类型，如 LAN、MAN 和 WAN。
  2. 网络层（网际层）：网络层的主要功能是处理来自传输层的分组，将分组形成数据包（IP 数据包），并为该数据包进行路径选择，最终将数据包从源主机发送到目的主机。此外，它还包括一些重要的协议，如网际协议 IP、ICMP、IGMP、ARP 和 RARP。
  3. 传输层：传输层负责主机到主机之间的端对端通信，它提供了可靠的、基于字节流的通信服务。在这一层，主要使用了两种协议来支持数据的传送，即 TCP 协议和 UDP 协议。TCP 协议是面向连接的、可靠的传输协议，它保证了数据的顺序性和完整性；而 UDP 协议则是无连接的，它更注重传输的效率而不是可靠性。
  4. 应用层：应用层位于 TCP/IP 模型的最高层，它为用户提供了各种网络应用程序，如电子邮件、远程登录、文件传输等。这一层还包括了许多协议，如 SMTP、POP3、TELNET、DHCP、HTTP 等，这些协议使得用户能够通过网络进行各种应用操作。

UDP / TCP 协议

UDP（User Datagram Protocol，用户数据报协议）和 TCP（Transmission Control Protocol，传输控制协议）

  1. UDP 协议是一种无连接的传输层协议，它不保证数据包的可靠性、顺序性和完整性，也不提供拥塞控制和流量控制等功能。UDP 协议的工作原理是将数据封装成数据报直接发送，无需建立连接和维护状态。适用于需要快速传输和广播的应用，如 DNS 查询、实时游戏等。然而，UDP 协议不提供错误检测和重传机制，因此数据传输的可靠性不如 TCP 协议。
  2. TCP 协议则是一种面向连接的、可靠的、基于字节流的传输层通信协议。在使用 TCP 协议之前，应用程序必须先建立 TCP 连接，并在传送数据完毕后释放已经建立的连接。TCP 协议通过序列号对每个报文段进行标记，确保接收方按照正确的顺序进行数据重组，并使用确认和重传机制保证数据的可靠性。此外，TCP 协议还提供了拥塞控制机制，可以根据网络状况自适应调整传输速率。

操作系统

进程、线程

进程是资源分配的基本单位，而线程是实际执行任务的单位

软件开发基础

设计模式

  • 单例模式:保证一个类仅有一个实例，并提供一个访问它的全局访问点。
  • 代理模式
  • 工厂模式
  • 装饰者模式
  • 观察者模式
  • 策略模式
  • 门面模式

Git 版本控制

  1. 初始化仓库：
  • git init：在当前目录初始化一个新的 Git 仓库。
  1. 添加文件到暂存区：
  • git add <文件名>：将指定文件添加到暂存区。
  • git add .：将当前目录下的所有文件添加到暂存区。
  1. 提交修改：
  • git commit -m "备注"：将暂存区的内容提交到本地仓库，并添加备注信息。
  1. 查看仓库状态：
  • git status：查看当前仓库的状态，包括哪些文件已修改、哪些文件已添加到暂存区等。
  1. 查看文件差异：
  • git diff：查看工作区与暂存区之间的文件差异。
  • git diff --cached 或 git diff --staged：查看暂存区与最新提交之间的文件差异。
  1. 查看提交历史：
  • git log：查看提交历史记录。
  • git show <commit_id>：查看指定提交的详细信息。
  1. 分支管理：
  • git branch：列出所有本地分支。
  • git branch <branch-name>：创建新分支。
  • git checkout <branch-name>：切换到指定分支。
  • git merge <branch-name>：将指定分支合并到当前分支。
  1. 远程仓库操作：
  • git clone <url>：克隆一个已存在的远程仓库到本地。
  • git remote -v：查看当前配置的远程仓库信息。
  • git push <remote> <branch>：将本地分支的修改推送到远程仓库。
  • git pull <remote> <branch>：从远程仓库拉取最新修改并合并到本地分支。
  1. 撤销操作：
  • git reset --hard <commit_id>：将当前分支的 HEAD 指针回退到指定提交，并丢弃之后的修改。
  • git revert <commit_id>：创建一个新的提交来撤销指定提交的修改。
  1. 其他常用命令：
  • git help <command>：查看指定命令的帮助信息。
  • git stash：暂存当前修改，以便稍后恢复。
  • git stash pop：恢复暂存的修改并删除 stash 记录。
  • git config：配置 Git 的相关设置。

Linux 服务器

  1. 文件和目录操作：
  • cd <目录>：切换当前目录。例如，cd /home 进入 /home 目录，cd .. 返回上一级目录。
  • pwd：显示当前工作路径。
  • ls：查看目录中的文件和文件夹。使用-l 选项可以显示详细信息，如-al 显示所有文件和文件夹的详细信息。
  • mkdir <目录名>：创建目录。例如，mkdir dir1 dir2 同时创建两个目录。
  • rmdir <目录名>：删除空目录。
  • rm <文件名或目录名>：删除文件或目录。使用-r 或-rf 选项可以递归删除目录及其内容。
  1. 进程管理：
  • ps：查看当前运行的进程。使用不同的选项可以显示不同的信息，如-A 列出所有进程，-ef 查看全格式的全部进程。
  • kill <进程 ID>：终止指定进程 ID 的进程。
  • top：实时显示系统中各个进程的资源占用状况。
  1. 网络配置与状态：
  • ping <主机名或 IP 地址>：测试网络连接。
  • ifconfig 或 ip addr：查看或配置网络接口信息。
  • netstat：显示网络连接、路由表、接口统计等网络相关信息。
  1. 系统信息：
  • uname -a：查看内核/操作系统/CPU 信息。
  • df -h：查看各分区使用情况。
  • du -sh <目录或文件>：查看指定目录或文件的磁盘使用情况。
  • free -m：查看内存使用量和交换区使用量。
  1. 其他常用命令：
  • man <命令名>：查看指定命令的手册页，获取详细帮助信息。
  • clear 或 ctrl + L：清空控制台屏幕。
  • echo <内容>：在终端输出内容，或将内容重定向到文件。
  • touch <文件名>：创建空文件或更新文件时间戳。
  • grep <模式> <文件名>：在文件中搜索指定模式的文本。
  • tar：用于打包和解包文件。
  • find：在目录树中查找文件。
avatar
文章
阅读
粉丝