Tag Archive: http

4月 11th, 2022

我相信您已经注意到,当您第一次打开网站时,加载需要一些时间。但是,当您在一段时间后再次打开它时,该网站的加载速度要快得多。想象一下,如果一个网站每次加载都需要相同的时间,那么浏览速度会有多慢。这一切都要归功于一个叫做 HTTP 缓存的作用。

什么是 HTTP 缓存?

HTTP缓存是将一些常用或经常使用的数据存储在快速访问的地方的想法。有了这个,很有可能可以更快地访问最需要的数据,因为计算机不必走太远就可以获取它。对于 Web 浏览,当您的 Web 浏览器(例如 Chrome)在本地存储中存储网站或 Web 应用程序的副本时,会考虑缓存。一旦网站被缓存,网络浏览器就不必重新下载所有服务器数据,这将使浏览速度更快。

例如,一旦下载了网站的 CSS 文件,浏览器就不必为会话的每个页面都下载它。许多 JavaScript 文件、图像(例如网站的徽标和社交媒体图标)甚至一些动态内容也是如此。通过使用缓存标头启用缓存。推荐阅读:《http和https的区别》

HTTP 中的缓存标头

HTTP缓存有两个主要的缓存头,第一个称为“Cache-Control”,第二个称为“Expire”。

Cache-Control

您可以将 Cache-Control 视为在用户浏览器中切换缓存的开关。添加此标头后,它将为所有受支持的 Web 浏览器启用缓存。如果此标头不存在,则即使浏览器支持缓存,也不会保留网页内容的缓存。Cache-control有两种隐私设置,第一种是Public,第二种是Private。

在 Public 的情况下,资源可以由任何中间代理缓存,例如内容交付网络 (CDN)。带有 Private 响应的 Cache-Control 标头将告诉浏览器缓存将只为单个用户完成,而不是为任何中间代理完成。

Cache-Control 标头中的值“max-age”设置缓存内容的时间。这个时间以秒为单位。

Cache-Control:public, max-age=31536000

Expire

当代码中存在 Cache-Control 时,将使用 Expires 标头。这是一个简单的 HTTP 缓存标头,它设置任何缓存资源被视为无效的日期。一旦缓存过期并且用户加载网站,网络浏览器将再次简单地请求页面的所有内容。

有条件的请求

上面讨论的标头只是告诉浏览器何时从 Web 服务器检索数据。另一方面,条件请求告诉浏览器如何检索它们。条件请求告诉浏览器它如何询问服务器缓存中的数据副本是否已过时。

在这个过程中,浏览器将一些关于它缓存的资源的数据发送到它的内存中,服务器读取这些数据后,判断数据是否过期。

基于时间的请求

在基于时间的请求中,检查请求的资源是否在服务器上发生了变化。如果浏览器中缓存的副本是最新的,服务器将返回代码 304。

要按时间设置条件请求,您可以在响应标头中使用“Last-Modified”。

Cache-Control:public, max-age=25998579

Last-Modified: Fri, 08 Jul 2018 15:25:00 GMT

基于内容

在基于内容的请求中,检查服务器副本和缓存副本的 MD5 哈希(或任何其他可行选项)。这告诉数据是否相同;如果数据不同,MD5校验和将不匹配,服务器将发送一个新的资源副本。推荐阅读:《如何清除浏览器缓存》

这是通过标题中的“ETag”完成的。它的价值在于资源的消化。

Cache-Control:public, max-age=25998579

ETag: “496d7131f15f0fff99ed5aae”

Visibility

几乎所有现代浏览器都包含一些与开发相关的工具,可让您检查网页的资源、源代码和其他方面。其中,您可以找到一个工具来查看任何应用程序返回的标头。

在 Google Chrome 上,要查看这些标题,您可以右键单击网页的空白区域并单击“检查”或按 CTRL+SHIFT+I 打开 DevTools。在此工具中,单击网络选项卡并按 CRTL+R 重新加载以查看页面的所有标题。

HTTP 缓存中的用例

以下是 HTTP 缓存的一些用例,如下所示:

对于静态资源

对于页面的静态资源,例如图像、JS 文件和任何 CSS 文件,您可以选择主动缓存内容。不必加载这些文件将带来令人印象深刻的性能改进。对于这个用例,选择 max-age 值超过一个月甚至一年的 Cache-Control Header。

