Question

我需要加快jquery mobile的ui加载时间。当我尝试使用head.js方法并行加载js文件时，它会在显示基本的html页面后显示jQuery移动UI仅3-5秒。我也尝试过CDN托管的js文件，它与下载的js文件没有任何区别。

有没有办法缓存jquery mobile js文件，这样会加速ui渲染？

感谢。

Answer 1

压缩您的Javascript

使用其他插件甚至代码时，始终使用压缩的js文件。它们更小，加载速度更快。如果你看看你会看到jQuery和jQuery Mobile提供压缩版本。

您还应该压缩您的js文件。 Packer工具很容易找到。

分析您的js文件加载

通过分析js文件初始化来查找有问题的文件。您可以使用 Firebug 等插件。它显示了文件的细分 - 只需转到“网络”选项卡即可。您也可以按文件类型进行过滤。

enter image description here

如果要创建Phonegap应用程序，所有js文件都应存储在本地，但如果您将其用作普通的Web应用程序，则使用问题中提到的CDN源。

如果可能，将您的javascript放在HTML文件的末尾。请注意Google分析和其他统计跟踪软件在结束标记之前是如何做的。

这允许首先加载和呈现大多数页面内容（如图像，表格，文本）。用户看到内容加载，因此页面看起来响应。在这一点上，沉重的javascripts可以在接近结束时开始加载。

基本上在标记之前在HTML端初始化您的javascript。有时这会给jQuery Mobile带来问题。在这种情况下，让jQuery和jQuery Mobile在HEAD和HTML端的其他所有内容中初始化。

在加载主要内容后，应该以programaticaly方式加载所有不必要的js文件。

功能：

$import('http://example.com/myfile.js')

会在文档的头部添加一个元素，就像直接包含文件一样。

如果您使用PHP作为服务器技术，则可以使用兑现来提高加载性能。基本上您将设置浏览器的缓存过期时间。为此，您需要访问PHP或Apache的.htaccess，以便您可以发送回某些缓存标头（有关缓存的更多信息）。

最后当其他一切都刹车时，你应该将你的js代码组合成一个单独的文件。您的浏览器一次只能与一个网站建立这么多连接 - 考虑到设置每个连接的开销，将几个小脚本组合成一个较大的脚本是有意义的。

compression的好处，通常是文件大小减少75％或更多，太好了，不容忽视：使用HTTP压缩优化您的网站。此方法不适用于较旧的浏览器，但由于您使用的是jQuery Mobile，因此无需担心旧浏览器。

Answer 2

鼓励使用CDN是因为，如果在多个站点上共享相同的CDN，则将从缓存中使用这些文件。

如果您使用的是Android或iPhone WebView，则建议您不要使用CDN，因为它会禁用离线功能。

如果您的应用是基于网络的应用，请考虑使用可用的缓存机制。这tutorial will get you started with caching。

Answer 3

如果您使用的是Android WebView，则可以从Android应用的assets文件夹中加载js。这是非常气馁的，因为每次更新js都需要更新应用程序，但在某些情况下，这是最好的解决方案。