2

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

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

谢谢。

4

3 回答 3

6

压缩你的 Javascript

当使用其他插件甚至你的代码时，总是使用压缩的 js 文件。它们更小，加载速度更快。如果您看一下，您会发现 jQuery 和 jQuery Mobile 都提供压缩版本。

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

分析你的js文件加载

通过分析js文件初始化发现有问题的文件。你可以使用像Firebug这样的插件。它显示了文件的细分——只需转到“网络”选项卡。您还可以按文件类型过滤。

在此处输入图像描述

使用正确的js文件源

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

优化 Javascript 布局

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

这允许首先加载和呈现大部分页面内容（如图像、表格、文本）。用户看到内容加载，因此页面看起来是响应式的。此时，繁重的 javascript 可以在接近尾声时开始加载。

基本上在 HTML 结束时初始化您的 javascript，就在标记之前。有时这会导致 jQuery Mobile 出现问题。在这种情况下，让 jQuery 和 jQuery Mobile 在 HEAD 中初始化，并在 HTML 端初始化其他所有内容。

按需加载 Javascript

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

功能：

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

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

缓存您的文件：

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

合并您的文件

最后，当其他一切都停止时，您应该将您的 js 代码合并到一个文件中。您的浏览器一次只能打开这么多与网站的连接——考虑到设置每个连接的开销，将几个小脚本组合成一个更大的脚本是有意义的。

压缩一切

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

于 2013-05-20T10:06:41.327 回答
0

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

于 2013-05-20T10:11:33.087 回答
0

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

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

如果您的应用程序是基于 Web 的应用程序，请考虑使用可用的缓存机制。本教程将帮助您开始使用缓存。

于 2013-05-20T09:55:22.520 回答