背景：

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

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

结果：

所以你从original

更改你的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;"> <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）。

Answer 2

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

答：不会.jQuery正在操纵DOM并添加php无法做任何事情的事件处理程序。

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

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

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

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

2 个答案:

背景：

解释步骤：

结果：

结论：