Comments 12
> Следующий интересный момент заключается в том, что JavaScript —блокирующий язык, несмотря на то что допускает асинхронные события.
А потом вы пишите, что
> Если у нас выполняется AJAX, следующий за ним код все равно будет выполняться — он не ждет ответа от сервера.
Не совсем понял, это оговорка или вы сами себе противоречите?
А потом вы пишите, что
> Если у нас выполняется AJAX, следующий за ним код все равно будет выполняться — он не ждет ответа от сервера.
Не совсем понял, это оговорка или вы сами себе противоречите?
Было бы интересно знать, насколько сокращается время загрузки страницы при минимизации repaints/reflows
UFO just landed and posted this here
I. Не меняйте стили элемента напрямую в коде, используйте css-классы для переключения внешнего вида элемента. Или используйте свойство cssText.
А разве reflow это не отложенное действие, которое откладываеться на конец ивент лупа или до принудительного перерасчета? То-есть, изменяя свойства top, left произойдет лишь один reflow, как и в случаях с css классом и cssText.
В этом случае отложенное, об этом даже в статье говорится:
Так что в этом случае так лучше не делать — это плохо читается и никак не оптимизирует процесс.
Браузер компонует вместе несколько запросов на reflow и repaint, и выполняет их единожды, оптимизируя свою работу.
Так что в этом случае так лучше не делать — это плохо читается и никак не оптимизирует процесс.
II. Объединяйте манипуляции с DOM и выполняйте их отдельно от обновления DOM:
Уже тоже не слишком актуально. Браузеры уже научились это вполне сносно оптимизировать и если раньше сортировка таблицы вне дом с последующей вставкой занимала в разы меньше времени, чем та же операция в дом, то сейчас разница не так заметна (можно посмотреть приер у Ильи Кантора).
Тем не менее этот пунк все равно правильнее сделать, но не стоит рассчитывать на заметный прирост производительности.
III — тоже именно в этом примере (где можно вынести вычисления за цикл) разницы в современных браузерах не будет.
IV — анимировать позицию с помощью изменения box model в принципе плохая идея которая в любом случае будет просаживать производительность на мобильных устройствах. Для этого есть более удачные способы с использованием видеокарты translate3d, например.
Дополню, что в браузерах есть профайлеры, которые могут помочь выяснить отчего же ваш сайт подтормаживает.
http://i.imgur.com/eOwDrc7.png
https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool#profile-js
http://i.imgur.com/eOwDrc7.png
https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool#profile-js
Классная статья, только изображения сильно пошакалило
Sign up to leave a comment.
Важные аспекты работы браузера для разработчиков. Часть 2