Cache-Control:public; max-age=31536000

动态内容

对于页面的动态内容,您需要自己考虑浏览器应该缓存哪些文件以及缓存多长时间。如果内容经常更改,您需要确保您选择的缓存持续时间不会给用户带来任何问题。

私有内容的缓存

正如我们在 Cache-Control 部分所讨论的,如果页面的内容本质上是私有的,您可以通过在标头中添加“Cache-Control: private”来防止它被 CDN 等中间代理缓存。另一种更安全的方法是根本不缓存任何私人内容。

实现 HTTP 缓存

既然您知道 HTTP 缓存是什么以及它是如何工作的,那么让我们看看如何在您的网站上实现它。对于不同的服务器类型,HTTP 缓存的实现有点不同。在我们的例子中,让我们看一下通过 .htaccess 文件实现缓存。

要启用缓存,您可以在服务器上的 .htaccess 文件中添加标头,例如:

FilesMatch “\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”

Header set Cache-Control “max-age=31536000, public”

/FilesMatch

以上将全部缓存为 pdf、Flv、jpg 以及“文件匹配”中提到的其他格式,为期一年。

总结

HTTP 缓存是最重要的技巧之一,它可以让访问者更快地浏览您的网站,现在您可以了解它是如何工作的,您可以在您的网站和 Web 应用程序上实施它,让您的用户和节省您的服务器带宽。推荐相关阅读:《CDN缓存工作原理以及条件》

TAGS: ,
11月 23rd, 2021

普通用户很少注意到浏览器的地址栏中有http和https两种显示,对网站来说这两者的差别可是非常大的,那么他们的区别何在呢?

HTTP:无数据加密

以HTTP开头的URL都使用一种基本类型的超文本传输协议,是由Tim Berners-Lee 在 1990 年代初期创建,当时 Internet 还处于起步阶段,该网络协议标准允许 Web 浏览器和服务器通过数据交换进行通信。

HTTP 也被称为“无状态系统”,这意味着它可以按需连接。您单击一个链接,请求连接,您的 Web 浏览器将此请求发送到服务器,服务器通过打开页面来响应。连接速度越快,数据呈现给您的速度就越快。

作为一种“应用层协议”,HTTP 仍然专注于呈现信息,但不太关心这些信息从一个地方传输到另一个地方的方式。不幸的是,这意味着 HTTP 可以被拦截并可能被更改,从而使信息和信息接收者(也就是您)都容易受到攻击。

HTTPS:加密连接

HTTPS 不是 HTTP 的对立面,而是它的小表弟。两者本质上是相同的,因为它们都指代相同的超文本传输协议,该协议使请求的 Web 数据能够显示在您的屏幕上。但是,HTTPS 更先进,更安全。

简单的说,HTTPS 协议是 HTTP 的扩展。缩写中的“S”来自“安全”一词,它由传输层安全性 (TLS)提供支持,这是在 Web 服务器和网络服务器之间建立加密连接的标准安全技术。如果没有 HTTPS,您输入网站的任何数据(例如您的用户名/密码、信用卡或银行详细信息、任何其他表单提交数据等)都将被发送为纯文本,因此容易被拦截或窃听。因此,在输入信息之前,您应该检查站点是否使用HTTPS。

除了对服务器和浏览器之间传输的数据进行加密之外,TLS 还会验证您正在连接的服务器并保护传输的数据不被篡改。

使用 HTTPS 的优势

上面提到的安全优势——验证服务器、加密数据传输和保护交换不被篡改——是使用 HTTPS 的明显主要优势。网站运营商希望并且需要保护他们的访问者数据,并且让网站访问者知道他们的数据正在被安全传输。

公众对数据隐私和安全性日益增长的需求是使用 HTTPS 的另一个优势。研究报告表明,13% 的网购消费者放弃是由于支付安全问题。网站访问者想知道他们可以信任您的网站,尤其是当他们输入财务详细信息时,使用 HTTPS 是实现这一目标的一种方式(即向访问者表明他们输入的任何信息都将被加密)。

此外,HTTPS 对SEO也有很大帮助。早在 2014 年,谷歌就宣布HTTPS 作为排名信号。从那时起,实施 HTTPS 的公司的一些研究经验表明,HTTPS的网站可以获得更高的排名和可见性。