Как определить, что в моем скрипте блокирует мой рендеринг HTML? - PullRequest
1 голос
/ 08 апреля 2010

У меня есть веб-приложение, которое использует немного JavaScript.

Когда страница загружается, наглядно видно, что что-то блокирует отображение определенной части веб-сайта. Эта часть создается библиотекой JavaScript Tabber Tabify.

Как я могу определить, что именно блокирует рендеринг HTML, чтобы я мог изменить свой код для предотвращения этой блокировки?

Могу ли я использовать Firebug или какой-либо другой инструмент для просмотра моего HTML / JavaScript, чтобы определить, где блокируется рендеринг HTML, и если да, то как?

UPDATE

YSlow дает моему веб-приложению оценку «А», а Page Speed ​​- 94/100.

ОБНОВЛЕНИЕ 2:

Сайт в реальном времени связан по ссылке ниже.

http://www.elite.com

Что я конкретно имею в виду, так это фактические вкладки, которые отображаются (а НЕ содержимое панели внутри панелей вкладок). Мне кажется странным, что сами заголовки вкладок так долго генерируются при загрузке первой (пустой кеш) страницы.

1 Ответ

0 голосов
/ 08 апреля 2010

Несколько возможностей:

  1. Загрузка скриптов на вашей странице блокирует рендеринг (единственное исправление для этого - поместить их в заголовок (блокирует начальный рендеринг) или в конце непосредственно перед </body> или загрузить их после загрузки страницы (например, под нагрузкой)

  2. Каким бы ни был инструмент Tabber / Tabify, нужно время для обработки содержимого ... посмотрите, есть ли способ его оптимизации.

В любом случае, если вы опубликуете какой-то код, мы, вероятно, сможем вам помочь

Обновление:

Если я загружаю страницу с очищенным кешем, я вижу на экране рендеринг контента, а затем скрывается (так как он становится скрытым контентом вкладки)

Изменение невидимого содержимого на display:none; при загрузке, а затем установка его обратно на display:block; после выполнения операции Tabify может помочь (а) ускорить рендеринг и (б) удалить любую вспышку содержимого это позже становится скрытым.

RadComboBox'ы у вас есть встроенная загрузка (что означает, что скрипты блокируют рендеринг) ... если вы можете отложить это до запуска события onload, это ускорит рендеринг.

Я бы переместил тег страницы Unica (отслеживание) и в конец вашей страницы.

У вас есть 8 внешних файлов скриптов - если есть какой-либо способ объединить их, было бы хорошо.

Для большинства этих файлов сценариев gzip не включен

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

...