Question

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

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

当然我可以在主＆lt; head＆gt;中加载这些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 croaks：“TypeError：a.mobile.datebox is undefined”...）和jquery插件：看起来它们没有被评估...（即使它们在那里，在＆lt; head＆gt;部分结束之前，在“Generated Source”处查看...）。

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

任何提示？

Answer 1

如果符合以下条件，那么单页方法可以适用于移动设备：

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

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

如果符合以下条件，则单页方法不太好：

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

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

通常，您希望进行这些类型的优化：

压缩/缩小所有javascript。
减少必须加载的单独项目的数量（样式表，javascript文件，图像）。
减少必须加载的连续事物的数量（加载一个，等待它加载，加载另一个）。移动在往返旅途中很糟糕并且装载了大量资源。加载一些东西是可以的。
让浏览器轻松缓存javascript文件。使用一些常见的javascript文件，每个文件都可以满足许多页面的需求。如果用户将访问您网站上的许多连续页面，那么在开始时加载一点，然后允许从所有未来页面加载的缓存加载javascript文件。外部CSS文件也是如此。
非常小心很多图像，甚至是小图像。加载页面的大量http请求对于移动设备上的加载时间不利，并且您请求的每个图像都是http请求（除非它来自浏览器缓存）。
确保您的服务器配置为最大限度地提高可以有效缓存的内容的浏览器缓存。

其他需要注意的事项：

默认情况下，脚本文件的动态加载是异步和无序的。如果您的脚本文件必须按特定顺序执行，那么您将不得不动态加载它们，或者您必须编写代码（或使用库）以按所需顺序序列化它们的执行。

Answer 2

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

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

Answer 3

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

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

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

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

不确定您是否遇到任何语法问题，但您当然可以使用正确的源代码将新的脚本元素注入头部，并且会启动下载（就像您使用css一样。但您可能知道那; D）

干杯

Answer 4

我只是在一个文件中组合/缩小并压缩所有JS并始终加载它。这是（正确的缓存），只下载一次，因此您不必担心性能太多。

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

我经常只是在</body>和标记之前添加它。另请注意，除.live()为deprecated之外，它还是slow as hell。所以不要使用它，而是使用.on()。

html5：一个很好的加载方法？

4 个答案: