【HTTP、Web常用协议等等】前端八股文面试题

HTTP、Web常用协议等等

更新日志

• 2024年9月5日 —— 什么情况下会导致浏览器内存泄漏？
  

  文章目录

  • HTTP、Web常用协议等等
  • • 更新日志
    • • 1. 网络请求的状态码有哪些？
      • • • 1）1xx 信息性状态码
          • 2）2xx 成功状态码
          • 3）3xx 重定向状态码
          • 4）4xx 客户端错误状态码
          • 5）5xx 服务器错误状态码
      • 2.在 Web 开发中常用的协议和标准有哪些？
      • • • 1）协议
          • 2）标准
      • 3.如何处理跨域问题？
      • • • 1）CORS（跨源资源共享）
          • 2）JSONP（JSON with Padding）
          • 3）代理
          • 4） iframe + postMessage
          • 5） WebSocket
      • 4.get请求传参长度的误区、get和post请求在缓存方面的区别
      • • • 1）误区：
          • 2）实际上 HTTP协议 从未规定 GET/POST 的请求长度限制是多少。
          • 3）在缓存方面的区别：
      • 5.简单说说，你对 token 的理解
      • • • 1）概念
          • 2）作用
          • 3）特点
      • 6.简单说说，你对 axios 的理解
      • • • 1）概述
          • 2）主要特点
          • 3）应用场景
      • 7. ajax原理
      • • • 1）基本概念
          • 2）工作流程
          • 3）优点
      • 8.什么情况下会导致浏览器内存泄漏？
      • • • 1）意外的全局变量
          • 2）事件监听器未移除
          • 3）闭包使用不当
          • 4）缓存未清理
          • 5）大型数据结构未释放

1. 网络请求的状态码有哪些？

1）1xx 信息性状态码

• 100 Continue：表示目前为止一切正常，客户端可以继续发送请求或者忽略这个响应。
• 101 Switching Protocols：服务器根据客户端的请求切换协议。

2）2xx 成功状态码

• 200 OK：最常见的成功状态码，表示请求已成功，响应主体包含所请求的资源。
• 201 Created：表示请求成功并且服务器创建了新的资源。
• 202 Accepted：表示服务器已接受请求，但尚未处理。
• 204 No Content：表示请求成功，但响应没有实体内容。

3）3xx 重定向状态码

• 301 Moved Permanently：表示请求的资源已被永久移动到新位置，浏览器会自动重定向到新位置。
• 302 Found：表示请求的资源临时被移动到其他位置，浏览器会自动重定向到新位置。但与 301 不同的是，这个重定向可能是临时的。
• 303 See Other：表示请求的资源存在另一个 URI，应使用 GET 方法获取该资源。
• 304 Not Modified：表示资源未被修改，客户端可以使用缓存的版本。
• 307 Temporary Redirect：与 302 类似，但客户端应保持请求方法不变进行重定向。

4）4xx 客户端错误状态码

• 400 Bad Request：表示请求有语法错误或请求无法被服务器理解。
• 401 Unauthorized：表示请求需要用户认证，通常是因为没有提供有效的身份验证凭证。
• 403 Forbidden：表示服务器理解请求，但拒绝执行，通常是因为用户没有足够的权限访问资源。
• 404 Not Found：表示服务器找不到请求的资源。
• 405 Method Not Allowed：表示请求方法不被允许，例如使用了 POST 请求但服务器只允许 GET 请求。
• 406 Not Acceptable：表示服务器无法根据客户端的请求头返回满足要求的资源。
• 408 Request Timeout：表示客户端请求超时，服务器在规定时间内没有收到完整的请求。
• 409 Conflict：表示请求与服务器的当前状态冲突，例如提交的内容与已有资源冲突。
• 429 Too Many Requests：表示客户端发送的请求过多，超出了服务器的限制。

5）5xx 服务器错误状态码

