Udostępnij za pośrednictwem

Blazor: nieznaczne odstępy przycięte ze składników w czasie kompilacji

  • Artykuł

Począwszy od ASP.NET Core 5.0, kompilator Razor pomija nieznaczne odstępy w składnikach Razor (pliki razor ) w czasie kompilacji. Aby zapoznać się z dyskusją, zobacz problem dotnet/aspnetcore#23568.

Wprowadzona wersja

5,0

Stare zachowanie

W wersjach 3.x blazor Server i Blazor WebAssembly biały znak jest honorowany w kodzie źródłowym składnika. Węzły tekstowe tylko odstępów są renderowane w modelu dom (Document Object Model) przeglądarki, nawet jeśli nie ma żadnego efektu wizualnego.

Rozważmy następujący kod składnika Razor:

<ul>
    @foreach (var item in Items)
    {
        <li>
            @item.Text
        </li>
    }
</ul>

Powyższy przykład renderuje dwa węzły odstępów:

  • Poza blokiem kodu @foreach.
  • Wokół elementu <li>.
  • Wokół danych wyjściowych @item.Text.

Lista zawierająca 100 elementów powoduje wyświetlenie 402 węzłów białych znaków. Jest to ponad połowa wszystkich renderowanych węzłów, mimo że żaden z węzłów białych znaków wizualnie nie ma wpływu na renderowane dane wyjściowe.

Podczas renderowania statycznego kodu HTML dla składników białe znaki wewnątrz tagu nie zostały zachowane. Na przykład wyświetl źródło następującego składnika:

<foo        bar="baz"     />

Białe znaki nie są zachowywane. Wstępnie renderowane dane wyjściowe to:

<foo bar="baz" />

Nowe zachowanie

Jeśli nie zostanie użyta @preservewhitespace dyrektywa z wartością true, węzły białych znaków zostaną usunięte, jeśli:

  • Są wiodące lub końcowe w elemecie.
  • Są wiodące lub końcowe w parametrze RenderFragment . Na przykład zawartość podrzędna przekazywana do innego składnika.
  • Poprzedzaj lub postępuj zgodnie z blokiem kodu języka C#, takim jak @if i @foreach.

Przyczyna wprowadzenia zmiany

Celem platformy Blazor w ASP.NET Core 5.0 jest zwiększenie wydajności renderowania i różnic. Nieistotne węzły drzewa odstępów zużywały do 40 procent czasu renderowania w testach porównawczych.

W większości przypadków nie ma to wpływu na układ wizualny renderowanego składnika. Jednak usunięcie białych znaków może mieć wpływ na renderowane dane wyjściowe w przypadku używania reguły CSS, takiej jak white-space: pre. Aby wyłączyć tę optymalizację wydajności i zachować odstępy, wykonaj jedną z następujących czynności:

  • Dodaj dyrektywę @preservewhitespace true w górnej części pliku .razor , aby zastosować preferencję do określonego składnika.
  • Dodaj dyrektywę @preservewhitespace true wewnątrz pliku _Imports.razor , aby zastosować preferencję do całego podkatalogu lub całego projektu.

W większości przypadków nie jest wymagana żadna akcja, ponieważ aplikacje zwykle będą nadal zachowywać się normalnie (ale szybciej). Jeśli usuwanie białych znaków powoduje problemy dla określonego składnika, użyj @preservewhitespace true w tym składniku, aby wyłączyć tę optymalizację.

Dotyczy interfejsów API

Brak