Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why uploadcare is repainting html tag every N ms?

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?

like image 941
Jo E. Avatar asked Oct 03 '15 15:10

Jo E.


1 Answers

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.

like image 119
homm Avatar answered Nov 15 '22 15:11

homm