Início / coding / Perguntas / 78380243
Accepted
RISHI RAJ
Asked: 2024-04-25 01:27:51 +0800 CST

Como o Svelte Kit se beneficia da especificação de IDs exclusivos para itens em loop e quais são as implicações de desempenho de não fazer isso?

  • 772

Usuário O problema em questão gira em torno da compreensão da necessidade de especificar IDs exclusivos para itens em loop no Svelte Kit. Especificamente, a investigação investiga as razões por trás deste requisito, as implicações de desempenho de não aderi-lo e como o Svelte Kit otimiza os processos de renderização quando IDs exclusivos são fornecidos. Se você der algum exemplo de que gostar de um benchmark realmente me ajudaria ..! :)

Exemplo com IDs exclusivos

<script>
    let people = [
        { name: 'yoshi', beltColour: 'black', age: 25, id: 1 },
        { name: 'mario', beltColour: 'orange', age: 45, id: 2 },
        { name: 'luigi', beltColour: 'brown', age: 35, id: 3 }
    ];
</script>

<h1>Loops</h1>

{#each people as p (p.id)}
    <h3>{p.name}</h3>
    <p>beltColour: {p.beltColour}</p>
    <p>age: {p.age}</p>
{/each}

Exemplo sem IDs exclusivos

<script>
    let people = [
        { name: 'yoshi', beltColour: 'black', age: 25 },
        { name: 'mario', beltColour: 'orange', age: 45 },
        { name: 'luigi', beltColour: 'brown', age: 35 }
    ];
</script>

<h1>Loops</h1>

{#each people as p}
    <h3>{p.name}</h3>
    <p>beltColour: {p.beltColour}</p>
    <p>age: {p.age}</p>
{/each}

O primeiro exemplo inclui IDs exclusivos para cada item do loop, enquanto o segundo exemplo não. Observar a diferença de desempenho entre os dois cenários, especialmente com um grande conjunto de dados, pode ajudar a compreender a importância de fornecer IDs exclusivos em aplicativos Svelte Kit.

Eu precisava de um exemplo de benchmark adequado, se possível :)

foreach

1 respostas

  1. Best Answer

    Isso realmente não tem nada a ver com o SvelteKit, é um mecanismo central do Svelte.

    Também não tem efeito, a menos que você atualize a lista posteriormente.

    Se existir uma chave, o Svelte poderá mover os nós DOM existentes e realizar menos trabalho, causando menos atualizações do DOM. Não fornecer uma chave também pode causar erros se houver estado local, por exemplo, ao renderizar componentes em um loop que declara suas próprias variáveis.

    Exemplo: Você não tem chave e insere um novo item na frente:

    people = [{ name: 'wario', beltColour: 'yellow', age: 42 }, ...people];

    Svelte não tem ideia de qual operação aconteceu aqui, apenas percebe que a lista mudou e agora está mais longa. Ele (aproximadamente) fará o seguinte:

    • Adicione novo h3, p, pao final, inserindo os valores do item naquele índice (Luigi).
    • Atualize todos os outros elementos DOM alterando o conteúdo.
      Os elementos DOM que continham os dados de Yoshi são alterados para os de Wario, os de Mario são alterados para os de Yoshi, etc.

    REPL mostrando isso

    Se houver uma chave, os elementos existentes serão deixados de lado. Os valores podem ser diferentes, mas como os outros itens não mudaram, nada acontece no DOM.

    As operações de movimentação e exclusões também têm um impacto mínimo dessa forma.

    REPL usando uma chave

    • 1

relate perguntas