Как вы узнаете, как повысить производительность веб-приложения, созданного как расширенное взаимодействие с пользователем по требованию (элементы SVG)?
Пользователь может расширить макет из вложенных элементов SVG.
// example
<svg id="parentSVG">
<g data-structure="tree>
<g data-child="child-node-1">...</g>
<g data-child="child-node-2">...</g>
...
<g data-child="child-node-n">...</g>
</g>
</svg>
Для каждого элемента (data-child) событие связывается.Здесь используется Hammer.js.
На странице производительности браузера я вижу, что большая часть вычислений выделяется на обработку событий.
Поэтому я хотел бы лучше понять, как обрабатываются события, и еслиможно связать событие для каждого инициирующего элемента или, если вместо этого, лучше будет обработать только одно событие, связанное с родительским элементом, например, используя атрибуты привязки данных.
Мой код в настоящее время похож на:
// ui is each SVG element - in the example, a data-child element
Hammer(ui).on('tap', function (event) {
event.preventDefault();
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
....// do something
}
// a second event
Hammer(ui).on('panstart', function (event) {
event.preventDefault();
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
....// do something
}
// a third event
Hammer(ui).on('panend', function (event) {
event.preventDefault();
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
....// do something
}
Интересно, если привязать три события только один раз к родительскому, то определить, какой вложенный элемент будет касаться мышью (например, на основе координат)и передайте в событие атрибут данных, который может быть лучше или нет, и если лучше, вы можете привести пример, показывающий это.