Я хотел бы заставить браузер ждать, пока все css не будут вычислены до отображения страницы.Как приостановить рендеринг браузера до вычисления css?
Моя цель состоит в том, чтобы избежать эффекта «визуального сбоя» (упомянутый here) между обычным html-рендерингом и css-рендерингом. Моя цель - просто понять, как и как я могу получить этот уровень контроля в браузере.
Возможно ли это, и как?
Лучшим советом является загрузка ваших CSS-файлов в начало вашей страницы и загрузка JS непосредственно перед закрывающим телом.
Если вы уже это сделаете, перейдите на вкладку «Сеть» инструментов разработчика (в Chrome), чтобы узнать, задерживает ли сеть доставку ваших файлов CSS.
Я не думаю, что вы можете сделать что-то, что вы можете сделать в стандартном смысле, избегая «глюка», как вы его называете. Возможно, там есть программное обеспечение, которое могло бы служить вашим файлам определенным образом, но даже если это было возможно, как это происходит?
Большинство браузеров в эти дни будут очень быстро загружать HTML и CSS, и вы никогда этого не заметите.
Если у вас возникли проблемы с перебоями, это может быть связано с загрузкой ресурсов на страницу после этого, а не на самом самом CSS.
Подумайте об активах, таких как изображения, скрипты и даже веб-шрифты. Они также должны загружаться. Если ваш дизайн страницы полагается на эти активы для достижения макета каким-то образом, то, конечно, он будет иметь небольшой эффект сбой, потому что ему необходимо загрузить.
Я думаю, что было бы невозможно вычислить, когда CSS загружен, так как это делается на стороне клиента. Вы не можете ожидать, что браузеры браузеров и интернет-пользователей будут доступны до такой степени, что вы будете обслуживать его, когда будете готовы.
Если вы получаете рендеринг шрифтов (прыжки) глюки, посмотрите на эту статью: http://paulirish.com/2009/fighting-the-font-face-fout/
Если это не связано с этим, я настоятельно рекомендую вновь думать, как ваши страницы были объединены.
Надеюсь, это поможет в некотором роде.
Как построить свою страницу? Не должно быть никаких сбоев, если ваши файлы css импортируются только в элемент head. У вас есть ссылка на небольшую страницу, демонстрирующую этот эффект? Вы уверены, что не изменяете размеры внешних элементов (например, изображений) после загрузки? –
В каком браузере вы это наблюдаете? –
@dystroy Я ссылаюсь на свои файлы css в элементе head. Насколько я понимаю, браузер постоянно обновляет страницу (я вижу десятки «красных» событий при использовании инструмента Google Speed Tracer), поэтому имеет смысл, что я вижу сбой, если css занимает 1 секунду, чтобы скачать, не так ли? – tucson