Comments 13
По-моему то, что автор преподносит как троттлинг, на самом деле дебонсер. Это похожие, но все-таки различаемые паттерны.
Я так понимаю, перепутали service-worker-ы с web-worker-ами
В целом интересно было почитать, но про canvas и svg было однобоко. Автор привел пример задачи, которая больше подходит для canvas и сделал вывод, что svg — это плохо. Во всяком случае мне так показалось.
А как насчёт каких-то, например, графиков? При наведении на точку нужно ее выделить. Думаю, здесь производительность будет выше именно у svg, ведь не требуется уже перерисовывать весь график многократно ради одной точки.
А как насчёт каких-то, например, графиков? При наведении на точку нужно ее выделить. Думаю, здесь производительность будет выше именно у svg, ведь не требуется уже перерисовывать весь график многократно ради одной точки.
Привет.
На самом деле, во время выступления я специально подчеркнул, что не хочу сказать, что SVG это плохо, я делал акцент на том, что SVG не слишком хорошо подходит в случае, если в графике используется много небольших одноразовых элементов, именно поэтому я и приводил такие примеры. С выступления прошло достаточно много времени, я не помню в деталях, но мне казалось, что я подчеркнул что SVG хорошо подходит, если графике нужно добавить интерактивное взаимодействие с пользователем, например, реакцию на наведение, клики и прочее.
По поводу производительности вопрос спорный, canvas полностью перерисовывается достаточно быстро и, что важно, он делает это полностью на видеокарте, никак не затрагивая основной процессор, потому что он не является частью DOM, поэтому даже полная перерисовка всего графика будет быстрой, в примере с земным шаром это видно. Другое дело, что канвас это просто низкоуровневая графика и описывать интерактивное взаимодействие будет действительно непросто, потому что все ховеры, клики и прочее, что в SVG работает из коробки, нужно будет описывать руками: вычислять координаты, делать вывод, какой из элементов был нажат, обновлять соответствующие объекты и перерисовывать графику.
На самом деле, во время выступления я специально подчеркнул, что не хочу сказать, что SVG это плохо, я делал акцент на том, что SVG не слишком хорошо подходит в случае, если в графике используется много небольших одноразовых элементов, именно поэтому я и приводил такие примеры. С выступления прошло достаточно много времени, я не помню в деталях, но мне казалось, что я подчеркнул что SVG хорошо подходит, если графике нужно добавить интерактивное взаимодействие с пользователем, например, реакцию на наведение, клики и прочее.
По поводу производительности вопрос спорный, canvas полностью перерисовывается достаточно быстро и, что важно, он делает это полностью на видеокарте, никак не затрагивая основной процессор, потому что он не является частью DOM, поэтому даже полная перерисовка всего графика будет быстрой, в примере с земным шаром это видно. Другое дело, что канвас это просто низкоуровневая графика и описывать интерактивное взаимодействие будет действительно непросто, потому что все ховеры, клики и прочее, что в SVG работает из коробки, нужно будет описывать руками: вычислять координаты, делать вывод, какой из элементов был нажат, обновлять соответствующие объекты и перерисовывать графику.
канвас это просто низкоуровневая графика и описывать интерактивное взаимодействие будет действительно непросто, потому что все ховеры, клики и прочее, что в SVG работает из коробки, нужно будет описывать руками: вычислять координаты, делать вывод, какой из элементов был нажат, обновлять соответствующие объекты и перерисовывать графику.
Konva.js закрывает этот вопрос)
SVG отрисовывается точно так же, только браузером, а не нами вручную. Разница лишь в том используем ли мы стандартный DOM или велосипедим свою реализацию с ручным рендерингом. Более того, рендеринг path теоретически может быть транслирован в какой-нибудь шейдер, а в случае canvas будет постоянный интероп с JS. И можно пруфлинк про "отрисовку canvas на gpu"? Боюсь дороговато было бы из JS напрямую в видеопамять ходить при работе с пикселями.
понравилось, спасибо
Они подумали – мы же не можем показать сразу все картинки, но можем пообещать пользователю, что здесь будет картинка. И нарисовали серый блок размером с картинку. Когда пользователь останавливается, ему показывается настоящая картинка. Когда пользователь скроллит и видит серые блоки, он верит в это интуитивно – ну, да, картинка не успела загрузиться, и это нормально.
Вы сейчас как-будто рассказали мне, что деда-мороза не существует.
Я знаю про подобный трюк, но я искренне верил, что картинки в гугле действительно просто долго загружаются :(
Sign up to leave a comment.
Оптимизация производительности фронтенда