AngularJS性能与页面大小

Question

我的网站压缩了约500 KB的内容，包括js，css和图像。它基于AngularJS构建。我公司中的许多人都抱怨该站点在较低带宽下运行缓慢。我想回答几个问题，

1. 500KB Gzip压缩对于较低带宽是否太高？人们声称它需要20秒才能加载到他们的机器上，我认为这很夸张。真的是由于anugularJS及其评估时间造成的吗？

2. 在较小的带宽中，应用程序的大小有何关系？如果我的站点为500KB，并且通过创建自定义框架将其减少到150KB，那么它对降低带宽有帮助吗？如果是这样，多少钱？

Answer 1

这都是主观的，“低带宽”的定义相当广泛。但是...使用https://www.download-time.com/，您可以大致了解在不同带宽上下载500Kb需要多长时间。

因此，在任何高于512Kbps的连接上（最低aDSL速度，现在大多数速度都高于5Mbps，并且3G移动设备处于同一水平），文件大小不太可能成为问题。

如果“低带宽”还意味着“有限的硬件”（RAM，CPU），则性能问题可能在于解压缩和处理应用程序。 Angular反应灵敏，但低端硬件可能会遇到困难。

上述根本原因足以证明使用您自己的自定义框架重写应用程序。

但是，最可能的问题是您的角度应用程序在初始化时需要使用的任何资产/资源/模板-图像，JSON文件等。如果没有特定的细节，这很难弄清楚-每个应用程序都是不同的。好消息是您不需要重写应用程序-您应该能够使用现有的应用程序并对其进行调整。我假设500Kb的应用程序如果不重写就无法减小大小，并且速度问题归结为在启动过程中加载了其他资产。

我将使用Google Chrome的开发人员工具来查看发生了什么。 “性能”选项卡具有一个选项，可以模拟各种类型的网络状况。通过“网络”标签，您可以查看加载了哪些资产以及花费了多长时间。我将查看哪些资产需要时间，并查看其中哪些可以延迟加载。例如，如果应用程序在启动时正在加载非常大的图像文件，则可能会被延迟加载，从而使应用程序能够更快地响应最终用户。 改善感知性能的常用方法是使用lazy loading。

Answer 2

要减少加载时间，只需处理缓存并找到合适的下载工具即可计算文件的下载速度。您可以使用https://downloadtime.org作为参考。如果您有任何问题，请通知我。另外，为了减少页面加载时间，请尝试创建JavaScript功能块，这些功能块仅包含例如索引页以减少加载时间。

Answer 3

由于angular.js本身的压缩大小为 57kb ，因此看来，此初始页面调用的负载量是angular.js的10倍。 / p>

要减少页面加载时间，请尝试创建javascript个功能块，这些功能块仅包含例如索引页以减少加载时间。

例如，当您使用Webpack时，建议的默认最大文件大小约为244kb see here