AngularJS性能与页面大小

Question

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

1. 对于较小的带宽，500KB压缩过高吗？人们声称它需要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

由于angular.js本身的压缩大小为[[57kb，因此，此初始页面调用的加载量似乎是angular.js的10倍之多。

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

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

Answer 3

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