Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The number of DOM nodes rises when setData(URL) is called frequenty #8032

Closed
poletani opened this issue Mar 13, 2019 · 1 comment · Fixed by #8035
Closed

The number of DOM nodes rises when setData(URL) is called frequenty #8032

poletani opened this issue Mar 13, 2019 · 1 comment · Fixed by #8035
Labels
performance ⚡ Speed, stability, CPU usage, memory usage, or power usage

Comments

@poletani
Copy link
Contributor

mapbox-gl-js version: 0.53.1

browser: tested in chrome, but possibly in all browsers

Steps to Trigger Behavior

  1. minimal code is following: create source and update the source using setData(URL) periodicaly
#HTML code
<div id="map"></div>
<button onclick="updateSource()">UPDATE</button>

#JS code
map.addSource("src", {
   "type" : "geojson",
   "data" : {
        "type": "Feature",
        "geometry": {
          type : "Point",
          coordinates : [14.5, 50.5]
        }
    }
});

function createJsonUrl (json = '') {
    return window.URL.createObjectURL(new Blob([json], {type: 'application/json'}));
};

function setSourceData (sourceId, data) {
   const src = map.getSource(sourceId);
   if (src) src.setData(data);
};

function updateSource () {
  const url = createJsonUrl(
    JSON.stringify({
      "type": "Feature",
      "geometry": {
        type : "Point",
        coordinates : [14.5 + (Math.random()-0.5)/4, 50.5 + (Math.random()-0.5)/4]
      }
    })
  );
  setSourceData('src', url);
};
  1. open in chrome dev tools - performace tab
  2. start recording
  3. click several times to UPDATE button
  4. stop recording
  5. check number of DOM nodes (green line in performance report)

Expected Behavior

The number of DOM nodes should be constant.

Actual Behavior

Number of DOM nodes (green line in performance report ) constantly rises with each source update. In case of fast animation using requestAnimationFrame, after some time DOM garbage collector is called, caused noticeably longer animation frame ("freezing").
The cause is the method browser.resolveURL(), which creates new A element out of the document tree only for the purpose of the url normalization.
The easiest solution would be to make url resolving optional (I guess it's not needed especially in case of object URLs). Or rewrite the method resolveURL() to reuse the anchor element node, if possible....?

Anyway, thank you for the great piece of software!

@poletani poletani changed the title The number of DOM nodes is rising when setData(URL) is called frequenty The number of DOM nodes rises when setData(URL) is called frequenty Mar 13, 2019
@mourner mourner added the performance ⚡ Speed, stability, CPU usage, memory usage, or power usage label Mar 14, 2019
@mourner
Copy link
Member

mourner commented Mar 14, 2019

Thanks for the report! I'm wondering why it's not garbage-collected if a goes out of references at the end of resolveUrl and isn't attached to the DOM anywhere.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
performance ⚡ Speed, stability, CPU usage, memory usage, or power usage
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants