HTTP

用户8008663494819
168 阅读8分钟

什么是HTTP? HTTP 和 HTTPS 的区别?

1.HTTP

HTTP超文本运输协议，用于在浏览器和服务器之间以明文方式发送完整的、有意义的数据，不做任何加密处理，安全性不高。

特点如下：

  • 支持客户/服务器模式
  • 简单快速：请求服务时，只需传送请求方法和路径。通信速度快
  • 灵活：传输任意类型的数据。正在传输的类型由Content-Type加以标记
  • 无连接：每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。节省传输时间
  • 无状态：无法根据之前的状态进行本次的请求处理

2.HTTPS

HTTPS通过 SSL证书来验证服务器，浏览器和服务器之间的通信进行加密，解决HTTP不安全的特性 流程图如下所示：

  • 首先客户端通过URL访问服务器建立SSL连接
  • 服务端收到客户端请求后，返回客户端证书信息(包含公钥)
  • 客户端对证书信息进行处理，建立会话密钥，使用浏览器的公钥将会话密钥进行加密，发送给服务器端
  • 服务器利用自己的私钥解密出会话密钥
  • 服务器利用会话密钥加密与客户端之间的通信

3.区别

  • HTTP数据传输是明文的，是不安全的，HTTPS使用了SSL/TLS协议进行了加密处理，相对更安全
  • HTTP 默认端口是80,https默认端口是443
  • HTTPS 由于设计加密以及多次握手，性能方面不如 HTTP

强缓存和协商缓存

  • 强缓存

浏览器第一次请求资源时，服务器会在响应头中包含Expires(过期时间)和Cache-Contr(缓存行为)字段来设置一个过期时间，浏览器再次请求时，会先根据本地缓存资源的 header 中的信息判断是否缓存过期，如果没有过期则直接使用缓存中的资源不会再向服务器发送请求。

  • 协商缓存

浏览器第一次请求资源时，服务器在响应头中包含If-Modified-Since 和 If-None-Match字段生成一个唯一的标识符并返回，浏览器再次请求时，将标识符作为请求头中的字段发送给服务器。服务器进行比较，匹配成功返回状态码304，告诉浏览器可以在缓存中加载资源，否则返回新的资源

CDN

CDN 全称内容分发网络 用户请求访问时，会自动根据用户所在地，从最近的服务器上获取数据，减少了数据的传输时间，提高加载速度，具备缓存功能，再次请求时会从缓存中进行获取，减少服务器的请求

  • CDN解决了那些问题

    • 用户与服务器距离较远，需要进行多次网络转发，传输时间长，不稳定
    • 用户所在地域不同，请求需要多次转发
    • 单个服务器网络带宽，处理能力有限，用户请求过多时，会导致响应速度低。

使用单例模式创建WebSocket

// WebSocketSingleton.js

class WebSocketSingleton {
  constructor(url) {
    if (!WebSocketSingleton.instance) {
      this.url = url;
      this.websocket = new WebSocket(url);
      WebSocketSingleton.instance = this;
    }

    return WebSocketSingleton.instance;
  }

  send(data) {
    this.websocket.send(JSON.stringify(data));
  }

  // 可以根据需要添加其他 WebSocket 方法
}

const url = 'ws://example.com'; // WebSocket 服务器地址
const ws = new WebSocketSingleton(url);

export default ws;

在这个示例中，我们创建了一个名为 WebSocketSingleton 的类，它在构造函数中接收 WebSocket 服务器的 URL，并创建了一个 WebSocket 连接。在构造函数中，我们检查了 WebSocketSingleton 类的静态属性 instance 是否已经有值，如果没有则创建实例并将其赋值给 instance，这样就确保了只有一个 WebSocket 实例存在。

在其他地方可以这样使用这个单例 WebSocket 实例：

import ws from './WebSocketSingleton';

// 发送数据
ws.send({ message: 'Hello, WebSocket!' });

koa和express的区别

  1. 中间件处理方式：

    • express使用基于回调函数的中间件处理方式，通过app.use()注册中间件，中间件函数接收req、res、和next作为参数，可以在其中进行请求处理，响应处理或者转移控制权给下一个中间件。
    • koa使用基于promise的中间件处理方式，中间件不在接收 next，而是通过await来控制权的转移，更加直观和简洁地处理异步流程

  2. 异步处理：

    • 在 Express 中，进行异步处理需要使用回调函数或者使用类似于 async/await 的语法，这可能导致回调地狱或者需要谨慎处理错误。
    • Koa 基于 Promise 提供了更好的异步处理支持，可以更自然地使用 async/await，简化了异步流程的处理。

  3. 原生功能支持：

    • Express 内置了路由、请求处理、响应处理等功能，并提供了丰富的插件和中间件生态系统。
    • Koa 的核心功能较为简洁，很多功能需要借助第三方中间件来实现，这意味着 Koa 的默认功能相对较少，但是可以根据需求选择合适的中间件进行定制。

  4. Koa 对于错误处理的支持更好：

    • Koa 内置了对于错误处理的机制，可以统一处理错误，并且通过 try/catch 可以良好地处理异步代码中的错误。
    • 在 Express 中，错误处理需要自行编写代码来实现。

