前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【译】HTTP/2:更短的页面加载时间更好的搜索引擎排名

【译】HTTP/2:更短的页面加载时间更好的搜索引擎排名

作者头像
腾讯IVWEB团队
发布2020-06-28 11:01:21
3110
发布2020-06-28 11:01:21
举报

原文地址:HTTP/2: Faster Page Load Time and Increase Ranking in Search Enginesundefined作者:ALEX RONINundefined日期:2019-05-03

HTTP/2:如今,Google、Youtube、Facebook等很多大型网站都已经使用了 HTTP/2,很多人都知道 HTTP/2,也就不足为奇了。

So what is HTTP2? We’ll find out now.

HTTP 的历史

The HTTP aka HyperText Transfer Protocol is the way your browser communicates with the web server of the website you are visiting.

两台(或多台)计算机通过 Internet 相互通信的方式有很多种,HTTP 只是用于浏览 Web 的一种方式。

第一个官方 HTTP 版本(HTTP/1.0)于1996年作为 RFC 1945 发布。

随着web的发展,一个页面所需要的css、js等资源也越来越多,在某些情况下我们不得不同时下载多个资源。

试想下如果我们使用 HTTP/1.0 中一个连接对应一个资源的机制,我们将不能完整利用带宽。

1999年,HTTP/1.1正式发布并针对这个问题提出了pipelining的概念。之后,HTTP/1.1一直被更新并使用到现在。

尽管上述问题有所改善,但并没有完全解决这个问题。当人们接受了这个现状觉得“还行”的时候,Google感觉这“不行”。所以Google提出了一个SPDY的新协议来提升页面加载时间。SPDY通过压缩,多路复用和优先级排序技术实现了减少页面加载时间的目标。2012年7月,SPDY开发团队公布SPDY将朝着标准化方向发展。Chromium,Mozilla Firefox,Opera,Amazon Silk,Internet Explorer和Safari浏览器也已经支持了SPDY。

SPDY被部署之后,相比于 HTTP/1.1 有了重大提升,同时引起了 Firefox 和 nginx 开发者的兴趣。不久之后,开发者们开始讨论 HTTP/2。经过沟通和提案选择后,最终选择了以 SPDY/2 作为 HTTP/2 的基础。后续针对工作组的讨论及实施人员的反馈也对方案做了些调整。到2015年5月,HTTP/2 协议发布在 RFC 7540 中。

HTTP/2?

HTTP / 2是HTTP协议的下一个正式版本,用于在浏览Web时提高页面加载速度和性能。

为什么要更新到HTTP/2?

当然,如果你不更新到HTTP/2并不会有什么问题,“一切照旧”。如果服务器支持 HTTP/2 浏览器将采用 HTTP/2,否则将会采用 HTTP/1.1。

为什么关心HTTP/2?

如果你正在使用web,通常情况下你应该关心。

作为用户,HTTP/2 有助于充分利用带宽并提供更好的浏览体验。如果你浏览的网站不支持 HTTP/2,他们就是在浪费你的时间,浪费可耻!

作为开发者,HTTP/2 可以提供更好的体验,更快的页面加载时间以此来提高网站在搜索引擎的排名。

HTTP/2 新特性

尽管我们在使用 HTTP/2 的过程中不需要知道这些,但是了解这些总归比什么都不了解要好的多。

如上所述,HTTP/2 的目标是提高页面加载速度,下面我们将了解一些帮助 HTTP/2 实现此目标的特性。

多路复用

首先我们要提到的就是为了解决从 HTTP/1 中就已经存在的线头阻塞问题的多路复用。为了更容易理解这个问题,我们把浏览一个网站想象成去餐厅吃饭。在”你“来到“餐厅”之后,比如”你“想点10个”菜“,我们对比下不同版本的“餐厅”会怎样为我们服务。

HTTP/1:每个“服务人员”都只接收一个“订单”,然后将“菜”送到正确的位置,在此之前不会再接收其他“订单”。所以点的10个“菜”,就需要叫10个“服务人员”。对于“餐厅”来说只需要雇10个“服务人员”,而“你”就不得不花时间通知每个“服务人员”告诉他们“你”的订单。

