2023.05.30 - 2023.06.04 更新前端面试问题总结（20道题）
获取更多面试相关问题可以访问
github 地址: github.com/pro-collect…
gitee 地址: gitee.com/yanleweb/in…

目录：

• 初级开发者相关问题【共计 1 道题】

  • 412.什么是同源策略【热度: 1,430】【网络】【出题公司: 百度】

• 中级开发者相关问题【共计 10 道题】

  • 395.[vue] vue3 性能提升主要是体现在哪些方面【热度: 324】【web框架】【出题公司: Shopee】
  • 397.了解哪些基础算法【JavaScript】
  • 398.有哪些场景的 http header【网络】【出题公司: 阿里巴巴】
  • 399.304 是什么场景的状态码， 好处和坏处分别是什么【热度: 1,425】【网络】【出题公司: 腾讯】
  • 401.ajax 是否支持取消请求 【网络】【出题公司: 小米】
  • 402.使用 ajax 封装一个上传文件的函数【热度: 206】【网络】【出题公司: 美团】
  • 403.fetch 与 ajax 的区别是什么【网络】
  • 408.token过期后，页面如何实现无感刷新【热度: 485】【网络】【出题公司: 网易】
  • 409.进程和线程的区别是什么？【网络】【出题公司: Shopee】
  • 411.什么是文档的预解析【热度: 1,133】【网络】【出题公司: 腾讯】

• 高级开发者相关问题【共计 9 道题】

  • 394.[webpack] 提高 webpack 的构建速度的办法有哪些【热度: 1,208】【web框架】【出题公司: 网易】
  • 396.[vue] vue3 相比较于 vue2 在编译阶段有哪些改进【web框架】
  • 400.介绍一下 XMLHTTPRequest 对象【热度: 453】【网络】【出题公司: 百度】
  • 404.OSI的七层模型是什么【网络】
  • 405.TLS/SSL的工作原理【热度: 499】【网络】
  • 406.数字证书了解多少【热度: 1,834】【网络】
  • 407.TCP粘包了解多少【热度: 927】【网络】【出题公司: 京东】
  • 410.在浏览器内多个标签页之间实现通信有哪些方式【热度: 897】【网络】【出题公司: 阿里巴巴】
  • 413.什么是正向代理，反向代理【热度: 1,294】【网络】【出题公司: 小米】

初级开发者相关问题【共计 1 道题】

412.什么是同源策略【热度: 1,430】【网络】【出题公司: 百度】

关键词：同源策略限制了什么资源

同源策略（Same-Origin Policy）是一种浏览器安全机制，用于限制不同源（域名、协议、端口）之间的交互。它是一种重要的安全措施，用于保护用户的隐私和安全，防止恶意网站通过跨域请求获取用户的敏感信息或进行恶意操作。

同源策略要求网页资源（如JavaScript、CSS、图片等）只能与来源相同的资源进行交互，即只能与相同域名、相同协议和相同端口的资源进行通信。例如，一个网页加载自https://www.example.com 域名下的资源，就只能与同一域名下的其他资源进行交互，无法直接访问其他域名的资源。

同源策略主要限制了以下几种行为：

1. DOM访问限制：不同源的页面无法通过JavaScript等方式直接访问对方的DOM元素，即无法获取或修改对方页面的内容。
2. Cookie、LocalStorage和IndexDB限制：不同源的页面无法读取对方设置的Cookie、LocalStorage和IndexDB存储。
3. AJAX请求限制：XMLHttpRequest、Fetch等网络请求在跨域时受到限制，通常无法发送跨域请求。

同源策略的存在有效地防止了跨站脚本攻击（XSS）和跨站请求伪造（CSRF）等安全威胁。如果需要在不同源之间进行数据交互，可以通过服务器端的代理或使用CORS（跨源资源共享）等技术来实现。

需要注意的是，同源策略只是浏览器的安全策略之一，而并非所有的网络请求都受到同源策略的限制。例如，通过<script>标签引入的外部JavaScript文件、通过<img> 标签加载的图片等资源是不受同源策略限制的。此外，一些特定的标记，如<a>标签的href属性和<form>标签的action属性，也存在一些允许跨域的规则。

中级开发者相关问题【共计 10 道题】

395.[vue] vue3 性能提升主要是体现在哪些方面【热度: 324】【web框架】【出题公司: Shopee】

关键词：vue3 性能提升、vue3 编译优化、vue3 初始化优化、vue3 Tree-shaking支持、vue3 虚拟DOM优化

Vue 3.0在性能方面进行了多项改进和优化，主要体现在以下几个方面：

1. 响应式系统优化：Vue 3.0使用了基于Proxy的响应式系统，相比Vue 2.x中的Object.defineProperty，Proxy可以提供更高效的变更侦测和访问拦截，从而提升了响应式系统的性能。
2. 编译优化：Vue 3.0引入了静态模板提升(Static Template Hoisting)技术，将模板编译为更简洁、更高效的渲染函数。这样可以减少不必要的运行时开销，并提高组件的渲染性能。
3. 组件实例初始化优化：Vue 3.0在组件实例初始化过程中进行了一系列优化，减少了不必要的初始化工作和内存开销。例如，通过将组件的配置项合并为单个对象，避免了Vue 2.x中的原型链查找操作。
4. Tree-shaking支持：Vue 3.0的代码结构更加模块化，支持更好的Tree-shaking，可以更精确地将项目中没有使用的代码进行排除，从而减少打包体积。
5. 虚拟DOM优化：Vue 3.0对虚拟DOM进行了一些优化，比如采用了静态标记(static marking)的方式来跳过静态节点的比对和更新，减少了不必要的操作，提高了渲染性能。

这些优化和改进使得Vue 3.0在性能方面有了显著的提升，提高了应用的渲染性能、响应速度和整体的运行效率。

397.了解哪些基础算法【JavaScript】

6 种基础算法思想

• 递归算法
• 分治算法
• 贪心算法
• 回溯算法
• 动态规划
• 枚举算法

参考文档: www.toutiao.com/article/719…

398.有哪些场景的 http header【网络】【出题公司: 阿里巴巴】

常见的 HTTP Header 在请求头（Request Header）和响应头（Response Header）中有许多不同的字段，它们具有各自的作用。下面是一些常见的 HTTP Header 字段及其作用的简要说明：

Request Header：

