Polymer: Appending Custom elements to div is really slow

Question

I am using Polymer 1.2 along with jQuery 1.11.3 I defined a custom element 'x-example', which contains around 25 lines of HTML code. Some of the nested elements are paper-elements (therefore they contain again some HTML Code themselves), some standard HTML-Elements and one or two own custom elements again (which are a lot smaller than my 'x-example'). Beside that, I have 2 CSS rules and 150 lines of Javascript in this custom element.

So, we could say I have a medium sized custom element (I don't have the impression it is unusual big)

Situation is now: I get some HTML-markup Code sent from my server, which I just append to an empty div, using jQuery's append method

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

The markup 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, I have 60 - 70 - elements I want to append (not that much imho)

HOWEVER, this appending needs ~2200ms - ~2400ms.

Now I am wondering, whether I am doing something wrong here or if the Browser (tested in Firefox / Chrome / Opera) just needs this amount of time. Maybe I have to pay attention to some basic rules when appending custom elements with polymer?

Answer 1

I fixed it! The problem was indeed the amount of HTML-Code that I was appending. Some nice people gave me a hint on Google Groups forum to count my dynamically added webcomponents with

console.log(document.querySelectorAll("* /deep/ *").length); // TODO remove
citContainerLiterals.empty();
citContainerLiterals.append(response.Content);
console.log(document.querySelectorAll("* /deep/ *").length); // TODO remove

I was trying to append ~8500 elements...

I reduced the amount of paper-elements I am using in my custom elements and voilà, the appending now needs ~600ms - ~700ms

Original Answer