Polymer: добавление пользовательских элементов в div происходит очень медленно

Я использую Polymer 1.2 вместе с jQuery 1.11.3. Я определил пользовательский элемент «x-example», который содержит около 25 строк кода HTML. Некоторые из вложенных элементов являются бумажными элементами (поэтому они снова содержат некоторый HTML-код), некоторые стандартные HTML-элементы и снова один или два собственных пользовательских элемента (которые намного меньше, чем мой «x-пример»). Кроме того, у меня есть 2 правила CSS и 150 строк Javascript в этом пользовательском элементе.

Таким образом, мы могли бы сказать, что у меня есть пользовательский элемент среднего размера (у меня нет впечатления, что он необычно большой)

Ситуация сейчас: я получаю код HTML-разметки, отправленный с моего сервера, который я просто добавляю к пустому div, используя метод добавления jQuery

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 элементов, которые я хочу добавить (не так уж много, имхо)

ОДНАКО для этого добавления требуется ~ 2200 мс - ~ 2400 мс.

Теперь мне интересно, делаю ли я что-то не так или браузеру (проверено в Firefox/Chrome/Opera) просто нужно это количество времени. Может быть, мне следует обратить внимание на некоторые основные правила при добавлении пользовательских элементов с полимером?


jquery custom-element append polymer polymer-1.0
person skaldesh    schedule 07.01.2016    source источник
comment
Трудно помочь без более подробной информации о том, как веб-компонент и как вы добавляете. Я предполагаю, что вы уже исключили медленное соединение с сервером как проблему.   -  person Chris W    schedule 09.01.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я починил это! Проблема действительно заключалась в количестве HTML-кода, который я добавлял. Некоторые хорошие люди дали мне подсказку на форуме групп Google, чтобы подсчитать мои динамически добавленные веб-компоненты с помощью

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

Исходный ответ

person skaldesh    schedule 12.01.2016