В данной статье автор Steve Souders приводит наглядные доказательства, почему не стоит использовать import для загрузки стилей в документ.
Существует 2 способа загрузки файлов стилей. Использовать тег LINK:
Или импортировать файлы с помощью import:
Я предпочитаю использовать LINK для удобства, т.к. вы должны помнить, что import нужно размещать всегда в самом верху блока стилей, в противном случае они не импортируются.
Я хочу рассказать о различных способах использования LINK и import. В приведенном ниже примере прописаны 2 файла стилей: a.css и b.css. Каждый файл по загрузке занимает ровно 2 секунды, чтобы было удобно отследить влияние на скорость загрузки в дальнейшем. В первом примере используется import для загрузки обоих файлов стилей. В этом примере, называемом import import, HTML документ содержит следующий блок стилей:
Если вы всегда будете использовать только import для загрузки стилей, то проблем с производительностью не будет, хотя мы увидим ниже, это может привести к ошибке с JavaScript. Оба файла загружаются параллельно (см. рисунок 1) Но проблемы начинают появляться, если использовать import внутри файла стилей, либо вместе с LINK.
Рис. 1.
В примере LINK import используется тег LINK для загрузки a.css, и import для b.css:
В IE (тестировалось в 6, 7, и 8), это привело к тому, что файлы загружаются последовательно друг за другом, как показано на рисунке 2. Соотвественно, время загрузки страницы в IE увеличится.
Рис. 2
В примере LINK с import, файл a.css загружается через LINK, и содержит внутри правило import для b.css:
В документе:
в a.css:
Этот способ также приводит к тому, что файлы загружаются последовательно (рис. 3.), а не параллельно, но теперь это происходит не только в IE, но и остальных браузерах. Если подумать — все логично: браузер загружает a.css и начинает парсить его. Обнаружив внутри правило import, начинается загрузка файла b.css.
Рис. 3.
Незначительное отличие от предыдущего примера привело к удивительным результатам в IE. LINK используется для вызова a.css и для нового файла proxy.css, который содержит только import для b.css.
В коде:
В proxy.css:
Результаты эксперимента в IE показаны на рисунке 4. Первый запрос — HTML документ. Второй запрос - a.css (2 секунды). Третий — proxy.css. Четвертый — b.css (2 секунды). И вот что удивительно, IE не хочет начинать загрузку b.css, пока файл a.css не будет загружен полностью. Во всех других браузерах такого сюрприза не происходит, что приводит к более быстрой загрузке страницы (см. рисунок 5).
Рис. 4. Результаты в IE.
Рис. 5. Результаты в других браузерах.
Использование сразу нескольких правил import в IE приводит к тому, что файлы загружаются не в том порядке, в котором они указаны в коде. В этом примере используется 6 файлов стилей (каждый из которых загружается по 2 секунды), за которыми следует JS скрипт (4 секунды для загрузки).
На рис. 6 вы увидите, что самый долгий по загрузке — это скрипт. Несмотря на то что он указан после стилей, в IE он загружается первым. Если в скрипте содержится код, который зависит от применяемых стилей (getElementsByClassName, и т.п.), это может привести к ошибкам работы скрипта, т.к. он загружается прежде чем стили.
Рис. 6.
Проще и безопасней использовать LINK для загрузки стилей:
Использование LINK обеспечивает параллельную загрузку файлов во всех браузерах (см. рисунок 7). Применение LINK также гарантирует, что файлы будут загружены именно в том порядке, который указан в коде документа.
Рис. 7.
Для нас особенно плохо то, что ресурсы могут быть загружены в другом порядке, нежели указано в документе. Все браузеры должны заглядывать наперед перед загрузкой стилей для извлечения правил import и начинать их загрузку немедленно. До тех пор, пока браузеры не реализуют это, я советую избегать использование import и загружать стили только с помощью LINK.
Надеюсь на ваши комментарии также здесь.
LINK vs. import
Существует 2 способа загрузки файлов стилей. Использовать тег LINK:
<link rel='stylesheet' href='a.css'>
Или импортировать файлы с помощью import:
<style>
@import url('a.css');
</style>
Я предпочитаю использовать LINK для удобства, т.к. вы должны помнить, что import нужно размещать всегда в самом верху блока стилей, в противном случае они не импортируются.
import import
Я хочу рассказать о различных способах использования LINK и import. В приведенном ниже примере прописаны 2 файла стилей: a.css и b.css. Каждый файл по загрузке занимает ровно 2 секунды, чтобы было удобно отследить влияние на скорость загрузки в дальнейшем. В первом примере используется import для загрузки обоих файлов стилей. В этом примере, называемом import import, HTML документ содержит следующий блок стилей:
<style>
@import url('a.css');
@import url('b.css');
</style>
Если вы всегда будете использовать только import для загрузки стилей, то проблем с производительностью не будет, хотя мы увидим ниже, это может привести к ошибке с JavaScript. Оба файла загружаются параллельно (см. рисунок 1) Но проблемы начинают появляться, если использовать import внутри файла стилей, либо вместе с LINK.
Рис. 1.
LINK import
В примере LINK import используется тег LINK для загрузки a.css, и import для b.css:
<link rel='stylesheet' type='text/css' href='a.css'>
<style>
@import url('b.css');
</style>
В IE (тестировалось в 6, 7, и 8), это привело к тому, что файлы загружаются последовательно друг за другом, как показано на рисунке 2. Соотвественно, время загрузки страницы в IE увеличится.
Рис. 2
LINK с import
В примере LINK с import, файл a.css загружается через LINK, и содержит внутри правило import для b.css:
В документе:
<link rel='stylesheet' type='text/css' href='a.css'>
в a.css:
@import url('b.css');
Этот способ также приводит к тому, что файлы загружаются последовательно (рис. 3.), а не параллельно, но теперь это происходит не только в IE, но и остальных браузерах. Если подумать — все логично: браузер загружает a.css и начинает парсить его. Обнаружив внутри правило import, начинается загрузка файла b.css.
Рис. 3.
Блоки LINK с import
Незначительное отличие от предыдущего примера привело к удивительным результатам в IE. LINK используется для вызова a.css и для нового файла proxy.css, который содержит только import для b.css.
В коде:
<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='proxy.css'>
В proxy.css:
@import url('b.css');
Результаты эксперимента в IE показаны на рисунке 4. Первый запрос — HTML документ. Второй запрос - a.css (2 секунды). Третий — proxy.css. Четвертый — b.css (2 секунды). И вот что удивительно, IE не хочет начинать загрузку b.css, пока файл a.css не будет загружен полностью. Во всех других браузерах такого сюрприза не происходит, что приводит к более быстрой загрузке страницы (см. рисунок 5).
Рис. 4. Результаты в IE.
Рис. 5. Результаты в других браузерах.
Много @imports
Использование сразу нескольких правил import в IE приводит к тому, что файлы загружаются не в том порядке, в котором они указаны в коде. В этом примере используется 6 файлов стилей (каждый из которых загружается по 2 секунды), за которыми следует JS скрипт (4 секунды для загрузки).
<style>
@import url('a.css');
@import url('b.css');
@import url('c.css');
@import url('d.css');
@import url('e.css');
@import url('f.css');
</style>
<script src='one.js' type='text/javascript'></script>
На рис. 6 вы увидите, что самый долгий по загрузке — это скрипт. Несмотря на то что он указан после стилей, в IE он загружается первым. Если в скрипте содержится код, который зависит от применяемых стилей (getElementsByClassName, и т.п.), это может привести к ошибкам работы скрипта, т.к. он загружается прежде чем стили.
Рис. 6.
LINK LINK
Проще и безопасней использовать LINK для загрузки стилей:
<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='b.css'>
Использование LINK обеспечивает параллельную загрузку файлов во всех браузерах (см. рисунок 7). Применение LINK также гарантирует, что файлы будут загружены именно в том порядке, который указан в коде документа.
Рис. 7.
Для нас особенно плохо то, что ресурсы могут быть загружены в другом порядке, нежели указано в документе. Все браузеры должны заглядывать наперед перед загрузкой стилей для извлечения правил import и начинать их загрузку немедленно. До тех пор, пока браузеры не реализуют это, я советую избегать использование import и загружать стили только с помощью LINK.
Надеюсь на ваши комментарии также здесь.