• 500 Internal Server Error：表示服务器内部错误，通常是服务器遇到了意外情况，无法完成请求。
• 501 Not Implemented：表示服务器不支持请求的功能，无法完成请求。
• 502 Bad Gateway：表示作为网关或者代理的服务器，从上游服务器接收到无效的响应。
• 503 Service Unavailable：表示服务器暂时不可用，通常是由于服务器过载或正在进行维护。
• 504 Gateway Timeout：表示作为网关或者代理的服务器，在等待上游服务器响应时超时。
• 505 HTTP Version Not Supported：表示服务器不支持请求中使用的 HTTP 版本。

2.在 Web 开发中常用的协议和标准有哪些？

1）协议

• HTTP（HyperText Transfer Protocol，超文本传输协议）：
  • 是用于在 Web 浏览器和 Web 服务器之间传输数据的基础协议。
  • 目前主要使用的版本是 HTTP/1.1 和 HTTP/2。HTTP/2 相比 HTTP/1.1 有更高的性能，支持多路复用、头部压缩等特性。
  • 特点包括无状态、基于请求/响应模式等。
• HTTPS（HyperText Transfer Protocol Secure，超文本传输安全协议）：
  • 在 HTTP 的基础上通过 SSL/TLS 加密来确保数据传输的安全。
  • 广泛用于需要保护用户数据（如登录信息、支付信息等）的场景。
  • 提供了数据加密、身份验证和数据完整性校验等功能。
• FTP（File Transfer Protocol，文件传输协议）：
  • 虽然在 Web 开发中不是主要用于网页传输，但在一些场景下可能用于文件上传和下载，例如网站后台管理中上传文件到服务器。
  • 支持两种模式：主动模式和被动模式。
• WebSocket：
  • 一种在单个 TCP 连接上进行全双工通信的协议。
  • 允许服务器主动向客户端推送数据，而不仅仅是客户端请求后服务器响应的模式。
  • 常用于实时通信应用，如在线聊天、实时数据更新等。

2）标准

• HTML（HyperText Markup Language，超文本标记语言）：
  • 用于创建网页的结构和内容。
  • 目前 HTML5 是广泛使用的版本，支持丰富的多媒体元素、语义化标签、本地存储等特性。
• CSS（Cascading Style Sheets，层叠样式表）：
  • 用于控制网页的外观和布局。
  • CSS3 引入了很多新特性，如动画、渐变、弹性布局等。
• JavaScript：
  • 一种客户端脚本语言，用于为网页添加交互性和动态效果。
  • 有众多的框架和库，如 React、Vue.js、Angular 等，遵循 ECMAScript 标准。
• REST（Representational State Transfer，表述性状态转移）：
  • 一种软件架构风格，用于设计 Web 服务。
  • 强调资源的概念，通过 HTTP 方法（GET、POST、PUT、DELETE 等）对资源进行操作。
• JSON（JavaScript Object Notation，JavaScript 对象表示法）：
  • 一种轻量级的数据交换格式。
  • 常用于 Web 服务之间的数据传输以及与前端的交互。
• XML（eXtensible Markup Language，可扩展标记语言）：
  • 另一种常用的数据交换格式。
  • 虽然不如 JSON 简洁，但具有良好的扩展性和自描述性。

3.如何处理跨域问题？

跨域问题是由同源政策（Same-Origin Policy）引起的，浏览器出于安全考虑限制 JavaScript 在一个源（域、协议、端口）上与另一个源进行交互。下面是一些处理跨域问题的方法：

1）CORS（跨源资源共享）

CORS 是一种机制，允许服务器通过在响应中添加特定 HTTP 头部来指示哪些源可以访问资源。
示例代码：

