Skip to content

Instantly share code, notes, and snippets.

@bt4R9
Created January 15, 2018 19:29
Show Gist options
  • Save bt4R9/0c44115f5f71cd0473ca1060794fd891 to your computer and use it in GitHub Desktop.
Save bt4R9/0c44115f5f71cd0473ca1060794fd891 to your computer and use it in GitHub Desktop.
Вопрос. Не забудь рассказать, почему (на самом деле) работает 3D-хак.
3D-хак, он же translateZ(0) или translate3d(0, 0, 0) работает, так как в современные движки браузеров встроен механизм,
который при определенных критериях, создает композитный слой для рендеринга элемента, такой слой, при правильном
использовании хака, будет отрендерен на GPU. В данном случае, этот критерий — 3D перспектива, так как используется ось Z.
Ок, почему тогда не ускорить просто весь HTML и жить счастливо? Проблема в том, что выделять каждый элемент в такой слой
дорого. Во-первых не все устройства обладают достаточной видео паматью, особенно мобильные. Во-вторых, что бы отрендерить
элемент на GPU, в GPU сначала надо загрузить текстуру, что может стать узким местом, когда элементов много.
Тут кстаи очень интересно следить за тем, что происходит с современным Firefox. У Лин Кларк недавно была потрясающая статья
о том, что Firefox скоро внедрит WebRender в Quantum, и тогда Firefox изменит современный подход к рендерингу страницы.
Вместо того, чтобы угадывать, на какие слои надо поделить страницу, Firefox станет рисовать всю страницу как сцену в 3D игре.
То есть каждый пиксель каждый кадр.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment