Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

Атрибут type можно задать и через ссылку на таблицу стилей

В прежние времена атрибут type мог использоваться в теге script, если вы хотели применить VBScript вместо JavaScript, но сегодня это уже не актуально.

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

Сначала о том, как браузер загружает файлы. После того как браузер загрузил и проанализировал HTML, он составляет список project assets, категорий [22](изображения, CSS, JavaScripts и т. п.) и расставляет приоритетность их загрузки в порядке появления.

Раньше мы подключались к Интернету через телефонную сеть, которая слабо справлялась с несколькими одновременными подключениями. Сейчас пропускные способности значительно варьируются (особенно с учетом мобильных устройств). Поэтому сегодня браузеры ограничены в одновременной загрузке файлов с домена верхнего уровня. Вот почему некоторые разработчики используют сети доставки и дистрибуции контента или размещают файлы на поддомене (таком как assets.example.com); использование нескольких доменов дает разработчику больше слотов загрузки для скриптов, таблиц стилей, изображений и фреймов.

Рисунок 3.2. Yepnope: условный скриптовой загрузчик

Когда браузеры качают файлы JavaScript, они загружают по одному скрипту за раз, что позволяет им анализировать код и предзапускать магические оптимизации. Теперь, вместо того чтобы полагаться на удачу, мы можем использовать загрузчики скриптов (такие как LABjs, Yepnope, RequireJS и многие другие), чтобы одновременно загружать множество скриптов, устанавливать зависимости и определять, нужен ли вообще какой-то определенный скрипт.

Имеет смысл улучшить производительность страниц везде, где возможно. Компания Amazon утверждает, что увеличение времени загрузки страницы на 100 миллисекунд уменьшает количество продаж на 1 % [23].

Вооружившись этими сведениями, поговорим о моем любимом скриптовом загрузчике, Yepnope [24].

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

Для примера:

yepnope([

{

test: window.JSON,

nope: ‘/javascripts/json2.js’

}

])

Этот умный кусочек JavaScript проверяет, есть ли у браузера свой «родной» анализатор (парсер) JSON. И туда, где его нет (у браузеров IE 6 и 7), он загружает скрипт /javascripts/json2.js, (полифилл [25]JSON).

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

Первый – это асинхронный тег:

Асинхронный тег – это булевый атрибут, означающий, что его явное присутствие в браузере задает значение true, или «Да, пожалуйста, используйте этот функционал». Он велит браузеру выполнить application.js., как только оно будет доступно. Скрипты, которые загружаются асинхронно, выполняются, как только будут загружены, то есть не в порядке их появления в коде HTML

Стоит упомянуть, что нашим самым большим достижением стало уменьшение размеров скриптов в целом. Сначала мы добились этого, применив gzip-сжатие (как и для таблицы стилей, и HTML файлов). Чтобы добавить на сайт поддержку gzip, зайдите в репозиторий HTML5 Boilerplate на GitHub [26].

Если вы не знаете, как обслуживается ваш сайт, самое время ознакомиться с панелью инструментов для разработчика. На Webkit браузерах (Safari и Chrome) вы можете открыть ее, нажав Command + Option + I в системе Mac и Control + Shift + I в Windows.

Под панелью «Сеть» вы найдете список файлов, которые были загружены для текущей страницы. Можете проинспектировать запросы и заголовки ответов для каждого файла.

Рисунок 3.3. Панель инструментов для разработчика Safari отображает активность сети на Yepnope.

Рисунок 3.4. Файл был передан браузеру в предварительно сжатом виде

Второй совет, как улучшить производительность вашего сайта (вообще-то, лучший способ – это оптимизировать код), – объединить и сжать файлы.

Я советую вам применить компилятор UglifyJS [27].

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

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

Прежде чем использовать какой-то новый тег, не забудьте о так называемом HTML5 Shiv. Этот скрипт важен для нас. Без него Internet Explorer 6, 7 и 8 не смогут распознать незнакомые стили (т. е. новые HTML5-теги, которых не было, когда создавались указанные версии IE).

Вы можете скопировать HTML5 Shiv из сервиса Google Code, где выложен этот проект [28].

Также вы можете получить HTML5 Shiv, используя js-библиотеку Modernizr [29]. В этом разделе мы не говорим об этом скрипте подробно, но тем не менее держите его на вооружении. Я использовал его на каждом сайте, созданном за последние два года.

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

Применяйте одну из новых версий CSS reset, поскольку старые версии не задают нормированный стиль элементам HTML5.

Очень советую познакомиться с Normalize.css [30]Николаса Галлахера [31]и Джонатана Нила [32].

Многие из старых сценариев сброса (классический пример – сброс от Эрика Мейера) тяжеловесны: они сбрасывают каждый элемент, а некоторые их изменения можно оспорить, например тег strong при установке не выделяется жирным шрифтом по умолчанию. Normalize.css сбрасывает элементы более изящно и сглаживает некоторые причуды браузеров. Это позволит вам максимально нивелировать различия между ними. Джон Нил и Николас Галлахер «раскладывают по полочкам» все, что делают скрипты. Изучите подробно прокомментированный код – он фантастичен!

Дойдя до этого пункта, вы, наверное, подумали: «OK, пора начинать писать сайт, пользуясь самыми замечательными новейшими тегами!» Когда были установлены новые семантические теги, разработчикам пришлось потрудиться: проанализировать, какие классы иидентификаторы они будут применять для своих сайтов. Ничего экстраординарного они не обнаружили: на деле все они пользовались одними и теми же именованиями (иногда с небольшими перестановками).