Введение
Большая часть HTML5 направлена на обеспечение встроенной поддержки браузером компонентов и методов, которых мы до сих пор достигли с помощью библиотек JavaScript. Использование этих функций, если они есть, может в конечном итоге обеспечить гораздо более быструю работу ваших пользователей. В этом уроке я не буду перечислять превосходные исследования производительности, которые вы видели на сайте Yahoo’s Exceptional Performance или в документации Google Page Speed , а также на сайте «Давайте сделаем Интернет быстрее» . Вместо этого я сосредоточусь на том, как использование HTML5 и CSS3 сегодня может сделать ваши веб-приложения более отзывчивыми.
Совет 1. Используйте веб-хранилище вместо файлов cookie.
Хотя файлы cookie уже много лет используются для отслеживания уникальных пользовательских данных, у них есть серьезные недостатки. Самый большой недостаток заключается в том, что все ваши данные cookie добавляются в каждый заголовок HTTP-запроса. В конечном итоге это может оказать заметное влияние на время ответа , особенно во время XHR. Поэтому рекомендуется уменьшить размер файлов cookie . В HTML5 мы можем добиться большего: использовать sessionStorage и localStorage вместо файлов cookie.
Эти два объекта веб-хранилища можно использовать для сохранения пользовательских данных на стороне клиента в течение всего сеанса или на неопределенный срок. Их данные также не передаются на сервер при каждом HTTP-запросе. У них есть API, который порадует вас избавлением от файлов cookie. Вот оба API, использующие файлы cookie в качестве запасного варианта.
// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {
// easy object property API
localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';
} else {
// without sessionStorage we'll have to use a far-future cookie
// with document.cookie's awkward API :(
var date = new Date();
date.setTime(date.getTime()+(365*24*60*60*1000));
var expires = date.toGMTString();
var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
' expires='+expires+'; path=/';
document.cookie = cookiestr;
}
Совет 2. Используйте переходы CSS вместо анимации JavaScript
CSS-переходы дают вам привлекательный визуальный переход между двумя состояниями. Большинство свойств стиля можно изменять, например, манипулировать тенью текста, положением, фоном или цветом. Вы можете использовать переходы в состояния псевдоселектора, такие как :hover или из форм HTML5, :invalid и :valid ( пример с состояниями проверки формы ). Но они гораздо мощнее и могут активироваться, когда вы добавляете к элементу любой класс.
div.box {
left: 40px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }
Добавив переключаемые классы totheleft и totheright , вы можете перемещать поле. Сравните этот объем кода с объемом кода библиотеки анимации JavaScript. Очевидно, что количество байтов, отправляемых в браузер, намного меньше при использовании анимации на основе CSS. Кроме того, благодаря ускорению на уровне графического процессора эти визуальные переходы будут максимально плавными.
Совет 3. Используйте клиентские базы данных вместо обращения к серверу.
База данных Web SQL и IndexedDB представляют базы данных на стороне клиента. Вместо обычного шаблона отправки данных на сервер через XMLHttpRequest или отправку формы вы можете использовать эти клиентские базы данных. Уменьшение HTTP-запросов является основной целью всех инженеров по производительности, поэтому использование их в качестве хранилища данных может сэкономить много поездок через XHR или формировать сообщения обратно на сервер. localStorage и sessionStorage можно использовать в некоторых случаях, например для отслеживания хода отправки формы, и они работают заметно быстрее, чем API-интерфейсы клиентских баз данных. Например, если у вас есть компонент сетки данных или почтовый ящик с сотнями сообщений, хранение данных локально в базе данных сэкономит вам HTTP-обходы, когда пользователь захочет выполнить поиск, фильтрацию или сортировку. Список друзей или автозаполнение текстового ввода можно фильтровать при каждом нажатии клавиши, что делает взаимодействие с пользователем более отзывчивым.
Совет 4. Улучшения JavaScript дают значительные преимущества в производительности
В прототип Array в JavaScript 1.6 было добавлено множество дополнительных методов . Сейчас они доступны в большинстве браузеров, кроме IE. Например:
// Give me a new array of all values multiplied by 10.
[5, 6, 7, 8, 900].map(function(value) { return value * 10; });
// [50, 60, 70, 80, 9000]
// Create links to specs and drop them into #links.
['html5', 'css3', 'webgl'].forEach(function(value) {
var linksList = document.querySelector('#links');
var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
linksList.innerHTML += newLink;
});
// Return a new array of all mathematical constants under 2.
[3.14, 2.718, 1.618].filter(function(number) {
return number < 2;
});
// [1.618]
// You can also use these extras on other collections like nodeLists.
[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});
В большинстве случаев использование этих собственных методов обеспечивает значительно более высокую скорость, чем типичный цикл for, например: for (var i = 0, len = arr.length; i < len; i++) . Собственный анализ JSON (через JSON.parse() ) заменяет файл json2.js, который мы привыкли включать некоторое время. Собственный JSON намного быстрее и безопаснее, чем использование внешнего скрипта, и он уже есть в IE8, Opera 10.50, Firefox 3.5, Safari 4.0.3 и Chrome. Native String.trim — еще один хороший пример того, что он не только быстрее, чем стандартные JS-эквиваленты, но и потенциально более корректен. Ни одно из этих дополнений JavaScript технически не является HTML5, но они подпадают под действие технологий, которые стали доступны в последнее время.
Совет 5. Используйте манифест кэша для работающих сайтов, а не только для автономных приложений.
Два года назад Wordpress использовал Google Gears, чтобы добавить функцию под названием Wordpress Turbo . По сути, он кэшировал многие ресурсы, используемые в панели администратора, локально, ускоряя доступ к файлам к ним. Мы можем воспроизвести это поведение с помощью HTML5 applicationCache и cache.manifest . Кэш приложения имеет небольшое преимущество перед установкой заголовков Expires ; поскольку вы создаете декларативный файл, указывающий статические ресурсы, которые можно кэшировать, браузеры могут его сильно оптимизировать, возможно, даже предварительно кешируя их перед использованием. Рассмотрим базовую структуру вашего сайта как шаблон. У вас есть данные, которые могут измениться, но HTML-код вокруг них обычно остается довольно последовательным. С помощью кеша приложения вы можете рассматривать свой HTML как серию чистых шаблонов, кэшировать разметку через кэш.манифест, а затем доставлять JSON по сети для обновления содержимого. Эта модель очень похожа на то, что делает родное новостное приложение для iPhone или Android.
Совет 6. Включите аппаратное ускорение для улучшения визуального восприятия
В ведущих браузерах многие визуальные операции могут использовать ускорение на уровне графического процессора, что может сделать высокодинамичные визуальные операции более плавными. Аппаратное ускорение было анонсировано для Firefox Minefield и IE9 , а в Safari добавлено ускорение на аппаратном уровне в версии 5. (Оно появилось в Mobile Safari намного раньше.) В Chromium только что добавлены 3D-преобразования и аппаратное ускорение для Windows, а вскоре появятся и две другие платформы. .
Ускорение графического процессора срабатывает только при довольно ограниченном наборе условий, но 3D-преобразования и анимированная непрозрачность являются наиболее распространенными способами срабатывания переключателя. Несколько хакерский, но ненавязчивый способ включить его:
.hwaccel { -webkit-transform: translateZ(0); }
Хотя никаких гарантий. :) При поддержке и включении аппаратного ускорения анимированный перевод, вращение, масштабирование и непрозрачность определенно будут более плавными при композитинге с помощью графического процессора. Их преимущество заключается в том, что они обрабатываются непосредственно на графическом процессоре и не требуют перерисовки содержимого слоя. Однако любое свойство, влияющее на макет страницы, по-прежнему будет работать относительно медленно.
Совет 7. Для операций с высокой нагрузкой на ЦП веб-воркеры доставляют
У веб-работников есть два существенных преимущества: 1) Они быстрые. 2) Пока они занимаются вашими задачами, браузер остается отзывчивым. Взгляните на слайды HTML5 для работников в действии. Некоторые возможные ситуации, в которых вы можете использовать Web Workers:
- Форматирование текста длинного документа
- Подсветка синтаксиса
- Обработка изображений
- Синтез изображений
- Обработка больших массивов
Совет 8. Атрибуты форм HTML5 и типы ввода
HTML5 представляет новый набор типов ввода, обновляя наш набор text , password и file , включив в него search , tel , url -адрес, email , datetime , date , month , week , time , datetime-local , number , range и color . Поддержка этих браузеров различается, но в настоящее время большинство из них реализовано в Opera. С помощью обнаружения функций вы можете определить, имеет ли браузер встроенную поддержку (и будет ли предлагать пользовательский интерфейс, такой как средство выбора даты или цвета), а если нет, вы можете продолжать использовать виджеты JS для выполнения этих общих задач. Помимо типов, в наши обычные поля ввода было добавлено несколько полезных функций. placeholder ввода предлагает текст по умолчанию, который очищается при нажатии на него, а autofocus фокусирует курсор при загрузке страницы, чтобы вы могли немедленно взаимодействовать с этим полем. Проверка ввода — еще одна вещь, которая появилась в HTML5. Добавление required атрибута означает, что браузер не позволит отправить форму до тех пор, пока это поле не будет заполнено. Кроме того, атрибут pattern позволяет вам указать собственное регулярное выражение для ввода, который будет проверен; с недопустимыми значениями, блокирующими отправку формы. Этот декларативный синтаксис является большим улучшением не только в плане читаемости исходного кода, но и значительно снижает необходимость использования JavaScript. Опять же, вы можете использовать обнаружение функций для предоставления запасного решения, если для них нет встроенной поддержки. Использование здесь собственных виджетов означает, что вам не нужно отправлять тяжелый JavaScript и CSS, необходимые для создания этих виджетов, что ускоряет загрузку страницы и, вероятно, улучшает отзывчивость виджетов. Чтобы опробовать некоторые из этих улучшений ввода, ознакомьтесь с презентацией HTML5 Slide .
Совет 9. Используйте эффекты CSS3 вместо запроса тяжелых спрайтов изображений.
CSS3 предоставляет множество новых возможностей стилизации, которые заменяют использование изображений для точного представления визуального дизайна. Замена изображения размером 2 КБ на 100 байт CSS — это огромная победа, не говоря уже о том, что вы удалили еще один HTTP-запрос. Вот несколько свойств, с которыми стоит ознакомиться:
- Линейные и радиальные градиенты
- Border-radius для закругленных углов
- Box-shadow для теней и свечения
- RGBA для альфа-непрозрачности
- Преобразования для вращения
- CSS-маски
Например, вы можете создавать очень изящные кнопки с помощью градиентов и воспроизводить многие другие эффекты без изображений. Поддержка большинства из них браузерами очень надежна, и вы можете использовать такую библиотеку, как Modernizr, чтобы перехватывать браузеры, которые не поддерживают эти функции, и использовать изображения в качестве запасного варианта.
Совет 10: WebSockets для более быстрой доставки с меньшей пропускной способностью, чем XHR
WebSockets был разработан в ответ на растущую популярность Comet . Действительно, сейчас есть преимущества в использовании WebSockets вместо модели Comet по сравнению с XHR.
WebSockets имеет очень легкую структуру, поэтому потребляемая им полоса пропускания часто меньше, чем у XHR. В некоторых отчетах указывается сокращение количества байтов, передаваемых по сети, на 35%. Кроме того, при больших объемах разница в производительности при доставке сообщений становится более очевидной; В этом тесте XHR был зафиксирован с совокупным временем на 3500 % дольше, чем у WebSockets. Наконец, Ericcson Labs изучила производительность WebSockets и обнаружила, что время пинга через HTTP в 3-5 раз больше, чем через WebSockets, из-за более существенных требований к обработке. Они пришли к выводу, что протокол WebSocket явно больше подходит для приложений реального времени.
Дополнительные ресурсы
Для получения рекомендаций по измерению и производительности вам обязательно следует использовать расширения Firefox Page Speed и YSlow . Кроме того, Speed Tracer для Chrome и DynaTrace Ajax для IE обеспечивают более детальное протоколирование анализа.