Question

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

所以，我们可以说我有一个中等大小的自定义元素（我没有那么大的印象）

情况现在是：我从我的服务器发送了一些HTML-markup代码，我只是使用jQuery的append方法附加到一个空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代码的数量。一些不错的人给了我一个关于Google Groups论坛的提示来计算我动态添加的webcomponents

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

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

我减少了我在自定义元素中使用的纸张元素的数量，并且现在需要约600毫秒 - 约700毫秒

Original Answer

Polymer：将自定义元素附加到div非常慢

1 个答案: