Appending custom elements is really slow

[skalde...@gmail.com]

Hello everyone, this is my first post here :)

I already asked my question on stackOverflow, but the community there is not that big (yet!), so I wanted to reach some more people by posting here

My problem:

I am using Polymer 1.2 and jQuery 1.11.3

I made a custom element, let's call it <x-example>, which contains ~25 lines of HTML Code

This code exists of some paper-elements, some native HTML elements and one custom element again (which is really small, only one or two lines of HTML)

Now I get some markup from my server, which looks something like this:

<x-example>
    <x-example></x-example>
    <x-example></x-example>
    <x-example></x-example>
    <x-example></x-example>
</x-example>
<x-example>
    <x-example>
        <x-example></x-example>
        <x-example></x-example>
        <x-example></x-example>
    </x-example>
    <x-example></x-example>
    <x-example></x-example>
</x-example>
...

All in all, there are ~60 - 70 <x-example> elements I am receiving

I append it to an empty div like this:

var citContainerLiterals = $('#cit-literals-container');
console.time("LiteralsTreeCallback"); // TODO Remove
citContainerLiterals.empty();
citContainerLiterals.append(markup);
console.timeEnd("LiteralsTreeCallback"); // TODO Remove

This append-operation takes ~2200ms -  ~2400ms of time :/

Why is that? Am I missing some basic concept here?

When I am removing some of the HTML code of my <x-example> element, the loading time decreases immediately

I fear that is not the whole information you might need, so please just tell me all the details I should add

[Elliott Sprehn]

70 elements each with 25 inside it means you're appending 1750 elements, also if there's paper elements they may each contain more elements.

If you run document.querySelectorAll("* /deep/ *").length after the append what is the count?

Appending several hundred paper buttons (or other fancy widget) is indeed slow.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/412c0f84-f541-4b4b-83e2-e6095357b993%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Eric Bidelman]

You can also run this bookmarklet to get total custom element instance count and other useful metrics:

https://gist.github.com/ebidel/57c9e9379ec6b0bda16d

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAPJYB1jexLEWHw7yQ674bneUWhJnQBbgdZGAXivLj-reW9u5QA%40mail.gmail.com.

[skalde...@gmail.com]

Thank you, you are 100% right. I did not realize how many nested elements this really were. Before the append "console.log(document.querySelectorAll("* /deep/ *").length);" says 133. After it 8725... I see the point and I will try to add my needed elements dynamically instead of add them beforehand and just toggle visibility. Thanks again!