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

Question

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

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

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

类似问题：

• 页面加载后对Jquery 生效的响应表明我可以在 中调用选项卡构造函数$(document).ready()，但我已经在这样做了。
• 我在这方面发现的唯一技巧是在页面加载时延迟 jQuery 效果，这可能很有用，但没有多大帮助。

问题 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) 将标签构造函数调用放入准备好的文档中也是个好主意：

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

结果：

所以你从原来的改变你的html

<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 开始呈现之前，您的选项卡导航和选项卡面板已经就位。
• 呈现选项卡后无需任何清理（例如：display:none从 中删除ul）。