Improve zoom/pan performance by avoiding redundant tag class and label width recomputation

CHANGELOG.md

@@ -59,6 +59,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 * Show country names in your preferred language and country flag emoji in the Country field dropdown ([#11783], thanks [@Razen04])
 #### :hourglass: Performance
 * iD is now twice as fast during long editing sessions ([#11861], thanks [@k-yle])
+* Improve zoom/pan performance by avoiding redundant tag class recomputation ([#11834], thanks [@1-navneet])
 #### :mortar_board: Walkthrough / Help
 #### :rocket: Presets
 * Add dedicated styling for `highway=ladder` to make it distinguishable from `highway=steps` ([#11799], thanks [@bhavyaKhatri2703])
@@ -87,13 +88,15 @@ _Breaking developer changes, which may affect downstream projects or sites that
 [#11862]: https://github.com/openstreetmap/iD/pull/11862
 [#11870]: https://github.com/openstreetmap/iD/issues/11870
 [#11904]: https://github.com/openstreetmap/iD/issues/11904
+[#11834]: https://github.com/openstreetmap/iD/pull/11834
 [@ilias52730]: https://github.com/ilias52730
 [@Razen04]: https://github.com/Razen04
 [@homersimpsons]: https://github.com/homersimpsons
 [@omsaraykar]: https://github.com/omsaraykar
 [@Kaushik4141]: https://github.com/Kaushik4141
 [@Kayd-06]: https://github.com/Kayd-06
 [@JaiswalShivang]: https://github.com/JaiswalShivang
+[@1-navneet]: https://github.com/1-navneet 
 
 
 # v2.37.3

modules/svg/labels.js

@@ -789,19 +789,31 @@ export function svgLabels(projection, context) {
 const _textWidthCache = {};
 export function textWidth(text, size, container) {
     let c = _textWidthCache[size];
-    if (!c) c = _textWidthCache[size] = {};
+    if (!c) {
+        c = _textWidthCache[size] = { widths: {}, measurer: null };
+    }
+
+    if (c.widths[text]) {
+        return c.widths[text];
+    }
 
-    if (c[text]) {
-        return c[text];
+    // Avoid repeated create/remove of SVG text nodes on every zoom/pan.
+    // The measured width depends only on text + font size/style, which
+    // are stable during zoom/pan, so caching is safe.
+    let elem = c.measurer;
+    if (!elem) {
+        elem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        elem.style.fontSize = `${size}px`;
+        elem.style.fontWeight = 'bold';
+        elem.style.visibility = 'hidden';
+        elem.style.pointerEvents = 'none';
+        container.appendChild(elem);
+        c.measurer = elem;
     }
-    const elem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-    elem.style.fontSize = `${size}px`;
-    elem.style.fontWeight = 'bold';
+
     elem.textContent = text;
-    container.appendChild(elem);
-    c[text] = elem.getComputedTextLength();
-    elem.remove();
-    return c[text];
+    c.widths[text] = elem.getComputedTextLength();
+    return c.widths[text];
 }
 
 

modules/svg/tag_classes.js

@@ -1,7 +1,7 @@
 import { select as d3_select } from 'd3-selection';
 import { osmPathHighwayTagValues, osmPavedTags, osmSemipavedTags, osmLifecyclePrefixes } from '../osm/tags';
 
-
+var _classCache = new WeakMap();
 export function svgTagClasses() {
     var primaries = [
         'building', 'highway', 'railway', 'waterway', 'aeroway', 'aerialway',
@@ -16,6 +16,7 @@ export function svgTagClasses() {
         'public_transport', 'location', 'parking', 'golf', 'type', 'leisure',
         'man_made', 'indoor', 'construction', 'proposed'
     ];
+    // Cache tag-derived classes by tag object identity.
     var _tags = function(entity) { return entity.tags; };
 
 
@@ -51,14 +52,22 @@ export function svgTagClasses() {
         }
 
         // preserve base classes (nothing with `tag-`)
-        var classes = value.trim().split(/\s+/)
+        var baseClasses = value.trim().split(/\s+/)
             .filter(function(klass) {
                 return klass.length && !/^tag-/.test(klass);
             })
             .map(function(klass) {  // special overrides for some perimeter strokes
                 return (klass === 'line' || klass === 'area') ? (overrideGeometry || klass) : klass;
             });
 
+        // Fast path: return cached tag-derived classes if available
+        var tagDerivedClasses = _classCache.get(t);
+        if (tagDerivedClasses) {
+            return baseClasses.concat(tagDerivedClasses).join(' ').trim();
+        }
+
+        var classes = [];
+
         // pick at most one primary classification tag..
         for (i = 0; i < primaries.length; i++) {
             k = primaries[i];
@@ -161,10 +170,9 @@ export function svgTagClasses() {
 
         // ensure that classes for tags keys/values with special characters like spaces
         // are not added to the DOM, because it can cause bizarre issues (#9448)
-        return classes
-            .filter(klass => /^[-_a-z0-9]+$/.test(klass))
-            .join(' ')
-            .trim();
+        var tagDerived = classes.filter(klass => /^[-_a-z0-9]+$/.test(klass));
+        _classCache.set(t, tagDerived);
+        return baseClasses.concat(tagDerived).join(' ').trim();
     };