Что работает быстрее?

Question

[newaitix]

Может кто то тестил?
Какой вариант работает быстрее?

<link rel="stylesheet" href="../css/style.css" media="all">
<style>@import url("../css/style.css");</style>

Почему то если использовать второй вариант то стили подгружаются сразу.
А если первый но с запозданием.

Comments

[newaitix]

Dr. Bacon, а как нужно?

[newaitix]

Dr. Bacon, попробовал там без разницы можно и без двух точек. Тоже работает.

Answer 1

[Nurdaulet Maksutov]

Теоретически единственное различие между ними состоит в том что механизм @import включает CSS (таблицу стилей). А <link> механизм HTML. Однако браузеры обрабатывают их по-разному. НО все равно <link> явное преимущество с точки зрения производительности.

Стив Содерс написал обширное сообщение в блоге, сравнивающее оба механизма, под названием «Не используйте @import». Это название говорит само за себя.

Comments

[newaitix]

В принципе статья отвечает на вопросы.
Я лишь констатирую факт того, что визуально выглядит быстрее.
Все дело в том, что это для speed dial addon для chrome и при открытии к примеру 30 вкладок процесс рендеринга страницы сильно замедляется если использовать link.
Зачастую бывает даже так, что весь контент включая медиа уже есть на странице и даже js отработал, а стили все еще не подгрузились.
При использовании import такого не наблюдается.

[Nurdaulet Maksutov]

newaitix, Гуглите "Методики ускорения загрузки сайта". В большинстве случаев вам скажут что нужно отключить лишние скрипты. Небольшая часть, по-умнее, скажет, что нужно отложить загрузку и запуск некритичных ресурсов.

У Виталия Фридмана есть на ютубе лекции на тему, интересные, правда немного устаревшие.

[newaitix]

Nurdaulet Maksutov, у меня вся страница рендерится скриптами. Всего 1 тег html на странице.

[newaitix]

Nurdaulet Maksutov, но даже не смотря на то что вся страница рендерится при помощи js google speed выдает 100.