1. Host：指定目标服务器的域名或 IP 地址。
2. User-Agent：发送请求的用户代理（通常是浏览器标识）。
3. Accept：指定客户端可以接受的内容类型。
4. Content-Type：指定请求体的媒体类型。
5. Authorization：提供身份验证凭据，用于访问受保护的资源。
6. Cookie：包含在上一次响应中设置的服务器的 Cookie。
7. Referer：指定当前请求的来源页面 URL。

Response Header：

1. Content-Type：指定响应体的媒体类型。
2. Content-Length：指定响应体的长度（以字节为单位）。
3. Cache-Control：指定缓存策略，如缓存的有效期、是否可以缓存等。
4. Set-Cookie：在客户端设置 Cookie。
5. Location：指定重定向的目标 URL。
6. Access-Control-Allow-Origin：指定允许跨域请求的来源（CORS）。
7. ETag：指定实体标签，用于缓存验证。

这只是一小部分常见的 HTTP Header 字段，实际上还有很多其他的字段可以在请求头和响应头中使用，每个字段都有特定的作用和用途。这些头部字段能够提供额外的信息、控制请求和响应的行为，以及实现各种功能，如身份验证、缓存控制、安全性等。

Content-Type 作用是啥，有哪些属性

Content-Type 是 HTTP 头部字段之一，用于指示请求或响应中实体（如消息体、文件等）的媒体类型。

Content-Type 的值通常由媒体类型和字符集组成，使用 MIME（Multipurpose Internet Mail Extensions）类型标识。以下是一些常见的 Content-Type 值及其用途：

1. text/plain：纯文本类型，没有指定字符集，默认使用 ASCII 编码。
2. text/html：HTML 文档类型，用于表示网页内容。
3. text/css：CSS 文件类型，用于表示样式表。
4. application/json：JSON 数据类型，用于表示结构化数据。
5. application/xml：XML 数据类型，用于表示可扩展标记语言数据。
6. application/octet-stream：二进制流数据类型，用于表示任意二进制数据。
7. multipart/form-data：用于在 HTML 表单中上传文件时，将表单数据和文件一起提交。
8. image/jpeg、image/png、image/gif：用于表示不同格式的图像文件。

这只是一小部分常见的 Content-Type 值，实际上还有很多其他类型，每种类型都有其特定的用途和格式。根据实际需求，选择适当的 Content-Type 值可以确保请求和响应中的实体以正确的格式进行解析和处理。

399.304 是什么场景的状态码， 好处和坏处分别是什么【热度: 1,425】【网络】【出题公司: 腾讯】

关键词：304 状态码、缓存响应

HTTP 状态码 304 Not Modified 是在一些特定场景下返回的状态码，用于表示客户端缓存的资源仍然有效，无需重新下载。

好处：

• 减少了对服务器的请求，节省了带宽和服务器资源。
• 加快了客户端的加载速度，因为它可以使用缓存的响应而无需等待服务器的响应。

坏处：

• 如果客户端缓存的资源不是最新的，而服务器未能传递最新的版本，那么客户端将继续使用过期的资源。
• 客户端和服务器之间的缓存验证会增加一些额外的开销，包括发送验证请求和进行验证的处理。

适用场景：

• 客户端发送带有条件的请求，通常是 GET 或 HEAD 请求。
• 请求头中包含适当的缓存验证字段，如 If-Modified-Since、If-None-Match 等。
• 服务器通过验证请求中的缓存验证字段，并确定客户端缓存的资源仍然有效。

HTTP 状态码 304 对于网络请求来说可以被视为一种好的状态码，因为它可以提高性能和效率，减少不必要的数据传输和服务器负载。但需要注意在适当的场景下使用，确保客户端缓存的资源仍然有效且符合预期。

401.ajax 是否支持取消请求 【网络】【出题公司: 小米】

xhr.abort() 方法用于中止当前的请求。调用该方法会导致 XHR 对象触发 abort 事件，且触发 readystatechange 事件的处理函数，xhr.readyState 的值将变为 0。

下面是一个示例代码，展示了如何使用标志位实现取消请求的效果：

let isRequestCanceled = false;

function sendGetRequest(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);

  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && !isRequestCanceled) {
      if (xhr.status === 200) {
        // 请求成功
        const response = JSON.parse(xhr.responseText);
        callback(null, response);
      } else {
        // 请求失败
        const error = new Error(`Request failed with status ${xhr.status}`);
        callback(error, null);
      }
    }
  };

  xhr.send();

  // 取消请求
  function cancelRequest() {
    if (xhr.readyState !== XMLHttpRequest.DONE) {
      xhr.abort();
      isRequestCanceled = true;
      callback(new Error('Request canceled'), null);
    }
  }

  // 返回取消请求的函数
  return cancelRequest;
}

// 使用示例
const apiUrl = 'https://api.example.com/data';
const cancelRequest = sendGetRequest(apiUrl, (error, response) => {
  if (error) {
    console.error('Error:', error);
  } else {
    console.log('Response:', response);
  }
});

// 取消请求
cancelRequest();

在上述示例代码中，添加了一个 cancelRequest 函数用于取消请求。该函数会在请求发送后立即返回，并中止请求的发送。同时，将标志位 isRequestCanceled 设为 true，并通过回调函数返回一个错误对象，表示请求被取消。

需要注意的是，虽然通过标志位模拟了请求的取消，但实际上请求已经发送到服务器并得到了响应。只是在客户端这边忽略了响应结果。在真实的网络请求中，服务器仍然会继续处理请求并返回响应，但客户端会忽略该响应。

取消ajax请求的意义

• 已发出的请求可能仍然会到达后端
• 取消后续的回调处理，避免多余的回调处理，以及特殊情况，先发出的后返回，导致回调中的数据错误覆盖
• 取消loading效果，以及该请求的其他交互效果，特别是在单页应用中，A页面跳转到B页面之后，A页面的请求应该取消，否则回调中的一些处理可能影响B页面
• 超时处理，错误处理等都省去了，节约资源

402.使用 ajax 封装一个上传文件的函数【热度: 206】【网络】【出题公司: 美团】

关键词：ajax 上传文件、ajax 上传文件函数、ajax 上传文件封装

下面是一个使用 AJAX 封装的上传文件函数的示例代码：

function uploadFile(file, url, progressCallback, successCallback, errorCallback) {
  const xhr = new XMLHttpRequest();
  const formData = new FormData();

  // 将文件添加到 FormData 对象
  formData.append('file', file);

  xhr.open('POST', url, true);

  // 监听上传进度
  xhr.upload.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
      const progress = Math.round((event.loaded / event.total) * 100);
      // 调用进度回调函数
      progressCallback(progress);
    }
  });

  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        // 上传成功
        // 解析响应数据
        const response = JSON.parse(xhr.responseText);
        // 调用成功回调函数
        successCallback(response);
      } else {
        // 上传失败
        // 创建错误对象
        const error = new Error(`File upload failed with status ${xhr.status}`);
        // 调用错误回调函数
        errorCallback(error);
      }
    }
  };

  // 发送请求
  xhr.send(formData);
}

// 使用示例
const fileInput = document.getElementById('file-input');
const uploadButton = document.getElementById('upload-button');
const progressElement = document.getElementById('progress');
const statusElement = document.getElementById('status');

uploadButton.addEventListener('click', function() {
  const file = fileInput.files[0];
  const url = 'https://api.example.com/upload';

  uploadFile(
    file,
    url,
    function(progress) {
      // 更新进度
      progressElement.textContent = `Upload Progress: ${progress}%`;
    },
    function(response) {
      // 上传成功
      statusElement.textContent = 'Upload Successful';
      console.log('Response:', response);
    },
    function(error) {
      // 上传失败
      statusElement.textContent = 'Upload Failed';
      console.error('Error:', error);
    }
  );
});

在上述示例代码中，定义了一个 uploadFile 函数用于上传文件。该函数接收文件对象、上传 URL、进度回调函数、成功回调函数和错误回调函数作为参数。

函数内部通过创建 XMLHttpRequest 对象，将文件添加到 FormData 对象，并使用 POST 方法发送请求到指定的 URL。同时，通过监听 upload 事件来获取上传进度，并调用进度回调函数进行更新。在请求的状态改变时，根据响应状态码判断上传成功与否，并调用相应的回调函数。

使用示例中，通过监听按钮点击事件，获取选择的文件对象，并调用 uploadFile 函数进行文件上传。在回调函数中更新进度和状态信息，并处理成功和失败的情况。

403.fetch 与 ajax 的区别是什么【网络】

以下是 Fetch API 与传统的 Ajax（XMLHttpRequest）在几个方面的对比：

维度	Fetch API	Ajax (XMLHttpRequest)
API	提供了更现代化的 API，使用 fetch() 方法进行请求	使用 XMLHttpRequest 对象进行请求
语法	基于 Promise，使用链式调用方式进行请求和处理响应	使用回调函数方式处理请求和响应
跨域支持	默认情况下，不发送跨域请求，可以使用 CORS 进行跨域请求	可以发送跨域请求，但受到同源策略的限制
请求类型	支持多种请求类型，如 GET、POST、PUT、DELETE 等	支持多种请求类型，如 GET、POST、PUT、DELETE 等
请求头	使用 Headers 对象设置请求头	使用 setRequestHeader() 方法设置请求头
请求体	可以直接使用 FormData、Blob、URLSearchParams 等作为请求体	可以使用字符串或 FormData 对象作为请求体
取消请求	支持使用 AbortController 和 AbortSignal 取消请求	需要手动处理取消请求，如终止 XMLHttpRequest 对象
进度事件	提供了更方便的进度事件处理方式，如 upload 和 download 事件	提供了 progress 事件用于跟踪请求和下载进度
错误处理	在请求返回时，只在网络错误或请求被中止时才会抛出异常	可以根据响应状态码或其他条件来处理错误
JSON 处理	提供了 json() 方法用于解析 JSON 数据	需要手动解析返回的 JSON 数据
文件上传/下载	支持直接上传和下载文件，支持 Blob 对象	支持通过 FormData 和 responseType 实现文件上传和下载
浏览器兼容性	部分功能在旧版本浏览器中不支持，需要使用 polyfill 进行兼容性处理	在大多数现代浏览器中都支持

需要注意的是，Fetch API 是基于 Promise 的，而 Ajax 是基于回调函数的。Fetch API 提供了更现代化、更简洁的语法，并支持更多的功能，如跨域请求、取消请求、进度事件等。然而，由于 Fetch API 是较新的标准，不同浏览器的兼容性可能会有所差异，需要使用 polyfill 或考虑兼容性处理。

408.token过期后，页面如何实现无感刷新【热度: 485】【网络】【出题公司: 网易】

关键词：token过期刷新、token刷新

当 token 过期后，实现无感刷新页面的一种常见方式是使用刷新 token 的机制。下面是一个基本的实现思路：

1. 在前端应用中，使用某种方式（例如 Cookie、Local Storage）存储 token。
2. 在每次发起请求时，通过拦截器或者请求中间件检查 token 是否过期。
3. 如果 token 过期，前端会收到一个特定的响应（例如 HTTP 状态码 401 Unauthorized）。
4. 前端通过监听该特定的响应，触发刷新 token 的操作。
5. 刷新 token 的操作可以是发送一个特定的请求到后端，后端验证并颁发新的 token。
6. 在 token 刷新成功后，前端更新存储的 token，并重新发起之前的请求，确保请求的无感刷新。

需要注意的是，具体的实现可能会因框架和后端 API 的不同而有所差异。上述步骤提供了一个基本的思路，你可以根据实际需求和使用的技术栈进行调整和扩展。

409.进程和线程的区别是什么？【网络】【出题公司: Shopee】

进程（Process）和线程（Thread）是计算机操作系统中的两个核心概念，它们在程序执行和资源管理方面有着不同的特点和作用。下面是它们之间的区别：

1. 定义：进程是程序的一次执行过程，是资源分配的基本单位；线程是进程的一部分，是程序执行的最小单位。
2. 资源拥有：每个进程都拥有独立的内存空间和系统资源，包括文件、设备、网络连接等；而线程是在进程内部共享进程的资源。
3. 调度和执行：操作系统以进程为单位进行调度，给每个进程分配CPU时间片来执行；而线程是进程内部的执行单元，由线程调度器调度执行。
4. 并发性：由于进程拥有独立的内存空间和资源，不同进程之间可以并发执行，相互之间不会影响；而线程是在同一个进程内部执行，多个线程共享进程的资源，因此线程之间需要通过同步机制来保证数据的一致性和安全性。
5. 创建和销毁：创建和销毁进程需要操作系统的参与，而线程的创建和销毁相对较轻量，可以由程序自身来控制。
6. 开销：由于进程拥有独立的资源和内存空间，进程之间切换的开销较大；而线程之间的切换开销较小，因为线程共享进程的资源和内存空间。

总的来说，进程和线程是操作系统中用于实现并发执行的两种基本单位，进程是资源分配的基本单位，而线程是调度和执行的基本单位。它们在资源拥有、调度方式、并发性、创建销毁方式、开销等方面有着明显的区别。在实际应用中，可以根据需求和具体场景选择使用进程或线程来实现并发和多任务处理。

下面是进程和线程在几个方面的对比表格：

特性	进程	线程
定义	程序的一次执行过程，是资源分配的基本单位	进程的一部分，是程序执行的最小单位
资源拥有	拥有独立的内存空间和系统资源	在进程内部共享进程的资源
调度和执行	以进程为单位进行调度，给每个进程分配CPU时间片	在进程内部调度执行
并发性	不同进程之间可以并发执行，相互之间不会影响	线程在同一个进程内部执行，共享进程的资源
创建和销毁	需要操作系统的参与	可以由程序自身来控制
开销	进程切换开销较大	线程切换开销较小

411.什么是文档的预解析【热度: 1,133】【网络】【出题公司: 腾讯】

关键词：文档预解析

文档的预解析（Document Preloading）是浏览器在解析 HTML 文档时的一个优化技术，用于提前获取页面所需的外部资源，如样式表、脚本、字体等。通过在解析过程中预先获取这些资源，可以加快页面加载速度和渲染时间。

浏览器在解析 HTML 文档时，会遇到外部资源的引用，比如 <link> 标签引入的样式表和 <script> 标签引入的脚本。在进行实际网络请求获取这些资源之前，浏览器可以通过预解析的方式提前发起请求并获取资源内容。

文档的预解析过程会在 HTML 解析器解析到特定标签时触发，浏览器会检查这些标签是否存在可预解析的资源，然后以异步方式发起请求并下载资源。预解析的资源在下载完成后会被浏览器缓存起来，以便在后续的渲染过程中快速加载和使用。

预解析的好处是减少页面加载时间，因为浏览器可以在主 HTML 文档下载和解析过程中并行获取其他资源，而不需要等待主文档解析完毕才开始下载这些资源。这样可以提高页面的渲染速度和用户体验。

文档的预解析是由浏览器自动完成的优化过程，无需开发人员显式地进行操作。浏览器会根据特定的规则和算法，在解析 HTML 文档的过程中自动触发预解析行为。

要让浏览器正确进行文档的预解析，可以遵循以下一些最佳实践：

1. 合理设置资源的引入方式：将样式表放在 <head> 标签内，并尽量将脚本放在 <body> 标签底部，这样可以使浏览器更早地开始解析和预解析文档的其他部分。
2. 使用合适的资源引入标签：使用 <link> 标签来引入样式表，使用 <script> 标签来引入脚本文件，这样可以让浏览器更容易识别和处理这些资源的预解析。
3. 合理设置资源的属性和关联：为 <link> 标签设置 rel 属性，用于指定资源的关联关系，如 stylesheet 表示关联的是样式表；为 <script> 标签设置 async 或 defer 属性，用于控制脚本的执行时机。
4. 减少不必要的资源引入：避免引入无用的外部资源，减少需要预解析的资源数量，可以提高预解析的效果。
5. 合理配置服务器响应头：使用适当的缓存策略和 HTTP 响应头，可以帮助浏览器更好地处理资源的预解析和缓存。

需要注意的是，浏览器在进行文档预解析时会根据具体的算法和策略进行优化，不同浏览器可能会有略微不同的行为。此外，预解析并不一定在所有情况下都能带来明显的性能提升，具体效果会受到网络环境、服务器响应时间和页面结构等因素的影响。因此，在实际开发中，除了依赖浏览器的自动预解析外，还可以采用其他优化手段，如合并和压缩资源、使用缓存等，以提升页面加载和渲染的性能。

高级开发者相关问题【共计 9 道题】

394.[webpack] 提高 webpack 的构建速度的办法有哪些【热度: 1,208】【web框架】【出题公司: 网易】

关键词：webpack 构建、webpack 构建优化、webpack 构建速度

以下是一些可以提高Webpack构建速度的办法：

1. 使用更快的构建工具：升级Webpack到最新版本，因为每个新版本通常都会带来性能改进和优化。
2. 减少文件的数量：通过代码拆分和按需加载等技术，将代码拆分成更小的模块，减少每次构建需要处理的文件数量。
3. 使用缓存：启用Webpack的缓存功能，可以在多次构建过程中复用已经构建好的模块，从而减少重新构建的时间。
4. 使用多线程/多进程构建：通过使用工具如HappyPack或thread-loader等，可以将Webpack的构建过程并行化，利用多线程或多进程来加速构建速度。
5. 优化Loader配置：确保Loader的配置尽可能精确，只对需要处理的文件进行操作，并且使用高效的Loader插件。避免不必要的文件处理和转换，以提高构建速度。
6. 使用DLL和缓存组：使用Webpack的DLLPlugin和CacheGroups等功能，可以将一些稳定不变的依赖提前编译和缓存，减少每次构建的时间。
7. 压缩输出文件：使用Webpack的压缩插件（如UglifyJsPlugin）对输出文件进行压缩和混淆，减小文件大小，加快加载速度。
8. 配置resolve.extensions：通过配置Webpack的resolve.extensions，明确指定需要处理的文件类型，避免Webpack进行多余的文件扫描和匹配。
9. 开启持久化缓存：使用Webpack的持久化缓存插件（如HardSourceWebpackPlugin），将构建过程中的中间结果缓存到硬盘中，提高后续构建的速度。
10. 使用Tree Shaking：利用Webpack的Tree Shaking特性，移除未使用的代码，减小输出文件的体积，加快加载速度。

这些是提高Webpack构建速度的一些常见方法，可以根据具体项目的需求和情况选择适合的优化策略。同时，不同的项目和环境可能会有不同的性能瓶颈，因此需要根据实际情况进行具体的优化和调整。

396.[vue] vue3 相比较于 vue2 在编译阶段有哪些改进【web框架】

