0

私はjQuery 1.11.3とともにPolymer 1.2を使用しています。約25行のHTMLコードを含むカスタム要素「x-example」を定義しました。ネストされた要素の一部は paper-elements (したがって、いくつかの HTML Code 自体を含みます)、一部の標準 HTML-Elements、および 1 つまたは 2 つの独自のカスタム要素 (私の「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 コードの量でした。何人かの素敵な人々が、動的に追加された Web コンポーネントを

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 に答える