// 服务器端响应头可以如下设置：
Access-Control-Allow-Origin: *
// 或者指定特定源：
Access-Control-Allow-Origin: https://example.com// 在 Node.js（Express）的例子中：
const express = require('express'); 
const cors = require('cors');
const app = express();
app.use(cors()); // 允许所有跨域请求  
// 或者 
app.use(cors({ origin: 'https://example.com', // 只允许特定源 })); 
app.get('/data', (req, res) => { res.json({ message: 'Hello, world!' }); }); 
app.listen(3000, () => { console.log('Server running on port 3000'); });

2）JSONP（JSON with Padding）

JSONP 是一种非官方的跨域请求方式，它利用

示例代码：
//客户端下载数据：
function handleResponse(data) { console.log(data); } 
const script = document.createElement('script'); 
script.src = 'https://example.com/data?callback=handleResponse'; 
document.body.appendChild(script);//服务器响应：
handleResponse({ message: 'Hello, world!' });

3）代理

通过设置同源服务器（如 Webpack dev server 或 Nginx）代理请求，可以有效避免跨域问题。客户端的请求会先发送到代理服务器，代理服务器再请求目标服务器的数据。

Webpack 示例配置：
webpack.config.js module.exports = { 
devServer: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, }, }, }, };

4） iframe + postMessage

如果应用的两个部分可以通过 iframe 嵌套的方式共存，可以使用 postMessage 方法实现跨域消息传递。

