LINUX.ORG.RU

Отрисовка всего веб-приложения через canvas

 , ,


0

2

В качестве причин, из-за которых веб-приложения тормозят и едят память гигабайтами, называют то, что все элементы управления - часть DOM, и из-за этого расходуется много ресурсов для динамического переформирования объектной модели страницы. Но если всё управление рендером отдать приложению для формирования на canvas'е и только избранным элементам выделять объекты в рамках своей модели - может ли это уменьшить потребление ресурсов приложением?

Во-первых, текст с канваса поисковые системы видеть не будут. Во-вторых, тебе ж по сути придется всю логику работы браузера с DOM повторить. Всякие обработчики нажатий, выделения текста и т.п. И не факт, что это будет работать быстрее и меньше жрать память.

dimuska139 ()
Ответ на: комментарий от dimuska139

Зачем поисковым системам видеть текст приложения? Тогда же лучше статическую страницу составить или заставить сервер управлять содержанием.

gedisdone ★★★ ()
Последнее исправление: gedisdone (всего исправлений: 1)

a11y на нуле и слишком много всего велосипедить.

может ли это уменьшить потребление ресурсов приложением

А ты уверен, что твоему приложению это нужно?

x3al ★★★★★ ()
Ответ на: комментарий от gedisdone

Скорее как 2D OpenGL. Во Flash много всего внедрено, начиная от кодеков, заканчивая движком растрирования вектора и анимации, сетевых протоколов и т.п. а в замен дали какой-то куцый opengl

menangen ★★★★★ ()
Ответ на: комментарий от gedisdone

А у сайтов не бывает контента, по которым их можно искать в поисковых системах? Для этого и нужно, чтобы пс видели текст приложения. Вот запилил ты сложный интернет-магаз, например. В нем названия товаров, описания и т.п. поисковые системы должны видеть. Если нарисуешь на canvas, то поисковые краулеры не увидят этот текст - и про поисковый трафик можно забыть. Можно, конечно, делать часть страницы на canvas, а часть через обычный html (где, собственно, и размещать тексты, которые поисковики должны видеть), но это геморрой уже какой-то.

dimuska139 ()

Пишут, что сейчас WASM существует, и пишут о каких-то версиях. Доступа к DOM у него нет. Что выходит, WASM будет работать как Java-апплеты, в отдельной рамке на странице? Какая последняя версия у WASMа?

gedisdone ★★★ ()

Такая идея уже давно приходила в голову людям и была расценена как анти-паттерн: HTML Living Standard - 4.12.5.1.22 Best practices:

Authors should avoid implementing text editing controls using the canvas element. Doing so has a large number of disadvantages:

  • Mouse placement of the caret has to be reimplemented.
  • Keyboard movement of the caret has to be reimplemented (possibly across lines, for multiline text input).
  • Scrolling of the text control has to be implemented (horizontally for long lines, vertically for multiline input).
  • Native features such as copy-and-paste have to be reimplemented.
  • Native features such as spell-checking have to be reimplemented.
  • Native features such as drag-and-drop have to be reimplemented.
  • Native features such as page-wide text search have to be reimplemented.
  • Native features specific to the user, for example custom text services, have to be reimplemented. This is close to impossible since each user might have different services installed, and there is an unbounded set of possible such services.
  • Bidirectional text editing has to be reimplemented.
  • For multiline text editing, line wrapping has to be implemented for all relevant languages.
  • Text selection has to be reimplemented.
  • Dragging of bidirectional text selections has to be reimplemented.
  • Platform-native keyboard shortcuts have to be reimplemented.
  • Platform-native input method editors (IMEs) have to be reimplemented.
  • Undo and redo functionality has to be reimplemented.
  • Accessibility features such as magnification following the caret or selection have to be reimplemented.

This is a huge amount of work, and authors are most strongly encouraged to avoid doing any of it by instead using the input element, the textarea element, or the contenteditable attribute.

Как выше упомянули в GTK 3+ есть broadway backend, который умеет рендерить в canvas. Но реализация при этом нативная и работает вне браузера через websocket.

gag ★★★★★ ()
Ответ на: комментарий от anonymous

Сделай выделение текста мышкой на канвасе.

В этом нет ничего сложного. Большинство текстовых редакторов не используют существующие контролы для работы с текстом, а рисуют свой «канвас» на основе чего-либо быстродействующего типа OpenGL и там уже реализуют свою работу с текстом и мышью.

beaver ()
Ответ на: комментарий от beaver

Так апплеты зарывали со словами «они брешь в безопасности, могут исполнять произвольный код» и т.п., Flash тоже из-за безопасности зарывали.

Что же случилось в этот раз, что WASM крут и «наше будущее»? Хотя, получается, что они не лучше апплетов.

gedisdone ★★★ ()
Ответ на: комментарий от anonymous

Firefox, запущенный сразу после старта, увеличил своё потребление где-то не больше чем на десять мегабайт. Наверно, неплохо, для виртуальной машины в 200 мегабайт на старте.

gedisdone ★★★ ()
Ответ на: комментарий от gedisdone

В WASM просто обмазываются этой безобасностью. Два больших мешка безопасности уже набралось

https://hacks.mozilla.org/2019/11/announcing-the-bytecode-alliance/

Deleted ()
Последнее исправление: Deleted (всего исправлений: 2)
Ответ на: комментарий от gedisdone

Тем не менее поисковые системы в частности гугл как то «выковыривают» текст из swf файлов во флеш и индексируют. Но только если текст как текст а не как картинка. В silverlight как то также.

anonymous ()
Ответ на: комментарий от anonymous

На мобильнике с последним FF отображает статичную картинку, не реагирующую на нажатия. На смену ориентации реагирует черным экраном.

Пишите с помощью нормального HTML5, пожалуйста.

ArkaDOSik ★★ ()

Тут есть один специалист по твоему вопросу.

Он на канве круги рисует.

Замечательно, я скажу, рисует.

До сих пор никто их не видел.

anonymous ()