0

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

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

现在的情况是：我从服务器发送了一些 HTML 标记代码，我只是使用 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 中测试）是否只需要这么多时间。在用聚合物附加自定义元素时，也许我必须注意一些基本规则？

4

1 回答 1

0

我修好了它！问题确实是我附加的 HTML 代码的数量。一些好心人在 Google Groups 论坛上给了我一个提示，以计算我动态添加的网络组件

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

我试图附加〜8500个元素......

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

原始答案

于 2016-01-12T07:47:12.723 回答