HTTP/1.1:有了上次的经历,餐厅训练“服务人员”能够接收更多的“订单”,但为了能够确保“订单”不被搞混,在“服务人员”完成上个“订单”之前只能接收一个“订单”。为了更快的吃到“菜”,“我”必须同时跟2-3个“服务人员”下“订单”,当然同时下“订单”的数量取决于“你”的需要。总体来说,这样还算不错,简单的“服务人员”培训,持久的使用,同时也都达不到最大负荷。这些培训后的“服务人员”叫做持久连接

img

HTTP/1.1:还是这家“餐厅”,这家“餐厅”有了特别训练的“服务人员”,“他”非常聪明得把所有“订单”都写到盒子里面然后开始处理这些“订单”。但是这个“服务人员”工作有点木讷,他必须按照“订单”发出的先后顺序返回。不幸的是,如果按照“米饭”、“汤”、“鱼”的顺序,如果有“米饭”还在等待,是不允许“鱼”先送到的。此外,这个特殊的“服务人员”的训练成本很高,以至于到2018年为止,这个“服务人员”依然没什么用。这个特殊的“服务人员”叫做管道化连接

HTTP/2:如果“餐厅”学习了新的训练方法,“服务人员”任然会写下所有“订单”后开始处理“订单”。但是这些“服务人员”更加灵活,他们首先会上先做好的“菜”,即使这个“菜”很大也会分很多次来一部分一部分来上。因此,减少了很多等待的时间,1个“服务人员”就可以为1个“桌子”服务,减少了招聘“服务人员”的成本。

img

译者注:“你” - 浏览器,“餐厅” - 网站服务器,“服务人员” - TCP,“订单” - HTTP请求,“菜” - 网络资源

优先级

在 HTTP/1.1 中服务器必须按照请求的顺序来返回响应。HTTP/2 则可以异步处理,所以更小的或者说更开的请求能够被更早地处理。此外,允许浏览器优先下载那些对于显示网站很重要的资源。

举个栗子,页面<head>中的<script>标签会被以最高优先级被 Chrome 加载(此处最高指低于CSS的最高),如<script>标签有async属性这个优先级将更改为Low

img

此外,我们还可以通过下列关键字来更改优先级。

  • rel=preload/prefetch/preconnect
  • as=fonts/style/script...

服务端推送

HTTP/2 允许服务端在请求之前主动发送响应包。例如,如果你在页面底部引用了一个脚本,在 HTTP/1.1 中,将加载并解析 HTML 然后必须要等到解析到引用脚本的<script>标签时才能去请求并运行JavaScript。在 HTTP/2 中,服务器能够在浏览器请求前发送这个JavaScript文件,这样讲减少浏览器解析 HTML 并请求资源的等待时间。

img

二进制数据传输

相对于 HTTP/1.1 中文本的发送形式,HTTP/2 中采用了二进制的形式来发送数据。采用二进制来进行数据传输,使解析变得更容易,有更小的体积,最重要的是相对于 HTTP/1.x 中的文本方式会有更少的错误,因为二进制协议不必处理空格,大写,行尾,空行等情况。

例如,HTTP/1.x 中定义了分析报文的四种方式,但在 HTTP/2 中报文仅仅是一行代码。

这里需要注意的是 HTTP/2 不能通过 telnet 连接,但有一些支持工具,例如 Wireshark 插件。

头部压缩

与HTTP / 1.1不同,HTTP/2 头部在发送之前将会被压缩。描述数据的信息随着查询一起发送,包含了数据的来源,类型,长度等等。

举个栗子

对于具有高延迟或响应太大的服务器,我们将很容易地看到HTTP/2和HTTP/1之间的页面加载时间差异。我们可以查看以下两个示例:

img

img

总结

这篇文章有点长,但目的只是为了介绍HTTP/2。下一篇文章,我们将尝试为我们的服务器安装HTTP/2。再见。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • HTTP 的历史
  • HTTP/2?
  • 为什么要更新到HTTP/2?
  • 为什么关心HTTP/2?
  • HTTP/2 新特性
    • 多路复用
      • 优先级
        • 服务端推送
          • 二进制数据传输
            • 头部压缩
              • 举个栗子
              • 总结
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档