异步Javascript加载中的挑战
背景:我正在开发一个基于GWT的应用程序，它部署在Google上。我的应用程序使用了一个自定义库，它需要预先加载6-7个大核心javascript文件(大约3MB的总大小)。因此，甚至加载我的应用程序的主页，它需要从任何地方20-40秒取决于带宽。最近，我开始着手解决缓慢的页面加载问题。
我创建了一个简单的HTML主页，没有任何GWT或自定义库的组件。这个主页包含一个登录按钮和一个简单的基于jQuery的图像滑块。我正在使用基于Google帐户的身份验证。在主页上，我使用“异步有序”Javascript加载技术，这里介绍了：http://stevesouders.com/efws/loadscript.php?t=1303979716来加载所有核心.js文件。因此，当用户查看主页或与图像滑块交互时，.js文件在后台悄然下载。用户登录后，控件被重定向到主HTML文件，该文件从缓存中检索.js文件，并加载应用程序。这一次，应用程序的加载要快得多。因此，主页在2-5秒内加载，主应用程序也加载得相当快。
这正是我所需要的。但有个问题。
问题:如果用户单击登录按钮太快(即在所有异步.js文件下载完成之前)，异步下载就会中断。事实上，一旦用户从主页(到Google帐户登录页或任何其他页面)导航，所有异步下载都会中断。现在，当显示主应用程序时，它从缓存中检索部分下载的.js文件，并报告“意外的行尾”错误。
我可以做一件事来解决这个问题-禁用登录按钮，直到异步下载完成。这比当前的情况稍微好一点，因为它允许用户至少看到主页并与图像滑块进行交互。但这并不理想。
理想情况下，我正在寻找一种检查主.js文件中的散列(或文件大小)的方法，以确定它们是否正确。如果不匹配，请再次下载这些文件。但我绝不是一个Javascript专家，甚至不确定这是否可能。所以，我在这里找专家帮忙。这可能是人们用其他方式解决的一个共同问题。所以，我也对其他选择持开放态度。
谢谢。
最新情况：
- 我有多个(6-7) .js文件要加载。
- .js文件是独立的，需要按特定顺序加载。
回答 3
Stack Overflow用户
发布于 2011-05-11 04:01:56
3MB的Javascript文件非常疯狂。你真的那么需要吗？如果是这样的话，您应该使用jsmin或uglifyjs来连接/缩小它们。这将减少至少50%的规模。接下来，确保在承载这些文件的服务器上启用Next。这应该可以再减少50%的规模。
最后，您应该使用来确保这个文件永远缓存客户端。若要在src上更新查询参数，请执行以下操作：
<script src="compressed.js?v=1"></script>至于检查文件大小的散列，不完全可能，尽管您可以检查您的库是否存在引入全局命名空间的某些变量。例如：
jQueryLoaded = !!window.jQuery;Stack Overflow用户
发布于 2011-05-11 06:41:29
在这种情况下，考虑到我们要加载大约3MB的javascript，我将构建一个带有进度条的加载页面，该页面下载所有的javascript，并在显示实际站点之前显示进度。这并不会在很大程度上限制用户体验，而是让您有机会在加载时显示更新、新闻(甚至提要)、帮助消息。在加载页面上也有一个计时器，以检测是否需要太长时间，并给他们一个选项，如果需要太长时间，就可以做其他的事情，例如，在下载脚本之前，显示禁用登录的登录页面。我找到了执行这个这里和这里的脚本
Stack Overflow用户
发布于 2011-05-11 05:11:17
实际上，您可以压缩、包含版本、缩小和打包js文件，这将减少80%以上的内存占用。看看雅虎的编码恐怖。您可以使用焦耳完成所有这些工作。
https://stackoverflow.com/questions/5959005
复制相似问题
腾讯云开发者