示例代码：
//主窗口发送消息：
const iframe = document.getElementById('my-iframe'); 
iframe.contentWindow.postMessage('Hello from parent', 'https://example.com');//iframe 接收消息：
window.addEventListener('message', (event) => { 
if (event.origin === 'https://parent-origin.com') { console.log(event.data); // 处理消息 } });

5） WebSocket

WebSocket 协议不受同源政策的限制，可以用于跨域通信。需要服务器和客户端都支持 WebSocket。

示例代码：
const socket = new WebSocket('ws://example.com/socket'); 
socket.onopen = function(event) { socket.send('Hello Server!'); }; 
socket.onmessage = function(event) { console.log(event.data); };

总结：
选择合适的跨域解决方案取决于具体的情况，通常情况下，CORS 是最常见和推荐的方案。
如果控制服务器端，那么配置 CORS 将是最高效的方式。
如果不能改动服务器，其他方式如 JSONP 和代理也可以考虑。

4.get请求传参长度的误区、get和post请求在缓存方面的区别

1）误区：

• 我们经常认为get请求参数长度存在限制，
• 而post请求参数长度是无限制的。

2）实际上 HTTP协议 从未规定 GET/POST 的请求长度限制是多少。

• 对get请求参数的限制是来源与浏览器或 web 服务器，浏览器或 web 服务器限制了url的长度。
• 为了明确这个概念，我们必须再次强调下面几点:
  • HTTP 协议 未规定 GET/POST 的长度限制；
  • GET 的最大长度限制是因为浏览器和web服务器限制了 URI 的长度；
  • 不同的浏览器和 web 服务器，限制的最大长度不一样；
  • 要支持 IE，则最大长度为 2083 byte ，若只支持 Chrome，则最大长度 8182byte。

3）在缓存方面的区别：

• Get请求：类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，可以使用缓存;
• Post请求：一般是修改和删除的工作，必须与数据库交互，不能使用缓存。

5.简单说说，你对 token 的理解

1）概念

• Token 是一种用于身份验证和授权的凭证。
• 在网络应用中，它通常是一个字符串，代表着用户的身份或者特定的权限。

2）作用

• 身份验证：
  • 当用户登录系统时，服务器验证用户的身份信息（如用户名和密码）后，会生成一个 token 并返回给客户端。
  • 客户端在后续的请求中携带这个 token，服务器通过验证 token 的有效性来确定用户的身份，而无需每次都要求用户重新输入用户名和密码。
  • 例如，在一个移动应用中，用户登录后，应用会保存 token，在后续与服务器的交互中，将 token 包含在请求头中，服务器据此识别用户身份。
• 授权访问：
  • Token 可以包含特定的权限信息，决定用户可以访问哪些资源和执行哪些操作。
  • 服务器可以根据 token 中的权限标识来控制用户对不同功能和数据的访问。
  • 比如，一个企业管理系统中，不同的用户角色可能有不同的权限，token 可以明确标识用户的角色和相应的权限范围。

3）特点

• 无状态性：
• 服务器不需要在内存中存储每个用户的会话状态，只需要验证 token 的有效性。
• 这使得服务器可以更轻松地扩展，并且减少了服务器的资源消耗。
• 例如，在分布式系统中，多个服务器可以独立地验证 token，而不需要共享用户会话信息。
• 安全性：
  • Token 可以使用加密技术进行签名，确保其在传输过程中不被篡改。
  • 一些 token 还可以设置过期时间，增加了系统的安全性。
  • 例如，JSON Web Token（JWT）使用数字签名来保证其完整性和真实性，并且可以设置较短的过期时间，以减少被攻击的风险。
• 灵活性：
• Token 可以在不同的平台和设备上使用，包括 Web 应用、移动应用和 API 调用。
• 它可以适应不同的身份验证和授权需求，并且可以与各种技术栈集成。
• 例如，一个基于微服务架构的系统中，不同的服务可以使用相同的 token 进行身份验证和授权，提高了系统的可维护性和可扩展性。

6.简单说说，你对 axios 的理解

1）概述

• Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送 HTTP 请求。
• 它可以方便地与现代 JavaScript 框架（如 Vue、React 和 Angular）集成，提供了简洁的 API 和强大的功能。

2）主要特点

• 支持 Promise API：
  • Axios 的所有请求方法都返回 Promise 对象，使得异步请求的处理更加简洁和可读。可以使用then和catch方法来处理请求的成功和失败情况。
  • 例如：

    axios.get('/api/data').then(response => {console.log(response.data);}).catch(error => {console.error(error);});
    

• 支持多种请求方法：
  • Axios 支持常见的 HTTP 请求方法，如 GET、POST、PUT、DELETE、PATCH 等。可以轻松地发送不同类型的请求，并传递相应的请求参数。
  • 例如：

    // GET 请求
    axios.get('/api/users', { params: { page: 1, limit: 10 } });
    // POST 请求
    axios.post('/api/users', { name: 'John', age: 30 });
    

• 拦截器：
  • Axios 提供了请求拦截器和响应拦截器，可以在请求发送前和响应返回后进行一些预处理操作。
  • 请求拦截器可以用于添加请求头、设置认证信息、处理请求参数等。响应拦截器可以用于统一处理错误、格式化响应数据等。
  • 例如：

    // 请求拦截器
    axios.interceptors.request.use(config => {config.headers['Authorization'] = 'Bearer ' + token;return config;
    }, error => {return Promise.reject(error);
    });
    // 响应拦截器
    axios.interceptors.response.use(response => {return response.data;
    }, error => {if (error.response.status === 401) {// 处理未授权错误}return Promise.reject(error);
    });
    

• 并发请求：
  • Axios 支持并发请求，可以同时发送多个请求，并等待它们全部完成后进行处理。
  • 可以使用axios.all和axios.spread方法来处理并发请求的结果。
  • 例如：

    axios.all([axios.get('/api/users'),axios.get('/api/posts')
    ]).then(axios.spread((usersResponse, postsResponse) => {console.log(usersResponse.data);console.log(postsResponse.data);
    })).catch(error => {console.error(error);
    });
    

• 可配置性：
  • Axios 可以进行各种配置，如设置请求超时时间、设置基础 URL、设置请求头、设置响应数据格式等。
  • 例如：

    axios.defaults.baseURL = 'https://api.example.com';
    axios.defaults.timeout = 5000;
    axios.defaults.headers.common['Content-Type'] = 'application/json';
    

3）应用场景

• 与后端 API 交互：
  • 在前端应用中，使用 Axios 与后端服务器的 API 进行通信，获取数据、提交表单、更新资源等。
  • 例如，在一个电商网站中，使用 Axios 发送请求获取商品列表、添加购物车、下单等操作。
• 前后端分离项目：
  • 在前后端分离的架构中，Axios 作为前端与后端之间的通信桥梁，方便地进行数据交互和业务逻辑处理。
  • 前后端可以独立开发、测试和部署，提高开发效率和系统的可维护性。
• 移动应用开发：
  • 在移动应用开发中，Axios 可以用于与服务器进行通信，实现数据的同步和更新。
  • 例如，在一个移动社交应用中，使用 Axios 发送请求获取用户动态、发布状态、评论等操作。

7. ajax原理

AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML，其工作原理如下：

1）基本概念

• AJAX 不是一种新的编程语言，而是一种用于创建快速动态网页的技术。
• 它通过在后台与服务器进行少量数据交换，实现网页的异步更新，而无需重新加载整个网页。
• 这使得网页能够提供更流畅的用户体验，就像在使用桌面应用程序一样。

2）工作流程

• 创建 XMLHttpRequest 对象：
  • 在 JavaScript 中，首先创建一个 XMLHttpRequest 对象，它是 AJAX 的核心对象，用于在后台与服务器进行通信。
  • 不同浏览器对 XMLHttpRequest 对象的实现略有不同，但现代浏览器都提供了标准的 API。
  • 例如：

    var xhr = new XMLHttpRequest();
    

• 配置请求：
  • 设置请求的方法（GET、POST 等）、URL 和是否异步等参数。
  • 可以设置请求头信息，以便向服务器传递特定的信息。
  • 例如：

  xhr.open('GET', '/api/data', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  

• 发送请求：
  • 使用send()方法发送请求。如果是 POST 请求，可以在send()方法中传递请求参数。
  • 例如：

    xhr.send();
    

• 监听状态变化：
  • 通过监听 XMLHttpRequest 对象的onreadystatechange事件，来检测请求的状态变化。
  • 当请求的状态发生变化时，该事件会被触发。可以在事件处理函数中根据请求的状态进行相应的处理。
  • 例如：

    xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 请求成功，处理响应数据var response = xhr.responseText;console.log(response);} else if (xhr.readyState === 4 && xhr.status!== 200) {// 请求失败，处理错误console.error('请求失败：' + xhr.status);}
    };
    

• 服务器响应：
  • 服务器接收到请求后，进行相应的处理，并返回响应数据。
  • 响应数据可以是 XML 格式、JSON 格式或纯文本等。
  • XMLHttpRequest 对象会根据响应的状态码和内容类型自动解析响应数据，并将其存储在responseText或responseXML属性中。
• 处理响应数据：
  • 在客户端，根据响应数据的格式进行相应的处理。如果是 JSON 格式，可以使用JSON.parse()方法将其转换为 JavaScript 对象。
  • 可以根据响应数据更新网页的内容，或者执行其他操作。
  • 例如：

    var responseData = JSON.parse(xhr.responseText);
    document.getElementById('result').innerHTML = responseData.message;
    

3）优点

• 异步通信：
  • AJAX 允许网页在不刷新整个页面的情况下与服务器进行通信，从而提供更流畅的用户体验。
  • 用户可以继续与网页进行交互，而不会被长时间的等待所打断。
• 局部更新：
  • 可以只更新网页的一部分内容，而不是重新加载整个页面。这减少了网络流量和服务器负载，提高了性能。
• 更好的用户体验：
  • 通过异步通信和局部更新，用户可以更快地获得反馈，并且不会因为页面刷新而丢失当前的操作状态。
• 与服务器进行交互：
  • 可以在后台与服务器进行数据交换，实现动态内容的加载、表单提交、数据验证等功能。

8.什么情况下会导致浏览器内存泄漏？

1）意外的全局变量

• 未声明的变量：
  • 在 JavaScript 中，如果忘记使用var、let或const声明变量，会创建一个全局变量。如果这个变量引用了一个大对象，并且在不需要时没有被正确释放，就可能导致内存泄漏。
  • 例如：function foo() { x = {}; }，这里的x会成为一个全局变量，并且如果函数被多次调用，可能会积累多个大对象占用内存。
• 未清理的定时器引用：
  • 使用setInterval或setTimeout创建的定时器，如果在不需要时没有被清除，会一直保留对回调函数的引用，从而导致内存泄漏。
  • 例如：

    function startTimer() {const intervalId = setInterval(() => {console.log('Timer tick');}, 1000);// 如果没有在适当的时候清除这个定时器，就可能导致内存泄漏
    }
    

2）事件监听器未移除

• DOM 元素的事件监听器：
  • 当为 DOM 元素添加事件监听器时，如果在元素被移除或不再需要时没有移除事件监听器，该元素和其相关的事件处理函数会一直存在于内存中。
  • 例如：

    const element = document.getElementById('myElement');
    element.addEventListener('click', handleClick);
    // 如果 element 被移除了，但没有移除事件监听器，就可能导致内存泄漏
    

• 自定义事件的监听器：
  • 在自定义事件系统中，如果在不再需要监听某个事件时没有移除监听器，也会导致内存泄漏。
  • 例如：

    const eventEmitter = new EventEmitter();
    eventEmitter.on('customEvent', handleCustomEvent);
    // 如果在适当的时候没有调用 eventEmitter.off('customEvent', handleCustomEvent)，就可能导致内存泄漏
    

3）闭包使用不当

• 循环中的闭包：
  • 在循环中创建闭包，如果闭包引用了循环变量或外部的大对象，并且在循环结束后这些闭包没有被正确释放，会导致内存泄漏。
  • 例如：

    for (let i = 0; i < 10; i++) {document.getElementById(`button${i}`).addEventListener('click', function() {console.log(i); // 闭包引用了循环变量 i});
    }
    

• 长期存在的闭包：
  • 如果一个函数返回一个闭包，并且这个闭包被长期存储或引用，而闭包又引用了大量的内存资源，可能会导致内存泄漏。
  • 例如：

    function createFunction() {const largeObject = {}; // 假设这是一个大对象return function() {return largeObject;};
    }
    const myFunction = createFunction();
    // 如果 myFunction 被长期存储，而 largeObject 又没有被正确释放，就可能导致内存泄漏
    

4）缓存未清理

• 对象缓存：
  • 如果创建了一个对象缓存，并且在不再需要缓存的对象时没有清理缓存，会导致内存泄漏。
  • 例如：

    const cache = {};
    function addToCache(key, value) {cache[key] = value;
    }
    // 如果没有在适当的时候清理 cache 中的对象，就可能导致内存泄漏
    

• 数据存储未清理：
  • 如果使用浏览器的本地存储（如localStorage或sessionStorage）或 IndexedDB 存储了大量数据，并且在不需要时没有清理这些数据，也可能导致内存泄漏。
  • 例如：

    localStorage.setItem('myData', JSON.stringify(largeObject));
    // 如果在适当的时候没有移除这个存储项，就可能导致内存泄漏
    

5）大型数据结构未释放

• 大型数组或对象：
  • 如果创建了一个非常大的数组或对象，并且在不再需要时没有将其设置为null或使用其他方式释放内存，会导致内存泄漏。
  • 例如：

    const largeArray = new Array(1000000).fill(0);
    // 如果在适当的时候没有释放 largeArray，就可能导致内存泄漏
    

• 递归数据结构：
  • 如果创建了一个递归的数据结构，并且在不再需要时没有正确地释放它，可能会导致内存泄漏。
  • 例如：

    function createRecursiveObject() {const obj = {};obj.child = createRecursiveObject();return obj;
    }
    const recursiveObject = createRecursiveObject();
    // 如果在适当的时候没有释放 recursiveObject，就可能导致内存泄漏