Vue 3 在编译阶段相对于 Vue 2 进行了一些重要的改进，主要包括以下几个方面：

1. 静态模板提升（Static Template Hoisting）：Vue 3 引入了静态模板提升技术，通过对模板进行分析和优化，将模板编译为更简洁、更高效的渲染函数。这种优化可以减少不必要的运行时开销，并提高组件的渲染性能。
2. Fragments 片段支持：Vue 3 支持使用 Fragments 片段来包裹多个根级元素，而不需要额外的父元素。这样可以避免在编译阶段为每个组件生成额外的包裹元素，减少了虚拟 DOM 树的层级，提高了渲染性能。
3. 静态属性提升（Static Props Hoisting）：Vue 3 在编译阶段对静态属性进行了优化，将静态属性从渲染函数中提取出来，只在组件初始化时计算一次，并在后续的渲染中重用。这样可以减少不必要的属性计算和传递，提高了组件的渲染性能。
4. 事件处理函数的内联化：Vue 3 在编译阶段对事件处理函数进行了内联化，将事件处理函数直接写入模板中，而不是在运行时动态生成。这样可以减少运行时的事件绑定和查找开销，提高了事件处理的性能。
5. 静态节点提升（Static Node Hoisting）：Vue 3 通过静态节点提升技术，将静态的节点在编译阶段进行处理，避免了在每次渲染时对静态节点的比对和更新操作，提高了渲染性能。
6. 缓存事件处理器（Cached Event Handlers）：Vue 3 在编译阶段对事件处理器进行了缓存，避免了重复创建事件处理函数的开销。对于相同的事件处理器，只会创建一次，并在组件的生命周期中重复使用，减少了内存占用和运行时开销。
7. 更细粒度的组件分割（Fine-Grained Component Splitting）：Vue 3 支持更细粒度的组件分割，可以将组件的模板、脚本和样式进行独立的编译和加载，以实现更好的代码拆分和按需加载，提高了应用的加载速度和性能。

这些改进使得 Vue 3 在编译阶段能够生成更优化的代码，减少了不必要的运行时开销，并提高了组件的渲染性能和整体的运行效率。

400.介绍一下 XMLHTTPRequest 对象【热度: 453】【网络】【出题公司: 百度】

关键词：XMLHTTPRequest 对象、XMLHTTPRequest 特点、XMLHTTPRequest 属性、封装发送 GET 请求

介绍

XMLHttpRequest 是一个在浏览器中用于发送 HTTP 请求的 JavaScript 对象。它提供了一种在客户端与服务器之间进行数据交互的方式，可以异步地发送请求并获取服务器的响应。

XMLHttpRequest 对象的特点和功能包括：

1. 异步请求：XMLHttpRequest 支持异步请求，可以在后台发送请求并在请求完成后执行回调函数，而不会阻塞浏览器的主线程。
2. 支持多种 HTTP 请求方法：XMLHttpRequest 可以发送多种类型的 HTTP 请求，包括 GET、POST、PUT、DELETE 等。
3. 发送和接收数据：XMLHttpRequest 可以发送数据到服务器并接收服务器的响应数据，支持发送请求时携带的数据和接收到的响应数据的处理。
4. 监听请求状态：XMLHttpRequest 提供了一些事件和方法来监听请求的不同状态，如请求开始、请求完成、请求成功等。
5. 设置请求头：XMLHttpRequest 允许设置请求的头部信息，如 Content-Type、Authorization 等。
6. 处理跨域请求：XMLHttpRequest 支持处理跨域请求，可以通过设置 CORS（跨域资源共享）相关的头部信息来实现跨域请求。
7. 支持上传和下载：XMLHttpRequest 可以用于上传文件到服务器或下载服务器上的文件。

使用 XMLHttpRequest 对象可以实现与服务器的数据交互，发送请求并处理响应数据。通过设置回调函数来处理异步请求的结果，可以根据请求的状态码和响应数据进行相应的处理和展示。

示范

下面是一个简单的示例代码，展示如何基于 XMLHttpRequest 封装一个发送 GET 请求的函数：

function sendGetRequest(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);

  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        // 请求成功
        const response = JSON.parse(xhr.responseText);
        callback(null, response);
      } else {
        // 请求失败
        const error = new Error(`Request failed with status ${xhr.status}`);
        callback(error, null);
      }
    }
  };

  xhr.send();
}

// 使用示例
const apiUrl = 'https://api.example.com/data';
sendGetRequest(apiUrl, (error, response) => {
  if (error) {
    console.error('Error:', error);
  } else {
    console.log('Response:', response);
  }
});

上述代码定义了一个 sendGetRequest 函数，接受一个 URL 和一个回调函数作为参数。在函数内部，创建了一个 XMLHttpRequest 对象，使用 open 方法设置请求的类型（GET）、URL 和是否异步。然后，通过监听 readystatechange 事件来处理请求的状态变化。

当请求的状态为 XMLHttpRequest.DONE（值为 4）时，判断响应的状态码。如果状态码为 200，表示请求成功，将响应数据解析为 JSON 格式并通过回调函数返回。如果状态码不是 200，表示请求失败，将错误信息封装为 Error 对象并通过回调函数返回。

使用示例中，调用了 sendGetRequest 函数并传入一个 API 的 URL 和一个回调函数。在回调函数中，根据是否存在错误来处理请求结果。如果有错误，输出错误信息；如果没有错误，输出响应数据。

404.OSI的七层模型是什么【网络】

OSI的七层模型是什么

OSI（Open Systems Interconnection）是国际标准化组织（ISO）定义的一个用于网络协议设计的参考模型。它将网络通信的过程分为七个不同的层级，每个层级负责不同的功能和任务，以实现网络通信的可靠性和互操作性。下面是 OSI 模型的七个层级：

1. 物理层（Physical Layer）：处理物理传输介质上的原始比特流，负责传输电子信号、光信号或无线信号等。
2. 数据链路层（Data Link Layer）：负责将物理层提供的比特流划分为数据帧，并处理数据帧之间的传输错误和流控制。
3. 网络层（Network Layer）：负责对数据进行分组、寻址和路由选择，以便在不同的网络之间进行数据传输。
4. 传输层（Transport Layer）：提供端到端的可靠数据传输服务，包括分段、流量控制和错误恢复等。
5. 会话层（Session Layer）：管理不同应用程序之间的通信会话，负责建立、维护和终止会话。
6. 表示层（Presentation Layer）：负责数据的格式化、加密和压缩等操作，以确保应用程序之间的数据交换正确解释和理解。
7. 应用层（Application Layer）：提供网络服务和应用程序之间的接口，包括文件传输、电子邮件、远程登录和网页浏览等。

每个层级在 OSI 模型中具有不同的功能和责任，并且通过定义标准化的协议进行通信。通过将网络通信过程划分为不同的层级，OSI 模型帮助网络工程师和开发人员更好地理解和设计网络协议，实现网络的可扩展性和互操作性。

有哪些对应的协议

以下是 OSI 模型的七个层级及其对应的一些常见协议的示例：

层级	协议示例
应用层（Application Layer）	HTTP，FTP，SMTP，POP3，DNS，Telnet，SSH
表示层（Presentation Layer）	JPEG，GIF，PNG，ASCII，UTF-8，MPEG
会话层（Session Layer）	NetBIOS，TLS，RPC，SSH
传输层（Transport Layer）	TCP，UDP，SCTP
网络层（Network Layer）	IP，ICMP，ARP，OSPF，BGP
数据链路层（Data Link Layer）	Ethernet，PPP，MAC，Wi-Fi，HDLC，SLIP
物理层（Physical Layer）	USB，Ethernet电缆，光纤，RJ45接口，无线电频谱

请注意，这只是每个层级的一些示例协议，实际使用中可能有更多的协议。此表旨在提供一些常见的协议示例，以便更好地理解每个层级所涉及的通信协议。

405.TLS/SSL的工作原理【热度: 499】【网络】

关键词：SSL的工作原理、TLS的工作原理、密钥交换阶段

TLS（Transport Layer Security）和SSL（Secure Sockets Layer）是用于在网络上提供安全通信的协议。TLS是SSL的继任者，但两者通常被混合使用。

TLS/SSL的工作原理如下：

1. 握手阶段（Handshake）：

   • 客户端发送一个用于协商加密算法和通信参数的"客户端Hello"消息给服务器。
   • 服务器回应一个"服务器Hello"消息，其中包含服务器选择的加密算法和数字证书（包含公钥）。
   • 客户端验证服务器的数字证书的合法性，包括验证证书的颁发机构和有效期。
   • 客户端生成一个随机的对称加密密钥，使用服务器的公钥进行加密，发送给服务器。
   • 服务器使用自己的私钥解密客户端发送的加密密钥。
   • 客户端和服务器协商确定加密算法和密钥长度，生成用于后续通信的对称加密密钥。

2. 密钥交换阶段（Key Exchange）：

   • 客户端和服务器使用协商好的对称加密密钥进行通信。
   • 客户端和服务器之间的数据使用对称加密算法进行加密和解密。

3. 数据传输阶段：

   • 客户端和服务器使用协商好的对称加密密钥进行数据传输，确保数据的保密性和完整性。

TLS/SSL的工作原理基于非对称加密和对称加密两种加密算法的结合。非对称加密用于安全地协商对称加密密钥，而对称加密用于实际的数据传输。通过使用数字证书对服务器进行身份验证，并对通信进行加密和认证，TLS/SSL确保了通信的安全性和可靠性。

需要注意的是，TLS/SSL的具体实现可能因应用程序、配置和版本而有所不同，但基本的工作原理和流程是相似的。

406.数字证书了解多少【热度: 1,834】【网络】

关键词：数字证书 公钥、数字签名 概念、数字签名详解

概念

数字证书是一种用于验证和证明网络实体身份的电子文件。它由证书颁发机构（Certificate Authority，CA）或类似的实体签发，并包含了一系列信息，包括公钥、证书持有者的身份信息以及数字签名等。

数字证书通常用于建立安全通信，特别是在使用加密协议（如TLS/SSL）进行数据传输时。以下是数字证书的几个重要组成部分：

1. 公钥：数字证书中包含证书持有者的公钥，用于加密和解密数据。公钥可以与证书持有者进行身份验证，并确保数据的机密性。
2. 证书持有者信息：数字证书中包含证书持有者的身份信息，例如组织名称、组织单位、国家/地区等。这些信息有助于验证证书持有者的身份。
3. 数字签名：数字证书中包含一个数字签名，由证书颁发机构使用其私钥对证书内容进行加密生成。接收方可以使用证书颁发机构的公钥来验证签名的有效性，确保证书的完整性和真实性。

数字证书的验证过程一般涉及以下步骤：

1. 客户端接收到服务器发送的数字证书。
2. 客户端使用证书颁发机构的公钥来解密数字签名，验证证书的完整性。
3. 客户端验证证书颁发机构的信任性，确认其是否为可信任的颁发机构。
4. 客户端验证证书持有者的身份信息，确保与期望的服务器身份匹配。
5. 如果验证成功，客户端可以信任证书中的公钥，用于安全通信的建立。

通过使用数字证书，可以确保通信中的数据传输安全，并防止中间人攻击等安全威胁。

数字证书的作用

数字证书的主要作用是用于身份验证和安全通信。以下是数字证书的几个重要作用：

1. 身份验证：数字证书可以用于验证网络实体的身份。证书中包含了证书持有者的身份信息和公钥，通过验证证书的有效性，可以确认证书持有者的身份，并确保与其进行安全通信。
2. 安全通信：数字证书在安全通信中起到关键作用。通过使用证书中的公钥，可以进行加密和解密数据，确保数据的机密性。同时，通过数字签名验证证书的完整性，可以防止数据在传输过程中被篡改。
3. 防止中间人攻击：数字证书可以防止中间人攻击。由于证书是由可信任的证书颁发机构签发的，并且包含了数字签名，因此可以确保通信双方之间的身份和通信内容的安全性，防止中间人对通信进行窃听或篡改。
4. 建立信任链：数字证书形成了一个信任链。证书颁发机构（CA）签发的证书被广泛信任，而CA本身的证书也由更高级的CA签发，形成了一个信任链。通过验证证书的有效性，并验证颁发机构的信任性，可以建立起对通信方的信任。

总之，数字证书在互联网通信中起到了重要的作用，确保了身份验证和安全通信的可靠性和安全性。它们被广泛应用于各种场景，如网站的HTTPS通信、电子邮件的加密和签名等。

数字签名

数字签名是一种用于验证数据完整性和身份认证的技术手段。它基于公钥加密算法和哈希函数，通过对数据进行加密和摘要计算，生成一个与数据相关的数字签名。该数字签名可以用于验证数据在传输过程中是否被篡改，并且可以确认数据的发送者身份。

下面是数字签名的详细解释：

1. 数据摘要：首先，使用哈希函数（如SHA-256）对待签名的数据进行摘要计算。哈希函数将数据输入转换为固定长度的哈希值，该哈希值具有唯一性，即不同的输入数据会产生不同的哈希值。
2. 私钥加密：然后，使用数据发送者的私钥对数据摘要进行加密。私钥是与发送者身份关联的一对密钥中的私有部分，只有发送者拥有。通过使用私钥加密数据摘要，产生了一个数字签名。
3. 数字签名验证：在接收数据的一方，可以使用发送者的公钥来验证数字签名的有效性。公钥是与发送者身份关联的一对密钥中的公共部分，任何人都可以访问。接收方使用公钥解密数字签名，得到解密后的数据摘要。
4. 数据完整性验证：接收方再次使用哈希函数对接收到的原始数据进行摘要计算，得到一个新的摘要值。然后，将接收到的解密后的数据摘要与新计算的摘要值进行比较。如果两个摘要值相同，说明数据在传输过程中没有被篡改，数据完整性得到验证。
5. 发送者身份认证：通过验证数字签名，接收方可以确认数据的发送者身份。由于数字签名是由发送者的私钥加密生成的，只有发送者拥有对应的私钥，所以只有发送者才能正确生成有效的数字签名。

通过数字签名的使用，可以确保数据的完整性和身份认证。即使在数据传输过程中被篡改，接收方可以通过验证数字签名来检测到篡改，并且可以确认数据的发送者身份。这为数据的安全传输和身份验证提供了重要的保障。

407.TCP粘包了解多少【热度: 927】【网络】【出题公司: 京东】

关键词：粘包、粘包解决办法

TCP粘包（TCP packet sticking）是指在数据传输过程中，发送方连续发送的若干小数据包被接收方组合成较大的数据块或者多个小数据包粘合在一起接收的现象。

TCP是面向流的传输协议，数据在传输过程中会被拆分成TCP数据段，并在接收方重新组装。由于TCP的流式传输特性，发送方连续发送的多个小数据包可能会在接收方一次性接收，从而导致粘包现象。

TCP粘包的原因主要有以下几点：

1. 发送方连续发送的数据包很小，可能不足以填满一个TCP数据段的大小，导致多个数据包合并在一起发送。
2. 发送方发送数据的速率和接收方处理数据的速率不一致，可能会导致多个数据包在传输过程中一起到达接收方。

TCP粘包可能会导致数据解析错误或者数据处理不准确，影响通信的正确性和性能。为了解决TCP粘包问题，可以采用以下方法：

1. 使用固定长度的数据包：发送方在发送数据前，在数据包中添加固定长度的头部，接收方通过读取固定长度的数据来拆分数据包。
2. 使用特殊字符或者标记符号进行分隔：发送方在数据包之间添加特定的字符或者标记符号作为分隔符，接收方通过识别分隔符来拆分数据包。
3. 使用消息长度字段：发送方在数据包中添加表示消息长度的字段，接收方首先读取消息长度字段，然后根据长度来读取相应长度的数据。

通过采用上述方法，可以有效地解决TCP粘包问题，确保数据在传输过程中的正确性和完整性。

410.在浏览器内多个标签页之间实现通信有哪些方式【热度: 897】【网络】【出题公司: 阿里巴巴】

关键词：跨页面通信、Broadcast Channel API 通信、SharedWorker

基本通信方式

在浏览器内多个标签页之间实现通信可以通过以下几种方式：

1. 使用 Broadcast Channel API：Broadcast Channel API 是 HTML5 提供的一种跨页面通信的机制。通过该 API，可以在不同的标签页之间发送消息，实现实时的双向通信。
2. 使用 LocalStorage 或 SessionStorage：LocalStorage 和 SessionStorage 是浏览器提供的本地存储机制。可以通过在一个标签页中修改 LocalStorage 或 SessionStorage 中的数据，然后在其他标签页中监听该数据的变化，实现跨标签页的通信。
3. 使用 SharedWorker：SharedWorker 是一种特殊的 Web Worker，可以被多个浏览器标签页所共享。通过 SharedWorker，不同标签页可以通过消息传递进行通信。
4. 使用 Cookies：通过设置同一个域名下的 Cookie，不同的标签页可以共享这些 Cookie 数据。可以在一个标签页中设置 Cookie，然后在其他标签页中读取该 Cookie 实现通信。
5. 使用 Window.postMessage：Window.postMessage 方法可以在不同的浏览器窗口之间进行跨域通信。可以通过在一个窗口中使用 postMessage 方法向其他窗口发送消息，接收窗口通过监听 message 事件来接收并处理消息。

Broadcast Channel API

Broadcast Channel API 是 HTML5 提供的一种跨页面通信的机制，它可以在同一个域名下的多个浏览器标签页之间进行实时的双向通信。

通过 Broadcast Channel API，你可以创建一个通道（channel），然后不同的标签页可以通过这个通道发送和接收消息。每个标签页都可以监听通道中的消息，并对接收到的消息做出相应的处理。

使用 Broadcast Channel API 实现多页签之间的通信的步骤如下：

1. 创建一个 BroadcastChannel 对象，并指定一个唯一的通道名称：

const channel = new BroadcastChannel('channelName');

2. 在一个标签页中发送消息：

channel.postMessage('message');

3. 在其他标签页中监听消息并做出响应：

channel.addEventListener('message', event => {
  const message = event.data;
  // 处理接收到的消息
});

通过 Broadcast Channel API，不同的标签页可以实时地收发消息，从而实现多页签之间的通信。这对于需要在多个标签页之间共享状态、同步数据或实现协作等场景非常有用。请注意，Broadcast Channel API 只在同一域名下的标签页之间有效，不支持跨域通信。

SharedWorker 实现多页签之间通信

SharedWorker 是 HTML5 提供的一种多页签之间共享的 Web Worker。通过 SharedWorker，多个浏览器标签页可以共享一个后台线程，实现跨页面的通信和数据共享。

下面是一个使用 SharedWorker 实现多页签之间通信的示例：

在一个 JavaScript 文件（worker.js）中创建 SharedWorker：

