html5:一个好的加载方法？

Question

我正在编写我的第一个HTML5 + jquery.mobile web应用。这个应用程序基本上是一个菜单，它重定向到在同一页面中定义的内部页面(data-role=“index.html”)。我不会将页面写为外部文件，以避免重载和重写--本质上是相同的:我认为跳转到内部标记比加载新页面更快……

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

当然，我可以在主要部分加载这些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",
                ...
            });
            ...
        });
        ...
    });

不幸的是，这种方法似乎不起作用(firebug发出"TypeError: a.mobile.datebox is undefined“的声音……)使用jquery插件:看起来它们没有被评估...(即使它们在那里，在小节结束之前，查看"Generated Source"...)。

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

有什么提示吗？

Answer 1

单页方法在以下情况下适用于移动设备：

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

做得很好，用户在加载第一个页面时表现良好，当转到其他不需要通过网络加载新内容的“嵌入式”页面时，性能非常快。

单页方法在以下情况下不是很好：

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

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

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

1. Compress/minify all javascript.
2. Reduce必须加载的单独项目的数量(样式表、javascript文件、图像)。
3. 减少了必须加载的顺序对象的数量(加载一个，等待它加载，加载另一个)。Mobile在往返和加载大量资源方面表现不佳。它可以加载一些东西，
4. 使得浏览器缓存javascript文件变得容易。使用一些常用的javascript文件，每个文件都可以满足多个页面的需要。如果用户要访问站点上的多个连续页面，那么在开始时加载更多，然后允许在以后所有页面加载时从缓存中加载javascript文件是更好的方法。对于外部CSS文件也是如此，
5. 非常非常小心的处理大量的图片，甚至是小图片。为了加载页面而发出的大量http请求不利于移动设备上的加载时间，并且您请求的每个图像都是一个http请求(除非它来自浏览器缓存)。
6. 请确保将您的服务器配置为最大限度地利用浏览器缓存来缓存可以有效缓存的内容。

其他需要注意的事情：

1. 默认情况下，脚本文件的动态加载是异步和无序的。如果您的脚本文件必须以特定的顺序执行，则您要么不能动态加载它们，要么必须编写代码(或使用库)以按所需的顺序序列化它们的执行。

Answer 2

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

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

Answer 3

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

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

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

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

我不确定你是否有任何语法问题，但是你当然可以用正确的源码将一个新的脚本元素注入到head中，它将引发下载(就像你对css所做的那样)。但你可能已经知道了;D )

干杯