Question

У меня странное мерцание при входе в мое приложение на стороне сервера Blazor.

Для лучшего пользовательского опыта я реализовал GIF-троббер, но после этого загрузка идет не так быстро, как вы видите сами:

https://shop6.gastroblitz.de/streetchooser

Моя цель состоит в том, чтобы страница отображалась полностью и за один раз sh после завершения загрузки:

некоторые идеи по проблемам производительности ( но я не знаю, как улучшить свои знания ...):

_Host.cs html

PreRender " HtmlHeadComponent "в области (для создания домена, указывающего c заголовок, метаданные и т. Д. c.)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="~/" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="height=device-height,
                  width=device-width, initial-scale=1.0,
                  minimum-scale=1.0, maximum-scale=1.0,
                  user-scalable=no" />
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" />

<script src="_content/Microsoft.AspNetCore.ProtectedBrowserStorage/protectedBrowserStorage.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/js/animations.js"></script>
<script src="/js/simplebar.min.js"></script>
<script src="/js/articlePopup.js"></script>
<script src="/js/accordion.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js">  </script>
<script src="/js/my.js"></script>
<script src="_content/Blazor-Analytics/blazor-analytics.js"></script>

@(await Html.RenderComponentAsync<HtmlHeadComponent>(RenderMode.ServerPrerendered))
</head>
<body>
<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>

<script src="_framework/blazor.server.js"></script>
<script>
    Blazor.defaultReconnectionHandler._reconnectCallback = function (d) {
        document.location.reload();
    }
</script>
<script src="https://cdn.syncfusion.com/ej2/17.4.43/dist/ej2.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/17.4.43/dist/ejs.interop.min.js"></script>
</body>
</html>

App.razor

Здесь я просто начинаю, когда загружаются все данные (см. Оператор if + множество CascadingParameters для обработки изменений данных в подкомпонентах)

<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
    @if (AppState.StoreData != null &&
     AppState.MultiStoreData != null &&
     AppState.StoreChooserData != null)
    {
        <CascadingValue Value="AppState.StoreData" Name="StoreData">
            <CascadingValue Value="AppState.MultiStoreData" Name="MultiStoreData">
                <CascadingValue Value="AppState.StoreChooserData" Name="StoreChooserData">
                    <CascadingValue Value="AppState.BasketData" Name="BasketData">
                        <CascadingValue Value="AppState.CheckoutData" Name="CheckoutData">
                            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
                            <GoogleAnalytics TrackingId="@AppState.StoreData?.StoreContainer?.Store?.GoogleAnalyticsId" />
                        </CascadingValue>
                    </CascadingValue>
                </CascadingValue>
            </CascadingValue>
        </CascadingValue>
    }
    else
    {
        <img class="center" src="/img-dev/ajax-loader.gif" />
    }
</Found>
<NotFound>
    <LayoutView Layout="@typeof(MainLayout)">
        <p>Sorry, there's nothing at this address.</p>
    </LayoutView>
</NotFound>

Последний шаг - заданная страница storechooser, которая загружает контент также просто тогда все данные доступны

Думаю, одна проблема заключается в том, что изображения запрошены в моем коде очень поздно и вызывают мерцание ...

Но как можно справиться с этим лучше? Или, возможно, другой вопрос может быть какой-то проблемой.

Надеюсь, вы поняли мою точку зрения.

Заранее спасибо!

Vojtěch Dohnal · Answer 1 · 24 января 2020

Я использую MemoryCache для предотвращения мерцания, вызванного использованием RenderMode.ServerPrerendered. Эта проблема обсуждается в этой теме .

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

В блазоре на стороне сервера для этого проще и лучше использовать кэш в памяти.

Это позволяет избежать взлома состояние.

Он может быть объединен с подходом реагирования / избыточности, когда вы просто передаете идентификатор хранилища и помещаете хранилище в кэш памяти с идентификатором, который затем используется для извлечения хранилища, когда приложение переподключается и производит идентичный рендер к тому, который был предварительно отрисован.

В качестве примера ниже приведен модифицированный WeatherService, который показывает, что он не вызывает мерцания.
    public WeatherForecastService(IMemoryCache memoryCache)
    {
        MemoryCache = memoryCache;
    }

    public IMemoryCache MemoryCache { get; }

    public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
    {
        return MemoryCache.GetOrCreateAsync(startDate, async e =>
         {
             e.SetOptions(new MemoryCacheEntryOptions { AbsoluteExpirationRelativeToNow = TimeSpan.FromSeconds(30) });
             var rng = new Random();
             await Task.Delay(TimeSpan.FromSeconds(10));
             return Enumerable.Range(1, 5).Select(index => new WeatherForecast
             {
                 Date = startDate.AddDays(index),
                 TemperatureC = rng.Next(-20, 55),
                 Summary = Summaries[rng.Next(Summaries.Length)]
             }).ToArray();
         });
    }

    private static readonly string[] Summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

Линия await Task.Delay(TimeSpan.FromSeconds(10)); существует только для демонстрационных целей, определенно не нужно ждать 10 секунд.

Blazor Загрузка проблемы с изображениями и Html Head Component

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Blazor Загрузка проблемы с изображениями и Html Head Component

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы