1

我正在编写我的第一个 HTML5 + jquery.mobile 网络应用程序。该应用程序基本上是一个菜单，它重定向到在同一 index.html 中定义的内部页面 (data-role="page")。我不会将页面写为外部文件以避免重新加载和重写 - 基本上 - 相同的 <head>：我想跳转到内部标签比加载新页面更快......

现在，我有一个页面需要一些特定的 jquery 插件和一些特定的 css。没有其他页面需要这些插件或 CSS。

当然，我可以在 <head> 主部分加载这些 js/css，但是这种方法会减慢第一页的加载速度，毫无用处。

我可以用 CSS 解决问题，方法是：

$('head:first').append('<link rel="stylesheet" type="text/css" href="' + file + '" />');

我什至可以用 JS 解决问题，但仅限于“标准”JavaScript，例如：

<script>
    $(document).ready(function() {
        $('#page-availability').live('pageinit', function () {
            $.getScript("js/jqm-datebox.core.js");
            $.getScript("js/jqm-datebox.mode.calbox.js");
            $.getScript("js/jquery.mobile.datebox.i18n.en.utf8.js");

            $('#datepicker').data({
                "mode": "calbox",
                ...
            });
            ...
        });
        ...
    });

不幸的是，这种方法似乎不适用于 jquery 插件（萤火虫呱呱声：“TypeError：a.mobile.datebox 未定义”......）：看起来它们没有被评估......（即使它们在那里，在结束之前<head> 部分的，查看“生成的源”...）。

我正在使用 Firefox (15) 进行调试，但我想这不是重点......

有什么提示吗？

4

4 回答 4

3

如果满足以下条件，单页方法可能适用于移动设备：

  1. 您无需加载太多额外内容即可支持用户可能从该页面显示的所有内容。
  2. 您不必加载太多代码来支持所有行为。
  3. 典型的用户实际上确实会访问几个不同的虚拟页面，因此该方案可以节省它们的加载时间，并使后续虚拟页面加载速度更快。

做得好，用户在加载第一页时获得了良好的性能，并且在进入其他“嵌入式”页面时获得了非常快的性能，而这些页面不必通过网络加载新内容。

在以下情况下，单页方法不太好：

  1. 由于必须加载的东西量很大，初始加载时间只是超过了它的价值。
  2. 无论如何，您必须动态加载子页面的内容。
  3. 您有 SEO 问题，因为搜索引擎无法真正找到/正确索引您的所有虚拟页面。

所以，最后，这是一个真正的权衡，很大程度上取决于东西有多大，你要加载多少东西，以及实际性能如何。如果页面保持非常轻量并且每个页面必须满足的请求非常少，那么紧凑的移动站点可以非常快速地从一个页面到下一个页面提供服务器加载的页面视图。

通常，您希望进行以下类型的优化：

  1. 压缩/缩小所有 javascript。
  2. 减少必须加载的单独项目的数量（样式表、javascript 文件、图像）。
  3. 减少必须加载的顺序事物的数量（加载一个，等待加载，加载另一个）。移动设备不擅长往返和加载大量资源。加载一些东西没问题。
  4. 使浏览器可以轻松缓存 javascript 文件。使用一些常见的 javascript 文件，每个文件都可以满足许多页面的需求。在开始时加载更多，然后允许在所有未来页面加载时从缓存中加载 javascript 文件，如果用户将访问您网站上的许多连续页面，那就更好了。外部 CSS 文件也是如此。
  5. 非常非常小心很多图像，即使是小图像。为了加载页面而进行的大量 http 请求对移动设备的加载时间不利，并且您请求的每个图像都是一个 http 请求（除非它来自浏览器缓存）。
  6. 确保您的服务器配置为最大化浏览器缓存，以获取可以有效缓存的内容。

其他需要注意的事项：

  1. By default dynamic loading of script files is asynchronous and unordered. If your script files must execute in a specific order, then you will have to either not load them dynamically or you will have to write code (or use a library) that serializes their execution in the desired order.
于 2012-08-30T21:41:30.080 回答
1

$.getscript 是一个简写的 AJAX 函数，它接受一个回调作为第二个参数。查看文档： http ://dochub.io/#jquery/jquery.getscript

您可以连接这些脚本，然后在回调中执行您的操作。

于 2012-08-30T21:39:35.870 回答
1

这与旧的 Flash 资源加载问题并没有太大的不同。

我的策略是什么？仅加载初始页面视图所需的内容。当它被加载并且用户可以查看页面/应用程序时，逐步加载所有其他资产。

如果资产特别重，那么我将禁用指向该特定页面的链接，直到加载所需的资产。

在这种情况下，您可能会在一开始就禁用指向特定页面的链接，启动其资产的加载，并在它们准备好时启用该链接。

不确定您是否有任何语法问题，但您当然可以使用正确的源将新的脚本元素注入头部，它会启动下载（就像您使用 css 所做的那样。但您可能知道 ;D )

干杯

于 2012-08-30T21:40:55.567 回答
0

我只需将所有 JS 合并/缩小并压缩到一个文件中，然后始终加载它。这是只下载一次的东西（具有正确的缓存），因此您不必过多担心性能。

当然我可以在主要部分加载这些 js/css

我经常只是在</body>and 标签之前添加它。.live()另请注意，除了已弃用的事实之外，它的速度也很慢。所以不要使用它，而是使用.on().

于 2012-08-30T21:41:15.190 回答