vite与webpack的区别

  1. vite为什么比webpack快

  • webpack是先打包再启动开发服务器，vite是直接启动开发服务器，然后按需编译依赖文件

    • webpack先打包，再启动开发服务器，请求服务器时直接给予打包后的结果；
    • vite直接启动开发服务器，请求哪个模块再对哪个模块进行实时编译

  1. 打包原理：

    • Webpack 基于 Loader 和 Plugin 的打包方式。它会将所有的资源打包成一个或多个 bundle 文件，适合处理复杂的项目结构和需要大量定制化配置的场景。
    • Vite 基于 ES 模块构建的工具，利用 ES 模块支持，开发时使用ES 模块，无需打包成 bundle。在生产环境下，Vite 会将代码转换为生产可用的代码，以保持性能。

Webpack 5与Webpack 4的主要区别

  • 性能优化：Webpack 5在构建速度和性能方面进行了大量的优化，从而可以更快地构建应用程序和库。

  • Tree Shaking：Webpack 5对Tree Shaking进行了改进，可以更有效地删除未使用的代码，从而使打包后的文件更小，加载更快。

  • 持久化缓存：Webpack 5引入了持久化缓存，可以更快地重新构建应用程序，提高开发效率。

  • 改进的代码分割：Webpack 5可以更精确地分割代码，从而减少页面加载时间。

  • 移除的插件和功能：Webpack5移除了一些过时的插件和功能，例如UglifyJS和CommonsChunkPlugin，以提高构建性能和可维护性。

get和post的区别

  1. 参数传递方式：

    • GET：  参数以查询字符串的形式附加在 URL 后面，例如 http://example.com/api?key1=value1&key2=value2。
    • POST：  参数位于请求体中，而不是 URL 中，通常用于传输较大数据量或敏感数据，对参数大小没有限制。

  2. 安全性：

    • GET：  参数以明文形式传输在 URL 中，因此不适合传输敏感信息，如密码等。
    • POST：  参数传递在请求体中，相对更安全，适用于传输敏感信息。

  3. 请求长度限制：

    • GET：  浏览器对 URL 长度有限制，不适合传输大量数据，一般限制为 2048 个字符。
    • POST：  没有长度限制，可以传输大量数据。

  4. 缓存：

    • GET：  请求会被浏览器缓存，可以通过缓存减少对服务器的请求。
    • POST：  默认不会被浏览器缓存，每次都会向服务器发送请求。

cookie和session的区别

  1. 存储位置：

    • Cookie：  存储在客户端（浏览器）中，浏览器会在每次请求中自动发送Cookie到服务器，以便服务器可以识别用户。。
    • Session：   Session数据通常存储在服务器上，而不是在客户端。服务器为每个用户创建一个唯一的会话，然后在服务器上存储会话数据。

  2. 安全性：

    • Cookie：  相对不安全，容易被窃取和篡改，可能引发安全风险。
    • Session：  相对安全，因为信息存储在服务器端，客户端无法直接访问和修改。

  3. 容量限制：

    • Cookie：  存储大小一般不超过 4KB
    • Session：  一般不限制存储大小，取决于服务器的设置。

  4. 生存周期：

    • Cookie：  可以设置过期时间，在一定时间内有效，可以长期保持在客户端，即使关闭浏览器也不会失效。
    • Session：  通常在用户会话结束（如关闭浏览器）或超时后失效，会话结束后 Session 数据会被销毁。

  5. 传输方式：

    • Cookie：  通过 HTTP 请求头中的 Set-Cookie 和 Cookie 头信息在客户端和服务器之间传递。
    • Session：  通过在客户端收到的 session ID 在服务器端进行会话状态的保持。

ECharts自适应怎么实现

  1. 设置 Resize：
    在创建 ECharts 实例后，可以监听浏览器窗口大小变化事件，在事件触发时调用 ECharts 实例的 resize 方法，来实现图表的自适应布局。示例代码如下：

    window.onresize = function () {
    chart.resize();
};

  2. 使用容器宽高百分比：
    在设置包含图表的容器（div）的宽度和高度时，可以使用百分比作为单位，以便容器能够随着父容器或浏览器窗口的大小变化而自动调整大小，从而使得图表也能够自适应布局。示例代码如下：

    <div id="chart" style="width: 100%; height: 80%;"></div>
avatar
文章
阅读
粉丝