减少使用 jQuery UI 的页面的加载时间

Question

问题：一些 jQuery UI 效果加载速度很慢，在第一次加载页面时尤其烦人。

例如，以标签小部件为例。有时我可以在标签小部件加载之前使用 jQuery 标签在页面加载期间看到底层列表（另一个缓慢的庞然大物是手风琴小部件）。我想避免这种情况 - 即以某种方式加快速度，或者减少“JavaScript 繁重”。

我有一个优化按钮小部件的想法。在标记本身中，我可以为它们分配.button() 构造函数将分配的所有样式，然后我不必再调用.button()。但是，按钮并不是最慢的，所以这不会对我的页面加载时间产生太大影响。

类似问题：

• 对Jquery taking effect after the page is loaded 的回复表明我可以调用$(document).ready() 中的选项卡构造函数，但我已经这样做了。
• 我在这方面发现的唯一技巧是 Delay jQuery effects whilst page is loading，这可能有用，但没有多大帮助。

问题 1： 有没有一些简单的方法可以在 PHP 端 准备 jQuery 效果（如标签），然后对 jQuery UI 小部件进行一些延迟初始化（保持标签的可点击性）？

问题 2： 是否有一些好的 指南 来避免使用 jQuery UI 以不减慢速度，同时保持良好的用户经验？

Answer 1

注意：这只是回答的第一步。我打算改进它，当我有时间在 jQuery 选项卡构造函数中禁用一些东西时。

背景：

您可以为更顺畅地加载tabs 进行一些小优化。但它基本上是易于使用的权衡。您已经在 html 中添加了一些 css 类，不要等到 jQuery 为您提供它。这避免了 jQuery 接管时页面中的所有有趣动作，因为元素已经到位。

说明步骤：

1) div 包含所有选项卡：

• 您添加了ui-tabs 类，它与step2 相结合将抑制原始列表并将导航放置到位。
• 您添加了 ui-widget 类，该类将字体大小和第一个选项卡的位置固定在导航中。

2) ul 包含导航项：

• 您添加类ui-tabs-nav 完成列表重新定位。

3) 每个特定的div 包含标签面板，它是不活动的：

• 您添加style="display:none;"。无论如何，这就是 jQuery 所做的。因此，您不必在选项卡准备好后删除样式。 jQuery 为你做这件事。它也比粗略地隐藏选项卡的所有内容更精细。

4) 将 tabs 构造函数调用放入文档中也是个好主意：

$(document).ready(function(){$( "#tabs" ).tabs();}

结果：

因此，您将 html 从 original 更改为

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>tabs-1 content</p>
    </div>
    <div id="tabs-2">
        <p>tabs-2 content</p>
    </div>
    <div id="tabs-3">
        <p>tabs-3 content</p>
    </div>
</div>

收件人：

<div id="tabs" class="ui-tabs ui-widget">
    <ul class="ui-tabs-nav">
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>tabs-1 content</p>
    </div>
    <div id="tabs-2" style="display:none;"><!-- display:none is later reverted by jQuery.tabs -->
        <p>tabs-2 content</p>
    </div>
    <div id="tabs-3" style="display:none;">
        <p>tabs-3 content</p>
    </div>
</div>

结论：

• 您只是在使用 jQuery 样式。
• 在 jQuery 开始渲染之前，您的标签导航和标签面板已经就位。
• 在呈现标签后无需进行任何清理（例如：从 ul 中删除 display:none）。

Answer 2

问题1：有没有一些简单的方法可以在php端准备jQuery效果（标签）？然后做一些效果惰性初始化（保持标签可点击）？

A：没有。jQuery 正在操纵 DOM 并添加 php 无法做任何事情的事件处理程序。

问题2：在保持用户体验的同时，也可以很好地指导一些使用 jQuery UI 避免减慢速度的指南。有人知道这样的准则吗？

减少 jQuery 在准备/加载时的工作量。如果你有十几个选项卡，默认只需要加载第一个中的数据，其余的可以延迟加载。您的手风琴也是如此，让 ajax 在用户请求内容时完成工作。

在内容准备好之前不要显示内容。默认情况下将元素设置为隐藏并在初始化选项卡后显示它们。如果您决定这样做，我建议使用visibility:hidden，因为它会在页面上为您的元素保留空间，然后在准备好时将其显示出来。另一方面，display:none 会使其他页面元素被定位，就好像该元素根本不存在一样。