Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки (Стори, Уолтер) - страница 56

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

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

>

Асинхронный тег – это булевый атрибут, означающий, что его явное присутствие в браузере задает значение 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