Pull to refresh

Визуализация reflow

Reading time 1 min
Views 2K
Original author: Satoshi Ueyama
Reflow — это процесс вычисления размеров составных блоков Web-страницы.

Сатоши визуализировал данный процесс, происходящий в недрах движка Gecko. Одним словом, он сделал «красиво».



Технические детали


Сатоши скомпилировал Mozilla таким образом, чтобы последний все свои действия записывал в файл в определённом формате, например таком:

{"event": "MoveFrame", "frame": {"address": "0x04FE41A8", "type":
"TextFrame", "content": {"address": "0x05014150", "type": "other"},
"rect": {"x": 0, "y": 0, "w": 0, "h": 0}}},

{"event": "MoveFrame", "frame": {"address": "0x04FE41A8", "type":
"TextFrame", "content": {"address": "0x05014150", "type": "other"},
"rect": {"x": 0, "y": 0, "w": 0, "h": 0}}},


Далее, он сделал видео-анимацию всего этого действа.

Что получилось?


Вычисления для wikipedia.org:



Вычисления для mozilla.org:



Вычисления для японской локализации google.com



Визуализация играет не последнюю роль в процессе понимания и осознавания механизмов работы той или иной системы.
Tags:
Hubs:
+86
Comments 41
Comments Comments 41

Articles