您何时需要更多/更少的http请求?

时间:2015-11-10 12:51:04

标签: javascript php html css http

好像你的页面加载很快,你会想要一系列小的http请求。

如果它是一个大的,用户可能需要等待更长时间才能看到页面完全存在。

但是,我听说最小化HTTP请求更有效。例如,这就是为多个图像创建精灵的原因。

是否有关于何时需要更多内容以及何时需要更少内容的一般准则?

4 个答案:

答案 0 :(得分:7)

多个请求会从连接和标头创建开销。

就像下载FTP站点的内容一样,一个站点有一个1GB blob,另一个站点有1,000,000个文件,总计几MB。在一个良好的连接上,1GB文件可以在几分钟内下载,但另一个肯定需要一整天,因为转移协商具有讽刺意味的是转移本身需要更多的时间。

HTTP比FTP更有效,但原理是相同的。 重要的是初始页面加载,它需要足够小以向用户显示某些内容,然后在用户的视图之外加载其他资源。一个包含一千个小图像的页面将从精灵中受益,因为协商不仅会对连接造成压力,而且还可能对客户端计算机造成压力。

答案 1 :(得分:2)

编辑2(25-08-2017)

此处有另一个更新;一段时间过去了,HTTP2正在成为一个真实的东西。我建议您阅读this page以获取更多相关信息。

取自第二个链接(在编辑时):

  

预计HTTP / 2.0会:

     

基本上和可衡量地改善最终用户的感知延迟   大多数情况下,使用TCP通过HTTP / 1.1。解决"行首   阻断" HTTP中的问题。

     

不需要与服务器建立多个连接以启用并行性,   从而改善其对TCP的使用,特别是在拥塞方面   控制。

     

保留HTTP / 1.1的语义,利用现有文档   (见上文),包括(但不限于)HTTP方法,状态   代码,URI以及适当的标题字段。

     

明确定义HTTP / 2.0如何与HTTP / 1.x交互,尤其是在   中间体(2-> 1和1-> 2)。

     

清楚地确定任何新的可扩展性点和策略   适当使用。

粗体句(强调我的)解释了HTTP2将如何处理与HTTP1不同的请求。而HTTP1将创建〜8(每个浏览器不同)同时(或#34;并行")连接以获取尽可能多的资源,HTTP2将重新使用相同的连接。这减少了创建新连接所需的总时间和网络延迟,从而加速了资产交付。此外,您的网络服务器也可以更轻松地保持连接打开次数减少约8倍。想象一下那里的收获:)

HTTP2在主流浏览器中已得到广泛支持,caniuse has a table for it:)

编辑(2015年11月30日)

我最近在主题'页面速度'上找到this article。这篇文章非常详尽,在最糟糕的情况下读起来很有趣,所以我一定会试一试。

原始

这个问题的答案太多了,但这是我的2点。

如果你想建立一个网站,你需要在你的工具带中提供一些基本的东西,比如HTML,CSS,JS - 甚至可能是PHP / Rails / Django(或10000多个其他网络框架之一)和MySQL

前端部分基本上是每个请求都被发送到客户端的所有内容。服务器端语言计算需要发送的内容,这就是您构建网站的方式。

现在,当涉及到管理资产(图像,CSS,JS)时,您将潜入HTTP领域,因为您希望尽可能少地执行请求。原因是有DNS penalty

然而,这种DNS惩罚并不代表您的整个网站。这完全取决于构建网站的程序员的请求数量和读取/可维护性之间的平衡。

像rails这样的一些框架允许您在服务器上部署应用程序之前将所有JS和CSS文件组合成一个大的类似的JS和CSS文件。这确保了(除非另有说明)例如 ALL JS ALL 网站中使用的 CSS 每个文件发送一个请求。

想象一下,有一个弹出脚本和一些通过AJAX获取文章的东西。这些将是两个不同的脚本,在部署时不合并它们 - 每个页面加载包括弹出窗口和文章脚本将发送两个请求,分别为每个文件一个。

这不是真的原因是因为浏览器可以随时缓存它们,因为最终浏览器和构建网站的人都想要相同的东西。为用户提供最佳体验! 这意味着,在第一次请求期间,您的网站将回复客户端将缓存为尽可能,以便将来更快地连续加载页面。

这有点像帮助网站变得更快的浏览器方式。 现在,当辉煌的浏览器学家想到某些东西时,或多或少我们的工作就是确保它适用于浏览器。通常这些带有缓存等的东西都是微不足道的,并不难实现(感谢上帝)。

在页面加载中包含大量HTTP请求并不是世界末日的事情,因为它只会减慢您的第一个请求,但总体而言请求较少会使这个问题成为现实。 -penalty"事情似乎不那么频繁,会给你的用户带来更多的即时页面加载。

除了文件合并之外,您还可以使用其他技术,当您加入javascript时,可以选择async or defer

对于异步,它意味着无论何时加载,脚本都将在后台加载和执行,无论HTML中包含的顺序如何。这也会暂停HTML解析器直接执行脚本。

推迟它有点不同。它有点像异步,但文件以正确的顺序执行,只有之后完成HTML解析器。

你不想做的事情" async"例如,它将是 jQuery ,它是许多网站的关键库,你会想要在其他脚本中使用它,所以使用异步并且不确定它何时是&#39 ;下载并执行不是一个好计划。

你想要的东西" async"例如,它是一个谷歌分析脚本,它对最终用户来说是有效的选择,因此应该被标记为不重要 - 无论你关心你的网站没有多少关于你的网站没有建立的数据你但 你:)

要回到请求并将所有这些关于async和deferred的讨论混合在一起,你可以在你的页面上有多个JS,而不是让HTML解析器暂停来执行一些JS - 而是你可以制作这个脚本推迟,你会很好,因为用户的HTML和CSS会加载,而JS解析器会很好地等待HTML解析器。

这不是减少HTTP请求的一个例子,但如果你有这个"一个文件"它是一个替代解决方案的一个例子。除了单独的请求之外,它并不属于任何地方。

你也永远无法建立一个完美的网站,也不会http://github.comhttp://stackoverflow.com,但它并不重要,它们足够快,我们的眼睛看不到任何疯狂的闪烁内容和这些事物对最终用户来说真的很重要。

如果您对多少请求是正常的感到好奇 - 不要。每个网站和网站的目的都有所不同,我同意有些事情有时会超过顶部,但事实就是如此,我们所要做的就是支持浏览器,就像他们支持我们一样 - 甚至寻找在IE / Edge,因为它们也在改进(缓慢但稳定)。

我希望我的故事对你有意义,我在帖子之前重新阅读,但在寻找不规则的打字或其他不合逻辑的东西时却找不到任何东西。

祝你好运!

答案 2 :(得分:0)

HTTP协议是冗长的,因此报头大小与有效负载大小的比率使得拥有更大的有效负载更有效。最重要的是,这仍然是一种分布式通信,这使得它本身就很慢。您通常还必须为每个请求设置和拆除TCP连接。

另外,我发现,小的请求在它们之间重复数据以试图实现RESTful纯度(比如在每个响应中包含用户数据)。

小请求有用的唯一时间是根本不需要数据,因此您只需在需要时加载它。然而,即使这样,它也可能更加高效。只需一次性检索即可。

答案 3 :(得分:0)

您总是希望减少请求。

我们将其他文件中的任何javascript / css代码分开的原因是我们希望浏览器缓存它们,以便我们网站上的其他页面加载速度更快。 如果我们有一个没有公共库(如jQuery)的单页网站,那么最好是在html中包含所有代码。