Ответ 1

Это происходит потому, что событие DOMLoaded запускается достаточно миллисекунды до того, как на самом деле будет отображаться страница.

В двух словах это означает, что вам нужно оптимизировать скорость своего сайта. Это не означает, что загрузка выполняется быстрее, но это означает, что загрузка выполняется в правильном порядке неблокирующим способом.

Шаг первый: Ваша разметка

1) Кажется, что вы можете сделать, чтобы оптимизировать разметку. Во-первых, порядок таблиц стилей и JavaScripts можно оптимизировать. Чтобы файлы CSS загружались асинхронно, вы всегда должны включать внешний CSS перед внешними файлами JavaScript. style.css загружается после некоторых/всех ваших вызовов JavaScript.

В голове находится один script блок между внешним файлом CSS и другим ресурсом. Чтобы разрешить параллельную загрузку, переместите встроенный script перед внешним файлом CSS или после следующего ресурса.

2) Ваш основной файл JavaScript встроен в вашу разметку. Это не только блокирует загрузку страницы до тех пор, пока script не закончит загрузку, а будет иметь ее до того, как ваш контент, вероятно, вызовет (или добавит) белую вспышку.

Загрузка вашего script асинхронно в голове - это мой предпочтительный метод. Затем вам придется запускать ваш script, когда DOM закончит загрузку, или вы можете добиться того же результата, разместив script в нижней части тега body.

Шаг второй: использование возможностей браузера

1). Глядя на заголовки http, есть 28 элементов, которые обслуживаются как отдельные HTTP-вызовы, которые не кэшируются в браузере (включая html-страницы, jpg-изображения, таблицы стилей и файлы JavaScript).

Эти элементы явно не кэшируемые, и это можно легко устранить, отредактировав конфигурацию вашего веб-сервера.

2) Включить сжатие gzip. Большинство веб-браузеров (да, даже IE) поддерживает декомпрессию gzip, а большинство (если не все) веб-серверов поддерживают сжатие с помощью gzip. Вы даже можете переусердствовать и заглянуть в SPDY, что является альтернативным более легким протоколом HTTP (поддерживается в Chrome и Firefox).

Шаг третий: показ контента

В вашем домене подано около 30 отдельных предметов. Во-первых, рассмотрите, как можно уменьшить количество запросов. 30 запросов HTTP-запросов на страницу много. Вы можете бороться с этим, используя следующие методы:

1) Параллельные загрузки по нескольким именам хостов. Браузеры в настоящее время ограничивают количество одновременных подключений к одному домену. Обслуживание изображений из отдельного домена (например, img.bigtim.ca) позволяет им обслуживаться параллельно с другим контентом.

2) Объедините несколько элементов в один. Многие загружаемые элементы представляют собой чисто стильный контент, такой как логотип, элементы меню и т.д. Их можно объединить в одно изображение (загружается только один раз) и разделять с помощью CSS. Это называется написанием CSS. Qaru делает следующее: смотрите здесь.

3) Если вы не можете уменьшить количество элементов, требующих загрузки, вы можете уменьшить нагрузку на свой сервер (и, в свою очередь, клиентский браузер), предоставляя статический контент из файла cookieless. Qaru делает это со всем их статическим содержимым, таким как изображения, таблицы стилей и скрипты.

Шаг четвертый: оптимизируйте свой собственный код

Только так много технологий HTTP и браузера могут сделать, чтобы помочь вашему сайту ускорить работу. Этот последний шаг зависит от вас.

1) Есть ли причина, по которой вы сами выбираете jquery? На странице загрузки Jquery показаны несколько CDN, где вы можете указать для быстрой загрузки кешированных script.

2) В ваших таблицах стилей содержится более 20 неиспользуемых правил CSS (это 36% всего вашего CSS файла). Подумайте о том, что действительно необходимо.

3) Основной фрагмент JavaScript (в верхней части тега вашего тела) кажется взломанным, чтобы попытаться ускорить процесс, но, вероятно, ничего не помогает.

Файл cookie устанавливается для указания того, исчезла ли страница в данный момент. Вы не только используете JavaScript для выполнения перехода, который может быть успешно выполнен с помощью CSS, но более половины из script используется для определения функциональности для чтения и записи файла cookie.

Увидев такие вещи: $("body").css ("background-image", "url('images/background.png')"); и $("#website").show (); обычно меня разглагольствует о "разделении проблем", но этот ответ достаточно длинный, поэтому, надеюсь, вы увидите, что плохой практикой является сочетание стиля и функциональности в тот же код.

Приложение: если посмотреть на код, нет необходимости в jquery вообще выполняйте то, что вы делаете. Но опять же, нет необходимости выполняйте то, что вы делаете, поэтому вы, возможно, JavaScript вообще.

Ответ 2

Переместите свой javascript в конец html перед закрытием тегов тела. Иногда это помогает.

Ответ 3

Я знаю, что это старая тема, но вот взлом, который я попытался и работает. Идея состоит в том, чтобы ничего не отображать, пока CSS полностью загружен.

в HTML файл:

<body style="display:none">

в вашем CSS, последняя строка:

body{display:block !important}

Ответ 4

CSS это блокировка рендера. Разделите свой CSS на 2 части -

• Критический CSS
• Некритический CSS

Заставьте Критический CSS загружаться со страницей. Он должен быть встроен в тег head. Сделайте некритичную загрузку CSS через ajax.

Это приведет к серьезной оптимизации производительности вашей веб-страницы, что приведет к сокращению времени на белый экран.

Кроме того, вы можете рассмотреть возможность загрузки вашего Javascript в асинхронном режиме.