Почему анимированный логотип Internet Explorer хранит свои кадры вертикально?

Это перевод Why does the Internet Explorer animated logo arrange its frame vertically? Автор: Реймонд Чен.

Если вы пытались когда-нибудь делать свои логотипы для Internet Explorer, вы, конечно же, заметили, что кадры анимации упорядочиваются вертикально, а не горизонтально. Почему так?

Потому что это намного более эффективно.

Вспомните, что растровые изображения хранятся как набор строк из пикселей. Другими словами, если вы пронумеруете пиксели изображения вот так:

123
456
789

то эти пиксели будут хранится в памяти как 123456789 (примечание: я говорю о изображениях, хранимых сверху-вниз, но аналогичные рассуждения будут применимы и для обратных). Теперь заметьте, что произойдёт, когда вы храните свою анимацию горизонтально:

12 AB

34 CD

56 EF

78 GH

Эти пиксели хранятся в памяти в порядке 12345678ABCDEFGH. Чтобы нарисовать первый кадр, вам потребуются пиксели 1, 2, A и B. Второй кадр требует 3, 4, C и D. И так далее. Заметьте, что пиксели, требуемые каждым кадром, не находятся друг за другом. Это означает, что они могут занимать различные линии кэша, а для рисунка большого размера - и находится в нескольких страницах памяти.

Теперь посмотрите на вертикальную полосу:

12 34

56 78

AB CD

EF GH

Снова, пиксели хранятся в памяти в том же порядке: 12345678ABCDEFGH, но в этот раз, первый кадр занимает пиксели 1, 2, 3 и 4; второй - 5, 6, 7 и 8; и так далее. В этот раз все пиксели для одного кадра расположены подряд. Это означает, что кадр вмещается в меньший размер кэша и требует обращения к меньшему количеству страниц памяти.

Давайте проиллюстрируем сказанное картинкой: предположим, что у нас есть анимация из двадцати кадров 38x38, т.е. итоговый размер будет 38x456. Также предположим, для простоты примера, что это 32-х разрядное изображение, а размер страницы равен 4 Кб.

Если изображение хранится горизонтальной полоской (456x38), то раскладка изображения в памяти будет выглядеть вот так (я раскрасил каждую страницу памяти в свой цвет):


Заметьте, что не важно, какой кадр вы рисуете - вам придётся обратиться к каждой странице, поскольку каждый кадр содержит хоть несколько байт с каждой страницы памяти.

С другой стороны, хранение кадров вертикально даёт нам такую картину:


Заметьте, что с вертикальной полосой каждый кадр касается только одной или максимум трёх страниц памяти; сравните эту ситуацию с горизонтальной полосой, где каждый кадр располагался на семнадцати страницах. Неплохая экономия, да? Особенно, если учесть, что в большинстве случаев рисуется вообще один только первый кадр. Остальные кадры используются только во время анимации. Другими словами, это простое изменение сохранило нам 60 Кб нашей песочницы (working set).