// worker.js

// 在共享 Worker 中监听消息
self.onconnect = function(event) {
  var port = event.ports[0];

  // 接收消息
  port.onmessage = function(event) {
    var message = event.data;

    // 处理消息
    // ...

    // 发送消息
    port.postMessage('Response from SharedWorker');
  };

  // 断开连接时的处理
  port.onclose = function() {
    // ...
  };
};

在多个页面中分别引入 SharedWorker，并进行通信：

// 页面1
var sharedWorker = new SharedWorker('worker.js');

// 获取共享 Worker 的端口
var port = sharedWorker.port;

// 发送消息
port.postMessage('Message from Page 1');

// 接收消息
port.onmessage = function(event) {
  var message = event.data;

  // 处理接收到的消息
  // ...
};

// 页面2
var sharedWorker = new SharedWorker('worker.js');

// 获取共享 Worker 的端口
var port = sharedWorker.port;

// 发送消息
port.postMessage('Message from Page 2');

// 接收消息
port.onmessage = function(event) {
  var message = event.data;

  // 处理接收到的消息
  // ...
};

以上示例中，worker.js 创建了一个 SharedWorker，它会监听来自多个页面的连接请求，并为每个连接创建一个端口（port）。每个页面通过创建 SharedWorker 实例，并通过获取端口对象进行消息的发送和接收。

通过 SharedWorker，页面1和页面2可以实现跨页签的通信。它们可以向共享 Worker 发送消息，并监听共享 Worker 返回的消息，从而实现跨页面的数据交互和共享。

需要注意的是，SharedWorker 需要在支持 SharedWorker 的浏览器中运行，而且需要在服务器环境下运行，即通过 HTTP 或 HTTPS 协议访问页面才能正常工作。

Window.postMessage 使用示例

Window.postMessage() 是 HTML5 提供的一种在不同窗口之间进行跨域通信的方法。它可以安全地向其他窗口发送消息，并在接收方窗口触发消息事件。

下面是一个使用 postMessage() 进行跨窗口通信的示例：

在发送消息的窗口中：

// 发送消息到目标窗口
window.postMessage('Hello, World!', 'https://example.com');

在接收消息的窗口中：

// 监听消息事件
window.addEventListener('message', function(event) {
  // 确保消息来自指定域名
  if (event.origin === 'https://example.com') {
    var message = event.data;

    // 处理接收到的消息
    console.log('Received message:', message);
  }
});

在发送消息的窗口中，使用 window.postMessage() 发送消息，第一个参数是要发送的消息内容，第二个参数是目标窗口的源（origin），可以是 URL、域名或通配符 '*'。

在接收消息的窗口中，通过监听 message 事件，可以捕获来自其他窗口的消息。在事件处理程序中，通过 event.origin 可以判断消息来自哪个域名。可以根据需要进行安全性检查，确保只接收来自指定域名的消息。

需要注意的是，postMessage() 通常用于跨窗口通信，可以在不同窗口或不同域名之间进行通信。在使用时需要确保目标窗口的源是可信任的，以防止安全漏洞。同时，接收消息的窗口需要显式地监听消息事件，并进行相应的处理。

413.什么是正向代理，反向代理【热度: 1,294】【网络】【出题公司: 小米】

关键词：正向代理反向代理概念

概念

正向代理（Forward Proxy）和反向代理（Reverse Proxy）都是常见的代理服务器架构，用于在客户端与目标服务器之间进行中转和处理请求的工作。它们的区别在于代理的位置和作用方式不同。

1. 正向代理：

   • 代理位于客户端与目标服务器之间，代理服务器充当客户端的代表。
   • 客户端发起请求时，请求首先发送给正向代理服务器，然后由代理服务器转发请求给目标服务器，目标服务器将响应返回给代理服务器，最后代理服务器再将响应返回给客户端。
   • 客户端并不直接与目标服务器通信，而是通过正向代理服务器进行中转。
   • 正向代理常用于客户端访问互联网，提供一些特定的服务，如匿名访问、访问控制、缓存、安全性等。

2. 反向代理：

   • 代理位于目标服务器与客户端之间，代理服务器充当目标服务器的代表。
   • 客户端发起请求时，请求直接发送给反向代理服务器，然后由代理服务器根据配置和负载均衡策略，将请求转发给后端的目标服务器。
   • 客户端并不知道实际提供服务的是哪个目标服务器，而是与反向代理服务器进行通信。
   • 反向代理常用于负载均衡、高可用性、安全性等方面，可以隐藏后端服务器的真实信息，并提供更好的性能和可扩展性。

区别

下面是正向代理和反向代理的区别以及它们的特点，用表格形式表示：

特点	正向代理	反向代理
位置	位于客户端与目标服务器之间	位于目标服务器与客户端之间
代理角色	代理服务器充当客户端的代表	代理服务器充当目标服务器的代表
通信流向	客户端 -> 代理服务器 -> 目标服务器	客户端 -> 代理服务器 -> 目标服务器
目的	隐藏客户端的真实信息，提供访问控制、缓存、安全性等	隐藏目标服务器的真实信息，提供负载均衡、高可用性、安全性等
请求方式	客户端发起请求给代理服务器，代理服务器转发请求给目标服务器	客户端发起请求给代理服务器，代理服务器根据配置和负载均衡策略转发请求给目标服务器
客户端感知	客户端知道自己使用了代理服务器	客户端不知道实际提供服务的是哪个目标服务器
目标服务器感知	目标服务器感知到代理服务器的存在	目标服务器不感知客户端使用了反向代理
应用场景	客户端访问互联网，提供匿名访问、访问控制、缓存等特定服务	负载均衡、高可用性、安全性、隐藏真实服务器信息等
示例	企业内网用户通过代理服务器访问互联网	多个服务器集群通过反向代理提供服务

这个表格总结了正向代理和反向代理的一些基本特点和区别，以及它们在网络通信中的应用场景。需要根据具体的需求和场景来选择适合的代理方式。

总结： 正向代理位于客户端与目标服务器之间，代理服务器充当客户端的代表；反向代理位于目标服务器与客户端之间，代理服务器充当目标服务器的代表。正向代理隐藏了客户端的真实信息，反向代理隐藏了目标服务器的真实信息。它们的作用和使用场景不同，但都能提供一定程度的代理和中转功能，增加了网络通信的灵活性和安全性。