跳到主要内容

· 阅读需 23 分钟
info

本篇文章翻译至 https://kamranahmed.info/blog/2016/08/13/http-in-depth/

作者：Kamran Ahmed

HTTP 是每个开发者都知道的协议，因为所有的网页都在使用它，了解它绝对可以帮助你写出更好的应用。在这篇文章中，我会探讨 HTTP 是什么，它是如何形成的，以及未来又将如何。

什么是 HTTP​

首先需要探讨的是，什么是 HTTP？HTTP 是基于 TCP/IP 的应用层通信协议，它规定了客户端与服务器段之间如何通信。它定义了内容是如何在因特网上被请求和传输的。应用层协议只是一个抽象层协议，它规范了主机(客户端和服务器)是如何通信的，它本身依赖于 TCP/IP 来获得客户端和服务器之间的请求和响应。HTTP 默认使用 80 端口，但是也可以使用其他端口。HTTPS 使用 443 端口。

HTTP/0.9 - 只有一行(1991)​

HTTP 的第一个版本是 HTTP/0.9，于 1991 年被提出。它是最简单的协议，只有一个 GET 方法。如果客户端想要获取服务器上的一个网页，它可能发出如下请求

GET /index.html

来自服务器的响应会是如下的形式

(response body)
(connection closed)

· 阅读需 9 分钟
熊滔

手抄笔记​

自从上了大学之后，知识越发艰涩难懂，往往我看完一遍书之后，都不知道自己看了什么，所以当时就觉得我需要做笔记，我那时为每门科目都准备了一个笔记本，形式感很足，不过那时的我做笔记的方法一般就是抄一遍 PPT。抄 PPT 这一行为，说实话，屁用没有，并且十分的费时间，一个章节几十页 PPT，一门课就是几百页 PPT，手都抄麻了，当时真吃饱了撑的。

当时我也不是没有反省过，抄 PPT 有用么，有这功夫不如将 PPT 打印下来，回去慢慢看，跟你抄的也差不多。所以中间也停过一段时间，但是没有找到更好的破局之法，然后又去抄 PPT 了。

· 阅读需 3 分钟
熊滔

在高分辨率屏幕 (dpr > 1) 上进行绘图时，会发现绘制的图像比较模糊，这是因为 Canvas 画布的单位不是一个 CSS 像素大小，而是一个物理像素大小。而 CSS 像素大小与物理像素大小相差 dpr 倍。当我们设置 Canvas 大小与 CSS 大小相同时，由于 CSS 大小是 Canvas 大小的 dpr 倍，所以会发生拉伸，导致图像模糊

<style>
  #canvas {
    width: 100px;
    height: 100px;
  }
</style>
<canvas id="canvas" width="100" height="100"></canvas>

如上面的代码，虽然数值上画布大小和其 CSS 大小都是 100，但实际上它们相差 dpr 倍，因此画布会被拉伸放大，因此会导致模糊。

既然知道了原因，那我们只要设置画布大小为 CSS 大小的 dpr 倍，这样画布就不会被拉伸了。而为了使得在画布中使用的单位是 CSS 像素，我们可以设置 ctx.scale(dpr) ，这样我们使用的单位就相当于 CSS 像素

ctx.scale(dpr);
// 这样绘制的矩形就是 (100px, 100px) 的了
ctx.fillRect(0, 0, 100, 100);

看个例子进行对比：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #canvas,
      #canvas2 {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <canvas id="canvas2"></canvas>

    <script>
      const canvas = document.getElementById("canvas");
      const { width: w, height: h } = window.getComputedStyle(canvas);
      canvas.width = parseInt(w);
      canvas.height = parseInt(h);

      const ctx = canvas.getContext("2d");
      ctx.fillStyle = "#e77c8e";
      ctx.fillRect(100, 100, 100, 100);

      const canvas2 = document.getElementById("canvas2");
      const { width: w2, height: h2 } = window.getComputedStyle(canvas2);
      canvas2.width = parseInt(w2) * window.devicePixelRatio;
      canvas2.height = parseInt(h2) * window.devicePixelRatio;

      const ctx2 = canvas2.getContext("2d");
      ctx2.scale(window.devicePixelRatio, window.devicePixelRatio);
      ctx2.fillStyle = "#e77c8e";
      ctx2.fillRect(100, 100, 100, 100);
    </script>
  </body>
</html>

有两个 Canvas 画布，它的大小都是 300px×300px300\text{px}\times300\text{px}，画布的大小第一个设置的数值与 CSS 大小一样，第二个设置为 dpr 倍，并且第二个画布设置了 ctx.scale(dpr) ，看一下效果

第二个矩形明显比第一个清晰许多。

备注

使用这种方法需要注意的是，此时画布的大小被设置为了 300×dpr300 \times \text{dpr}，但是我们要将其看作是 300px 的大小。