异步Javascript加载中的挑战

背景：我正在开发一个部署在Google App Engine上的基于GWT的应用程序。我的应用程序使用自定义库，需要提前加载6-7个大型核心javascript文件（总大小约为3MB）。因此，即使要加载我的应用程序的主页，也需要20-40秒，这取决于带宽。最近，我开始着手解决页面加载缓慢的问题

我制作了一个简单的HTML主页，没有任何GWT或自定义库的组件。此主页包含一个登录按钮和一个简单的基于jQuery的图像滑块。我正在使用基于Google帐户的身份验证。在主页上，我使用这里介绍的“异步有序”Javascript加载技术：加载所有核心.js文件。因此，当用户查看主页或与图像滑块交互时，.js文件会在后台悄悄下载。用户登录后，控件被重定向到主HTML文件，该文件从缓存中检索.js文件，并加载应用程序。这一次，应用程序的加载速度明显加快。因此，主页加载只需2-5秒，主应用程序的加载速度也相当快

这正是我需要的。但有一个问题

问题：如果用户点击登录按钮太快（即在所有异步.js文件下载完成之前），异步下载将中断。事实上，一旦用户离开主页（到Google帐户登录页面或任何其他页面），所有异步下载都会中断。现在，当显示主应用程序时，它会从缓存中检索部分下载的.js文件，并报告“意外的行尾”错误

我可以做一件事来解决这个问题——禁用登录按钮，直到异步下载完成。这比当前情况稍微好一些，因为它允许用户至少查看主页并与图像滑块交互。但这并不理想

理想情况下，我正在寻找一种方法来检查主HTML中.js文件的散列（或文件大小），看看它们是否正确。如果不匹配，请再次下载文件。但无论如何，我都不是Javascript专家，甚至不确定这是否可能。所以，我在这里寻求专家的帮助。这可能是人们用其他方式解决的常见问题。所以，我也愿意接受其他选择

谢谢

更新：

我有多个（6-7）.js文件要加载

js文件是独立的，需要按特定顺序加载

---

3MB的Javascript文件非常疯狂。你真的需要那么多吗？如果是这样的话，你应该考虑使用jsmin或uglifyjs来浓缩/缩小它们。这将使尺寸至少减少50%。接下来，确保在承载这些文件的服务器上启用了gzip。这将使尺寸再减少50%

最后，您应该使用expires头来确保此文件永久缓存客户端。要取消缓存并更新src上的查询参数，请执行以下操作：

<script src="compressed.js?v=1"></script>

---

实际上，您可以压缩、包含版本、缩小和捆绑js文件，这将占用的空间减少80%以上。看一看。您可以使用

完成所有这些。在本例中，考虑到我们需要加载大约3MB的javascript，我将构建一个加载页面，带有进度条，下载所有javascript，并在显示实际站点之前显示进度。这并没有将用户体验限制到任何显著程度，而是为您提供了在加载时显示更新、新闻（甚至提要）、帮助消息的机会。在加载页面上还有一个计时器，用于检测是否需要太长的时间，如果需要太长的时间，则给他们一个选项来执行其他操作，例如，在下载脚本之前显示禁用登录的登录页面。我已经找到了这样做的脚本，

查看labjs，它可以帮助您更快地加载脚本。还有，你的脚本只是一个大文件吗？或多个files@lbu-谢谢你的信息。快速问题-当用户离开页面导航时，labjs能否解决异步下载被破坏的问题？我有6-7个不同的.js文件要加载，它们需要按照特定的顺序加载。谢谢你的回复。实际上，我不想命名我正在使用的库，但它对于GWT来说是一个非常流行的库。好了，那些.js文件已经缩小了。GAE会自动为我做gzipping。我将Excel页眉设置为1个月，但会考虑根据您的建议更改它。所以，是的，我在一定程度上研究了这些方面。现在来看看你关于检查变量存在性的建议，我可以这么做。但是，如果该变量不存在，我将如何再次“强制下载”该文件？谢谢。也许使用require.js（）或yepnope（）之类的东西。这些都是非常好的建议，我相信我会在当前和未来的项目中找到它们的用途。但对于当前的问题，我正在寻找一种不同的方法。允许我检查缓存中的文件（通过哈希、大小等）并查看其是否完整。如果没有，请再次强制下载该文件。谢谢

jQueryLoaded = !!window.jQuery;