【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，就可能导致内存泄漏