Что именно происходит, когда некоторый CSS-код найден на нижнем колонтитуле

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

Итак, я понимаю, что он будет выглядеть очень уродливым, перерисовывая страницу и пользователь, видя ее (FOUT - Flash of Unstyled Text - как названный экспертом). Но все же я хочу понять:

Сколько времени может перекрасить? Приблизительное значение! Я понимаю, это может зависеть от контента на странице. Что еще произойдет или может произойти?
~~Моя главная проблема прямо сейчас~~ заключается в использовании font-awesome CSS файла (внешне размещенного на своем собственном cdn, который загружает css и файлы шрифтов). Я хочу знать, что произойдет через устройства, если я поместил это в нижней части страницы или задержу его загрузку? В настоящее время он помещается в раздел <head> как

link rel= 'stylesheet' href= 'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' type = 'text/css' media = 'screen'

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

В приведенном выше случае или в случае, когда только часть документа будет затронута CSS внизу, что произойдет? Браузер перерисовывает все, и что еще? Сколько времени это займет. Предположим, font-awesome используется в 10 значках, помещенных в <i>.

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

Основывайте все на производительности на всех устройствах, а также на опыте пользователей. Спасибо.

Обновление: У меня есть что-то большее для себя и для всех. Вот функция (delayLoadCss), предлагаемая Google для css для содержимого ниже кратного. Хотя, я не собираюсь идти на эту крайность, но как насчет этого для Font-Awesome типа CSS?

Ответ 1

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

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

Итак, если вы html выглядите так:

 <head>
      <link rel="stylesheet" type="text/css" href="/css/styles.css">
      <script>
           [long loading js]
      </script>     
 </head>
 <body>
      ... content
      <script>
           [long loading js]
      </script>
 </body>

Тогда ваш css будет по-прежнему применяться сразу.

Однако, если вы структурируете его так:

 <head>
      <script>
           [long loading js]
      </script>
      <style>
          [css here]
      </style>  
 </head>
 <body>
      ... content
      <script>
           [long loading js]
      </script>
 </body>

или даже

 <head>
      <script>
           [long loading js]
      </script>    
 </head>
 <body>
      ... content
      <script>
           [long loading js]
      </script>
      <style>
          [css here]
      </style> 
 </body>

Тогда ваш css не будет применен к документу, пока после завершения js.

Во-первых, это лучшая практика, и я рекомендую полностью хранить теги стиля из вашего документа, но, конечно, из вашего документа. Внешние таблицы стилей, расположенные над вами теги script, - это способ пойти... Это верно для шрифтов, которые также могут быть украшены exss. Браузер не должен зависать при рендеринге, если ваша ссылка на него не появляется после элемента script, который привлекает внимание браузеров.

* РЕДАКТИРОВАТЬ *

Однако этот пост прямо противоречит тому, что я только что сказал.

Ответ 2

В CSS есть два каскада.

Маленький каскад: это разбор отдельной таблицы стилей

Большой каскад. Здесь браузер выполняет три "маленьких каскада" в следующем порядке:

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

Ваш вопрос о том, что произойдет, если вы ставите стили где угодно, кроме головы. Давайте обсудим:

В браузере есть своя собственная таблица стилей, сидящая в фоновом режиме
Браузер сначала загружает ваш документ HTML
Затем браузер считывает <head>
браузер загружает активы в <head>
браузер анализирует остальную часть документа, т.е. <body>. активы и правила стиля, расположенные здесь, будут обработаны последними.
последний блок <style> или последняя таблица стилей в вашем документе - это тот, чьи стили над всем остальным.

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

У всех браузеров есть FOUC (или FOUT). Продолжительность его зависит от скорости браузера и качества вашей таблицы стилей. Минимированная таблица стилей, которая применяет стили текста сразу после reset, и перед другими стилями обычно имеет наименьшее количество FOUC.

Стили в нижнем колонтитуле не блокируются от обработки, и они не будут блокировать стили в <head>. Стили в нижнем колонтитуле просто обрабатываются последним.

Ответ 3

Я ценю ответ от Jeremythuff, однако я также хотел бы ответить и надеюсь, что он вам поможет.

Приблизительно потребуется некоторое время, чтобы загрузить файл CSS (если не кешировать, а не вставить) + мгновение. Этот момент зависит от CPU, GPU, HD-скоростей (если они кэшированы) и контента + скриптов, как вы уже упоминали. В реальной практике вы не хотите использовать [link href= "..." /] в конце тела из-за времени загрузки.

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

Я рекомендую следующую схему:

HEAD > MAIN CSS > BODY > HTML > ДОПОЛНИТЕЛЬНЫЙ CSS > SCRIPTS

Если скрипты меняют поведение элементов по умолчанию (например, предотвращая щелчок ссылки), я рекомендую вместо этого ставить скрипты.

Теперь о шрифтах. По-моему, использование внешних шрифтов - плохая практика. Но если вы хотите, шрифты лучше включать в голову, потому что вы, вероятно, не можете встроить их в тег стиля. Таким образом, проблема времени загрузки возникает здесь.

10 значков ничто для современных процессоров даже на мобильных телефонах.

Мои советы просты:

(если на разных устройствах я также думаю о весе страницы из-за медленных мобильных сетей)

Имейте большой дополнительный css (значительная разница между размером html с и без css) - не включайте в конце и как [стиль]... [/style] (никогда не кэширует), ни как [link href= "..." ] (занимает время загрузки).
Сделайте небольшой дополнительный css - попробуйте с [style]... [/style] в конце тела перед скриптами.
Не беспокойтесь о 10-иконах, беспокоиться о времени загрузки для 1-го посетителя (для шрифтов).

Ответ 4

Ваши вопросы интересны... Но есть проблема:

Таблицы стилей CSS должны быть помещены в `<head>`!!

(кроме случаев, когда они вычеркнуты)

В противном случае ваша html-разметка недействительна. Затем каждый браузер может обрабатывать его по-разному.