Уменьшите время загрузки страницы, использующей jQuery UI

Question

Проблема: Некоторые эффекты пользовательского интерфейса jQuery довольно медленно загружаются, что особенно раздражает при первой загрузке страницы.

Например, возьмите виджет вкладки. Иногда я вижу основной список во время загрузки страницы с вкладками jQuery до того, как виджет вкладки загрузился (другой медленный мамонт - виджет аккордеона). Я бы хотел избежать этого, то есть ускорить его каким-либо образом, или сделать его менее «тяжелым» JavaScript.

У меня есть идея для оптимизации виджетов кнопок. В самой разметке я мог бы назначить им все стили, которые назначил бы конструктор .button(), а затем мне больше не нужно звонить .button(). Тем не менее, кнопка не самая медленная, поэтому это не сильно повлияет на время загрузки страницы.

Похожие вопросы:

• Ответ на Jquery taking effect after the page is loaded предполагает, что я мог бы вызвать конструктор вкладок в $(document).ready(), но я уже делал это.
• Единственный трюк, который я нашел в этой области, - это Delay jQuery effects whilst page is loading, что может быть полезно, но не очень помогает.

Вопрос 1: Есть некоторый простой способ подготовить JQuery эффекты (например, вкладка) на PHP стороне, а затем сделать некоторую ленивую инициализацию виджетов JQuery UI (для поддержания кликабельности Вкладки) ?

Вопрос 2: Есть некоторые хорошие принципы для того, что избежать с JQuery UI, чтобы не замедлить его, сохраняя при этом хороший пользовательский опыт?

Answer 1

примечание: Это всего лишь первый шаг для ответа. Я намерен улучшить его, когда у меня будет время играть с отключением вещей в конструкторе вкладок jQuery.

фон:

Есть несколько небольшой оптимизации вы можете сделать для гладкой загрузки tabs. Но это в основном компромисс к простоте в использовании. Вы добавляете некоторые CSS-классы в свой html уже и не ждите, пока 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 от 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.
• Нет необходимости в очистке (например: удалить display:none из ul) после отображения вкладок.

Answer 2

Вопрос1: Есть ли простой способ, как подготовить эффект jQuery (вкладки) на стороне php? А затем сделайте некоторый эффект ленивой инициализации (чтобы сохранить вкладки кликабельными)?

A: Нет. JQuery управляет DOM и добавляет обработчики событий, которые php не могут что-либо сделать.

Вопрос2: Также может быть приятно, какое руководство следует избегать с помощью пользовательского интерфейса jQuery, чтобы не замедлить его, сохраняя при этом пользовательский интерфейс. Кто-нибудь знает о таком руководстве?

Уменьшите объем работы, которую должен выполнить jQuery при готовности/загрузке. Если у вас есть дюжина вкладок, по умолчанию загружаются только исходные данные, остальные могут быть ленивы загружены. То же самое происходит с вашим аккордеоном, пусть ajax выполняет работу, когда пользователь запрашивает контент.

Не показывать содержимое, пока оно не будет готово. Установите свои скрытые по умолчанию элементы и покажите их после инициализации вкладок. Предлагаю использовать visibility:hidden, если вы решите сделать это, потому что он зарезервирует место на странице для вашего элемента, а затем просто приведёт его в поле зрения, когда он будет готов. С другой стороны, display:none сделает другие элементы страницы такими, как если бы этот элемент вообще не существовал.