Почему все браузеры загружают все файлы CSS - даже для типов носителей, которые они не поддерживают?

Ответ 1

Думаю, ответ таков:

Браузеру разрешено и рекомендуется анализировать дескрипторы media - независимо от того, какой дескриптор - как способ сделать их будущими друзьями

Будущие версии HTML могут новые значения и могут позволить параметризовать значения.

* От: http://www.w3.org/TR/html4/types.html#h-6.13

Таким образом, среда может в один прекрасный день включать 3d-glasses или другие дескрипторы, включая bork; -)

EDIT:

Последняя спецификация CSS3 по медиа-запросам говорит об этом, что в известной мере поддерживает выше:

Неизвестный носитель типы оцениваются как ложные. Эффективно, они обрабатываются одинаково с известными типы носителей, которые не соответствуют тип носителя.

* От: http://dev.w3.org/csswg/css3-mediaqueries/#error-handling

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

Ответ 2

Мысль о том, что настоящая причина, по которой они загружают все медиа-запросы, заключается в том, что во многих устройствах CHANGE их ответы на эти запросы после загрузки.

Изображение iPhone5, которое находится в портрете при загрузке страницы (сообщение "ширина" как 640px, но не "портрет", к сожалению, iSeries не поддерживает эти запросы)... затем вы решите повернуть iPhone вбок, а браузер теперь активирует псевдо-ландшафтный режим (опять же, срабатывает с ширины @1126, а не "пейзаж" ).

Скорее всего, отзывчивый веб-дизайн был разработан для подачи различных таблиц стилей в браузер, отображаемый на 640 (довольно узкий, вероятно, телефон/планшет), чем в браузере, отображаемом на 1126 (скорее, на ноутбуке).

Если бы он не потрудился загружать дополнительные листы запросов к мультимедиа, то внезапно пришлось бы остановиться, снять HTTP-запрос, дождаться загрузки листа и затем проанализировать его для отображения. Это может привести к довольно уродливой задержке.

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

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

Сотовый телефон или дешевый планшет Android не должны загружать дополнительные файлы (особенно в ограниченных планах данных), которые ему просто не нужны.

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

Если у кого-то есть лучший, более чистый, способ обработки этого, пожалуйста, дайте мне знать.

Тем временем, если вы можете придумать просто реализовать функциональность, которая может обойти это (возможно, манифесты в стиле андроида, встроенные в браузеры?), вам может потребоваться отбросить строку в команды Mozilla или Chromium... кажется как они могли бы использовать руку на этом.

Ответ 3

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

Однако после быстрого теста результаты немного неоднозначны...

• <script src="bork.js" type="bork/bork"></script>
• <script src="bork2.js" type="text/bork"></script>

Chrome 12 загружает ни.
IE8 загружает # 2.
Firefox 4 загружает оба.
Opera 11 загружает оба.
Safari 5 Win downlads оба.

В любом из браузеров не выполняется синтаксический анализ или работа. Javascript alert(); внутри любого файла не запускается. И это немного отличается от случая загрузки CSS, потому что браузеры анализируют код bork -media CSS для директив @include и рекурсивно загружают эти ресурсы.

Ответ 4

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

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

Ответ 5

Единственная логическая причина, по которой я могу думать, заключается в том, что когда вы динамически изменяете (javascript) ошибочное значение атрибута элемента <link> для распознанного, файл должен быть доступен немедленно.
Фактически, в некоторых случаях это можно рассматривать как функцию, если вы хотите загрузить файл, но отложите его устройство на потом.

Ответ 6

Итак, если вы действительно не хотите загружать файл CSS до тех пор, пока что-то не произойдет, вы можете попытаться проверить, когда страница загружается, если определенные условия встречаются, и если да, то вы можете сделать "lazy load" и сохраните прокомментированный код (элемент типа 8, который будет в этом случае тэгом тега ) внутри вновь созданного дочернего элемента тега стиля, и это заставит браузер проверять вновь созданный контент и загрузит файл CSS для работы стиля.

Любой вопрос, с которым вы можете столкнуться, пытается его реализовать, не стесняйтесь спрашивать какие-то разъяснения, возможно, я могу помочь вам в решении вашей проблемы. Он работает практически для всех (изображения, js, css и т.д.), Которые вы не хотите загружать или обрабатывать до тех пор, пока что-то не произойдет или некоторые ограничения не соответствуют.

Я уже тестировал его и IT WORKS: D, поэтому вы можете использовать этот код для запуска, надеясь, что он поможет

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST CODE</title>
<script type="text/javascript"> 

    function test(){
        var elems = document.body.childNodes;
        alert(elems);
        for (var i = 0, il = elems.length; i < il; i++) {
           var el = elems[i];
           alert(el.nodeType);
           if (el.nodeType == 8) {
           var style = document.createElement('style');
           style.innerHTML = el.nodeValue;
           document.getElementById("css").appendChild(style);
           break;
           }
        }
    }
 </script >

 <style id="css">
 </style>
 </head>
 <body onload="test()">
 <[email protected] url(red.css) (min-width:400px) and (max-width:599px);-->
 </body>
 </html>

Ответ 7

Ответ может быть вызван медиа-запросами. Рассмотрим их, например:

<link rel="stylesheet" media="(min-width: 300px)" href="example1.css" />
<link rel="stylesheet" media="(min-width: 1000px)" href="example2.css" />

Если используется браузер с размером окна 600 пикселей, применяется таблица стилей example1.css. Если размер окна изменяется до 1200 пикселей, тогда пример styles2.css может быть немедленно применен, не дожидаясь его загрузки.

Стоит отметить, что, несмотря на то, что таблица сопоставлений несоответствующих медиа-запросов по-прежнему загружается, она не блокирует рендеринг во время загрузки (обычно все файлы CSS должны быть загружены до начала рендеринга).