我的网站加载延迟答案

【问题标题】：Loading delay on my website我的网站加载延迟
【发布时间】：2016-06-01 08:00:15
【问题描述】：

我使用 angularjs 构建前端，但我对性能不满意。我对 angularjs 使用了很多最佳实践（例如 ::） - 但仍然 - 我有一个奇怪的延迟，我不知道它来自哪里。看这张图片：

在 1000 毫秒和 1600 毫秒之间没有发生太多事情。有没有人经历过 angularjs 以及如何解决这个问题的任何提示？

我的网站：https://migranthire.com

没有发生任何事情并不是 100% 正确的——它为指令加载模板。但为什么要花 600 毫秒？模板真的很小。

【问题讨论】：

您可以在编译步骤中将模板加载为字符串。

标签： javascript angularjs rendering loading

【解决方案1】：

您似乎遇到了一些性能问题，我首先要解决的是 TTFB，因为这很可能可以通过一些服务器配置调整来解决。通过选择网络请求并点击“时间线”选项卡来检查时间线，以查看有关它停止的通信部分的更多详细信息（TTFB 似乎是从这里开始的，这意味着服务器需要很长时间才能响应，所以没有一个角度问题，而是服务器配置或云端）。如果可能，请检查服务器上的资源使用情况，或者在可能或响应时间更好的情况下考虑使用其他服务。

在 Angular 方面，它真的只对分析非缩小代码有用。如果您在本地使用未缩小的代码，您可以进入 Profile 选项卡并记录快照或使用主 Timeline 选项卡并记录初始加载，然后查看脚本执行的自下而上视图以查看其花费最多时间的位置.

要消除等式中的角度，您可以使用 curl 和 time。

time curl 'https://migranthire.com/pages/landingpage/landingpage.d9acd03520f27796.html' -H 'Pragma: no-cache' -H 'Accept-Encoding: gzip, deflate, sdch' -H 'Accept-Language: en-US,en;q=0.8' -H 'Accept: text/html' -H 'Referer: https://migranthire.com' -H 'Connection: keep-alive' -H 'Cache-Control: no-cache' --compressed

【讨论】：

非常有见地 :) 我一定会用 TTFB 检查。我只是想知道，因为我使用的是 AWS Cloudfront（所有文件都是从 S3 提供的）。可能是配置问题。我现在无法检查，但我认为问题也存在于 localhost（只是一个简单的 nodejs 服务器）
看来您对 TTFB 的看法是正确的——我的模板每个需要 130 毫秒 (TTFB)。这是荒唐的。我正在使用 AWS CloudFront - 我可以在那里做什么？（边缘位置设置为欧洲 - 我在欧洲 - 所以这不应该是问题）
@FabianLurz 抱歉，我没有使用 CloudFront，所以我不能真正谈论那里的优点或失败，昨晚（CST）的一些谷歌搜索确实提出了很多关于 Cloudfront 响应时间的投诉。在稍微调整的中等 EC2 实例上，我通常会在 30ms +/-20ms 左右获得 TTFB，并且通常在 50-70ms 左右加载完整响应（角度本身是 180ms 的异常值）。如果您通过 nginx 或 apache 在本地遇到缓慢（两者都将能够使用内核直接从磁盘提供文件），那么可能是时候分析非缩小代码以查看可以削减的内容。
您可能还想尝试使用 Apache bench 和/或 siege 以获得更准确的负载响应时间结果
好的 - 所以问题基本上是，CloudFront 总是有一个“RefreshHit” - 这意味着必须从 S3 中获取数据 - 这很慢。您必须为 CloudFront 中的对象设置 TTL - 如果它为 0，您的 TTFB 会很慢。