Таблицы стилей CSS сверху или снизу? или Как решить проблему с пустой страницей?

Я помещал таблицы стилей сверху (между <head></head>) html. Насколько я понимаю, это лучшая практика. (например, http://stevesouders.com/hpws/css-bottom.php)

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
Blah..
</body>
</html>

Затем, когда я устанавливаю test.css, я получаю прогрессивный рендеринг.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
Blah..
<link rel="stylesheet" href="test.css" />
</body>
</html>

Насколько я понял и до сих пор понял, это должно быть наоборот. Возможно, есть и другие факторы, которые я забыл?

Ответ 1

Google быстро разрушает традицию "принадлежности" стилей в голове. Они действительно рекомендуют, чтобы критический стиль принадлежал либо тегу <head>, либо даже встроенному, но к этому нужно добавить другие несущественные стили после закрывающего тега </html>. Это работает на большинстве, если не во всех современных браузерах (я не тестировал все).

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

Помните, что CSS был выпущен почти 20 лет назад (1996), поэтому неудивительно, что Google (и другие) манипулируют и вытесняют традиционные параметры концепции.

Смешно простой пример:

<!DOCTYPE html>
<html>
<head>
    <title>It a Brave New World</title>
    <link rel="stylesheet" type="text/css" href="css/critical_styles.css" />
</head>
<body>
    <!-- best page ever -->
</body>
</html>
<link rel="stylesheet" type="text/css" href="css/bulky_nonessential_styles.css" />

Ответ 2

CSS должен быть определен в вашем <head>.

Таким образом, по мере того, как элементы загружаются в DOM, они будут отображать с соответствующими стилями, применяемыми немедленно.

Ответ 3

Следует помнить, что когда ваш браузер сначала загружает файл CSS, он обычно кэширует его, хотя Internet Explorer не кэширует файлы CSS, загруженные другими файлами с помощью @import.

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

Я помещаю все мои CSS в <head>, где он принадлежит.

Ответ 4

Противоречивая информация может быть найдена по всему Интернету.

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

    <link rel="stylesheet" href="/path/to/css.css" media="none"  onload="if(media!='all')media='all'">

Это будет использовать параметр media в качестве none, что означает, что он вообще не будет загружаться, а затем однажды загруженная страница onload поменяется на all, что заставит его загрузиться.

Также читайте больше об атрибуте media здесь:https://www.w3schools.com/tags/att_link_media.asp