Why uploadcare is repainting html tag every N ms?

Question

While using Uploadcare file upload widget, I noticed that the Uploadcare script keeps repainting the HTML tag.

I am not sure if repainting is the right term, but here is what is happening: Checking chrome devtools the HTML tag is highlighting, the same behavior when you add/remove an attribute on an element. And it doesn't seem to end, it just goes on and on every N ms. You can check it for yourself on their homepage Uploadcare.com, just open devtools and take a look at the HTML tag.

Anyone know why it is doing that? What is it calling? Would it cause performance issues to mobile users?

Dayledaylight

They're constantly removing and adding the id attribute. You can right-click the html node and select break on attribute modifications to confirm this yourself. Why they're doing it, not sure, if you want to, you can dig through their code, but to me it just sounds like some kind of a hack. – Pulsate

@Nit nice trick! Whatever their reasons are its very bothersome, i cant edit css styles using the devtools because it keeps on repainting :| – Dayledaylight

There is a watch.js that seems to trigger this (and constantly posts to mc.yandex.ru/webvisor btw) – Radiopaque

@RetoAebersold I think that is a different script used by their website, not part of the api because I'm not seeing it on my local machine. – Dayledaylight

Any work around to stop this? – Daryl

Answer 1

The Uploadcare plugin searches for new widgets on the page every 100ms. This is called live initialization. Internally the plugin uses jQuery (which uses Sizzle selector engine) and this is how Sizzle actually works: it adds id elements to the root element of the search scope before the querying and remove it after. You can verify this with a simple example:

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
  setInterval(function() {
    $.find('[attr]', document.documentElement);
  }, 200);
</script>

If you want to avoid flicking, you have two options. You can disable live initialization at all by adding UPLOADCARE_LIVE = false; to js code. Or you can add any custom id attribute to the html tag. Sizzle will not change it.

In the future, we are planning to use MutationObserver to watch for the new widgets on the page.

Tref

Any update on the MutationObserver patch? This is driving me nuts. – Auspicate

@Auspicate just use one of those methods now to save your sanity. using ID on top html element is the easiest. – Rodmann