Polymer：将自定义元素附加到 div 真的很慢

Question

我正在使用 Polymer 1.2 和 jQuery 1.11.3 我定义了一个自定义元素 'x-example'，其中包含大约 25 行 HTML 代码。一些嵌套元素是纸质元素（因此它们本身又包含一些 HTML 代码）、一些标准 HTML-元素和一两个自己的自定义元素（比我的小很多 'x-example').除此之外，我在这个自定义元素中有 2 CSS 条规则和 150 行 Javascript。

所以，我们可以说我有一个中等大小的自定义元素（我没有觉得它特别大）

现在的情况是：我从我的服务器收到一些 HTML-markup 代码，我只是使用 jQuery 的追加方法将其追加到一个空的 div 中

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

标记看起来像这样：

<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>
...

总而言之，我有 60 - 70 个元素要附加（恕我直言）

但是，此附加需要 ~2200ms - ~2400ms。

现在我想知道，是我在这里做错了什么，还是浏览器（在 Firefox/Chrome/Opera 中测试）只需要这段时间。也许我在用聚合物附加自定义元素时必须注意一些基本规则？

Answer 1

我修好了！问题确实是我附加的 HTML-Code 的数量。一些好心人在 Google 论坛上给了我一个提示来计算我动态添加的 webcomponents

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

我试图追加 ~8500 个元素...

我减少了我在自定义元素中使用的 paper-elements 的数量，瞧，添加现在需要 ~600ms - ~700ms

Original Answer

Polymer：将自定义元素附加到 div 真的很慢

Polymer: Appending Custom elements to div is really slow

jquery

append

polymer

polymer-1.0

custom-element