Запретить отображение неустановленной страницы при обновлении страницы

Question

Как я могу запретить моей странице отображать нестандартный вид во время загрузки страницы? Я думаю, что это, вероятно, из-за порядка загрузки различных JavaScript-файлов. Есть ли лучшая практика, например, загрузка плагинов перед моим собственным кодом? Должна ли каждая jQuery / .js-функция вызываться после document.ready или windows.load?

ссылка на страницу

Спасибо

Answer 1

YSlow даст вам несколько хороших идей для начальных точек на этой странице. Цитирование из запуска на вашем www.cewas.org :

1. Оценка D вкл. Уменьшить количество элементов DOM. На странице 1489 элементов DOM. Сложная страница требует больше байтов для загрузки, а также означает более медленный доступ к DOM в JavaScript. Уменьшите количество элементов DOM на странице, чтобы повысить производительность.

2. Оценка E: сделать меньше HTTP-запросов. На этой странице есть 11 внешних сценариев Javascript. Попробуйте объединить их в один. Эта страница имеет 5 внешних таблиц стилей. Попробуйте объединить их в один. Уменьшение количества компонентов на странице уменьшает количество HTTP-запросов, необходимых для отображения страницы, что приводит к более быстрой загрузке страницы. Вот несколько способов уменьшить количество компонентов: объединить файлы, объединить несколько сценариев в один сценарий, объединить несколько файлов CSS в одну таблицу стилей и использовать CSS-спрайты и карты изображений.

3. Степень F на Сжать компоненты с помощью gzip. Существует 15 текстовых компонентов, которые нужно отправлять в сжатом виде ... Сжатие сокращает время отклика за счет уменьшения размера HTTP-ответа. Gzip является наиболее популярным и эффективным методом сжатия, доступным в настоящее время, и обычно уменьшает размер ответа примерно на 70%. Примерно 90% современного интернет-трафика проходит через браузеры, которые утверждают, что поддерживают gzip.

4. Оценка F на заголовках Add Expires. Существует 61 статический компонент без даты истечения срока давности. Веб-страницы становятся все более сложными с большим количеством скриптов, таблиц стилей, изображений и Flash на них. При первом посещении страницы может потребоваться несколько HTTP-запросов для загрузки всех компонентов. Используя заголовки Expires, эти компоненты становятся кешируемыми, что позволяет избежать ненужных HTTP-запросов при последующих просмотрах страницы. Заголовки Expires чаще всего связаны с изображениями, но их можно и нужно использовать на всех компонентах страницы, включая скрипты, таблицы стилей и Flash.

---

Чтобы добавить мои 2 цента: возможно, вы захотите скрыть все элементы, пока не загрузится вся страница. Похоже, это то, что вы намереваетесь использовать с индикатором выполнения, но огромное количество элементов и сценариев / стилей на вашей странице, кажется, препятствует этому. Вы можете загрузить минимальное минимальное подмножество CSS / JS / HTML, чтобы настроить индикатор выполнения, а затем загрузить остальные элементы в некоторый асинхронный Javascript, показывая полную страницу только после того, как все они загружены (как Gmail).

Answer 2

Основная проблема с вашим сайтом - это то, что вы пытаетесь загрузить все за один раз при начальной загрузке страницы.В отчете о размере документа панели инструментов веб-разработчика показано в общей сложности 1,1 МБ контента - это будет почти 750 КБ изображений и 385 КБ сценариев.Загрузка такого количества контента за один раз действительно не рекомендуется, особенно для более медленных скоростей соединения.

Очевидное решение состоит в том, чтобы скрыть все и отображать его только тогда, когда сценарии будут готовы, но это действительно плохое решение - ваши посетители будут смотреть на пустую страницу размером более 10 секунд или более.Что вы должны сделать, это реструктурировать сайт - переосмыслить свою архитектуру для этого.Веб-сайты не предназначены для загрузки за один раз - слишком много данных и одна из причин, по которой пользователям не нравятся Flash-сайты, потому что Flash должен загружать все ресурсы за один раз, и поэтому пользователи вынуждены долго сидетьвремя ожидания

Вам следует либо разбить страницы на обычные документы HTML, которые будут загружаться традиционно, либо использовать ajax для последовательной загрузки содержимого.Попросите ваш сценарий разумно изменить порядок загрузки содержимого - сначала содержимое главной страницы, а затем, когда пользователь выбирает, куда он идет, сайт за его спиной загружает ресурсы для этих страниц.Изображения - большая проблема здесь - у вас есть .7 МБ их, и загрузка всех из них блокирует загрузку сайта, включая скрипты, на очень длительное время.

Это непростая задача, но это лучший способ устранения проблемы.

Некоторые более быстрые решения ваших проблем включают в себя большинство из того, что сказал @matt b - включение сжатия gzip, объединение всех ваших скриптов и таблиц стилей в один файл и т. Д. Также следует рассмотреть возможность использования спрайтов CSS для ваших изображений, чтобыуменьшить количество HTTP-запросов.Существует большое количество плагинов jQuery, которые являются первыми кандидатами на консолидацию, и вы также дважды загружаете jQuery - добавляя почти 100 КБ к количеству вещей, которые вам нужно загрузить.

Answer 3

Он обычно известен как FOUC - Flash из неустановленного контента.Варианты в ответе выше имеют большой смысл, но это может быть невозможно исключить при любых обстоятельствах.Изначально это была проблема IE, но в последнее время она возникла гораздо чаще в Safari и, вероятно, связана с базовым методом, используемым в самом приложении браузера, и поэтому не может быть исправлена.

Иногда надстройки, такие как jQuery и typekit, могутусугубить проблему и, следовательно, уделить пристальное внимание и протестировать различные сценарии их загрузки.

Answer 4

Я полагаю, вы используете внешнюю таблицу стилей? Если вы просто вставите все свои стили на страницу, она не будет отображаться без стиля. Кроме того, поместите определение таблицы стилей перед любым кодом JavaScript в заголовке.