Optima
Оптимизация отображения.
При программировании графики следует учитывать множество факторов, которые влияют на скорость отображения страницы и скорость изменения графических образов. При этом обычная дилемма оптимизации программ - скорость или размер занимаемой памяти, решается только путем увеличения скорости. О размере памяти как-то не принято думать при программировании на JavaScript.
Из всех способов оптимизации отображения картинок мы остановимся только на нескольких из них:
Если первые две позиции относятся в равной степени как к отображению статических картинок, так и к мультипликации, то третий пункт характерен, главным образом, для мультипликации.
Оптимизация при загрузке
Практически любое руководство по разработке HTML-страниц указывает на то, что при использовании контейнера IMG в теле HTML-страницы хорошим тоном является указание атрибутов width и height. Диктуется это порядком загрузки компонентов страницы с сервера и алгоритмом работы HTML-parser. Первым загружается текст разметки. После этого parser разбирает текст и начинает загрузку дополнительных компонентов, в том числе и графики. При этом загрузка различных картинок, в зависимости от типа HTTP-протокола, может идти последовательно или параллельно.
Также параллельно с загрузкой parser продолжает свою работу. Если для картинок заданы параметры ширины и высоты, то можно отформатировать текст и отобразить его в окне браузера. До тех пор пока эти параметры не определены, отображения текста не происходит.
Таким образом, указание высоты и ширины картинки позволит отобразить документ раньше, чем картинки будут получены с сервера. Это дает возможность пользователю читать документ или воспользоваться его гипертекстовыми ссылками до момента полной загрузки(событие load).
С точки зрения Javascript указание размеров картинки задает начальные параметры окна отображения графики внутри документа. Это позволяет воспользоваться маленьким, абсолютно прозрачным образом, для того, чтобы заменить его полноценной картинкой:
Идея состоит в передаче маленького объекта для замещения его большим объектом по требованию.
начало страницы
Предварительная загрузка
Замена одного образа другим часто бывает оправдана только в том случае, когда происходит достаточно быстро. Если перезагрузка длится долго, то эффект, которого хотят добиться, теряется. Для такой быстрой подмены используют возможность предварительной загрузки документа в специально созданный объект класса Image:
Реальный эффект можно почувствовать только при отключении кэширования страниц на стороне клиента (браузера). Кэширование часто используют для ускорения работы со страницами Web-узла. Как правило, загрузка первой страницы - это достаточно длительный процесс. Самое главное, что пользователь в этот момент готов немного подождать. Поэтому кроме графики необходимой только на первой странице ему можно передать и графику, которая на этой странице не отображается. Но зато при переходе к другим страницам узла она будет отображаться без задержки на передачу с сервера.
Описанный только что прием не однозначен. Его оправдывает только то, что если пользователь нетерпелив, то он вообще отключит передачу графики.
начало страницы
Нарезка картинок
Нарезка картинок применяется довольно часто. Она позволяет достигать эффекта частичного изменения отображаемой картинки. Наиболее часто он применяется при создании меню:
Кроме этого эффекта нарезка позволяет реализовать достаточно эффективную мультипликацию на больших картинках. При этом изменяется не весь образ, а только отдельные его части:
Из примера видно, что изменение части образа довольно сильно изменяет скорость отображения. При изменении всей картинки о мультипликации можно говорить достаточно условно.
