我该如何减少等待时间(TTFB)?

155

我有一个查询涉及按照创建时间对表中的用户列表进行排序。我从Chrome开发者工具中获得了以下时间图。

来自Chrome的时序图

你可以看到TTFB(首字节时间)太高了。
我不确定是因为SQL排序导致的。如果是这个原因,那么我该如何减少这个时间呢?
还是因为TTFB?我看到一些博客说TTFB应该小于1秒。但对我来说显示大于1秒。这是因为我的查询还是其他什么原因?
我不确定怎样才能缩短这个时间。
我正在使用Angular。我是否应该使用Angular而不是SQL排序来对表进行排序?(很多帖子都说这不应该成问题)
我想知道的是如何减少TTFB。伙计们!我实际上是新手。这是由我的团队成员给我的任务。我不确定如何减少TTFB时间。我看到了很多帖子,但没有理解清楚。TTFB是什么?它是服务器所需的时间吗?


9
你的问题表明你不太理解这里发生了什么。这是等待服务器响应的时间,所以无论你使用AngularJS还是其他框架都无关紧要。如果你想改进服务器端代码,实际上需要向我们展示代码。 - dirkk
@govindpatel,如果我下面的回答对您有帮助或者您认为它回答了问题,请将其标记为正确答案 ;) - Daniel T. Sobrosa
对于简单的表格排序(假设表格数据已经被获取,你只是按不同属性重新排序数据),在客户端进行排序比发送另一个请求以获取排序后的数据要快得多。 - Richik SC
5个回答

153

TTFB不是响应体(如:json、xml等有用数据)中第一个字节的时间,而是接收到来自服务器的响应的第一个字节的时间。这个字节是响应头的开始。

例如,如果服务器在进行繁重的SQL查询之前发送了响应头,你会得到一个非常低的TTFB,但它并不是“真实的”。

在您的情况下,TTFB代表您在服务器上处理数据所花费的时间。

要减少TTFB,您需要更快地完成服务器端的工作。


2
为了进一步诊断TTFB期间发生的时间,您可以使用服务器端计时方法(例如设置计时器或调试日志)来调试每个逻辑所花费的时间。 - Raptor
1
看一下这篇文章,它详细解释了问题,并提供了可能解决方案的建议:http://www.websiteoptimization.com/speed/tweak/time-to-first-byte/ - LucaM
1
小心将TTFB视为最重要的点:https://blog.cloudflare.com/ttfb-time-to-first-byte-considered-meaningles/ - Owen Blacker
如果这个答案对@govindpatel有帮助,请标记它为正确的回复;) - Daniel T. Sobrosa

20

我遇到了同样的问题。我的项目在本地服务器上运行。我检查了我的PHP代码。

$db = mysqli_connect('localhost', 'root', 'root', 'smart');

我使用localhost来连接我的本地数据库。这可能是你所描述问题的原因。你可以修改你的HOSTS文件。添加以下行:

127.0.0.1 localhost.


5
谢谢。我已经将“localhost”(TTFB:1秒)更改为“127.0.0.1”(TTFB:12毫秒)。 - Doofy
在我的情况下,这个答案也帮了我:TTFB 2.39秒 -> TTFB 110毫秒。为什么有人会踩它呢? - Martin Pabst
我认为这也解决了我的Spring-Boot应用程序问题,我在Docker容器中使用Postgres数据库,TTFB达到了10秒,现在只有大约40毫秒 :) - Sepultura
2
为什么“localhost”所需的时间如此之长? - showdev

17

TTFB是在幕后发生的事情。你的浏览器不知道幕后会发生什么。

你需要查看正在运行的查询以及网站如何连接服务器。

这篇文章可能有助于理解TTFB,但否则您需要深入了解您的应用程序。


5
如果您正在使用PHP,建议在</head>之后、</body>之前或其他需要快速输出的部分(如标题或内容)中使用<?php flush(); ?>。它将输出实际代码而无需等待PHP结束。不要经常使用此功能,否则速度增加将不明显。
更多信息请参见:此处

4
我建议您阅读这篇文章,并更加关注如何优化对用户请求的整体响应(无论是页面、搜索结果等)。
一个好的例子是他们提供的使用gzip压缩页面的论据。即使没有压缩时ttfb更快,但用户的整体体验会更糟,因为需要下载未压缩的内容所以需要更长的时间。

一定要查看该文章的评论部分。许多人提出了令人信服的理由,表明应关注TTFB。 - Zack Macomber

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接