Blazor/Hybird 触屏下单程序调优笔记

环境 Blazor Net8.0 + FreeSql + Bootstrap Blazor 组件

以下都是自己瞎琢磨的和官网资料搬运,肯定有不少错漏和不合理的地方,非常希望各位大佬评论区给我建议和意见.

1. 组件化需要提升渲染性能的组件,例如触摸屏显示每个商品下单数量的商品列表

避免不必要地呈现组件子树, 执行一些初始化渲染后设置按需渲染, 外部控制按需渲染参数


//按需渲染
[Parameter]
public bool RenderQuantity { get; set; } = true;protected override bool ShouldRender() =>  RenderQuantity; protected override void OnAfterRender(bool firstRender)
{if (firstRender){//执行一些初始化渲染后设置按需渲染你的初始化渲染();StateHasChanged();RenderQuantity = false;}
}protected override async Task OnParametersSetAsync()
{if (RenderQuantity){_ = Task.Run(async () =>{await Task.Delay(500);RenderQuantity = false;});}
}

调用的页面,添加 RenderQuantity 控制渲染数量变化时机. 避免 StateHasChanged() 执行后渲染子组件.

<OrdersMenuList OrderID="@OrderID" RenderQuantity="@RenderQuantity"Refresh="@RefreshOrdersMenuList"
/>private bool RenderQuantity { get; set; }

2. API和UI分离: 例如更新订单数量,操作内存数据渲染到UI,不要等待后台查询订单详单列表后在刷新UI. 异步执行后台服务更新订单数量.

UI 更新数量

Task UpdateQuantity(string userCode, int thisQuantity= 1)
{//更新订单数量,操作内存数据,不查询数据库,提高性能. API和UI分离var itemOrdersMenu = OrdersMenu.Where(a => a.UserCode == userCode).FirstOrDefault();if (itemOrdersMenu != null){itemOrdersMenu.Quantity = thisQuantity;RenderQuantity = true;} _ = Task.Run(async () =>{//更新订单数量,返回合计var newOrderdetailsDto = DataService.UpdateQuantity(userCode,thisQuantity);if (newOrderdetailsDto.ForceQuantity!=null){//处理脏数据问题,更新订单数量为强制数量item.Quantity = newOrderdetailsDto.ForceQuantity.Value;if (itemOrdersMenu != null){itemOrdersMenu.Quantity = newOrderdetailsDto.ForceQuantity;RenderQuantity = true; }await InvokeAsync(StateHasChanged);}});return Task.CompletedTask;
}

Tips: 对于长时间不操作的订单界面,例如收银台桌面程序(Blazor/Blazor Hybird), 可以设置一个 UI 更新数量定时器, 例如间隔5分钟重新刷新整页.

3. 脏数据: 因为是多终结点程序(PC浏览器/手机浏览器/PDA/桌面版),不可避免存在脏数据问题. 需要变更单行订单数量刷新UI后, 获取后台单行订单数量,比对,有异常则重新执行 RenderQuantity 或 StateHasChanged 更新单行订单数量.

4. 服务端不要直接更新订单数量,改为原子操作, 采用 a.Quantity = a.Quantity + thisQuantity 方式

服务端 DataService.UpdateQuantity 方法:

fsql.Update<ResOrderDetails>().Set(a => new ResOrderDetails(){Quantity = a.Quantity + thisQuantity}).Where(a => a.OrderID == orderID && a.UserCode == userCode).ExecuteAffrows();

5. Button 尽可能使用 OnClickWithoutRender 方法: 点击按钮时触发此事件并且不刷新当前组件，用于提高性能时使用.

6. 使用 CascadingValue 组件具有可选的 IsFixed 参数

如果 IsFixed 为 false（默认值），则级联值的每个接收方都会将订阅设置为接收更改通知。由于订阅跟踪，每个 [CascadingParameter] 的开销大体上都要比常规 [Parameter] 昂贵。
如果 IsFixed 为 true（例如，），则接收方会接收初始值，但不会将订阅设置为接收更新。每个 [CascadingParameter] 都是轻型的，并不比常规 [Parameter] 昂贵。

如果有大量其他组件接收级联值，则将 IsFixed 设置为 true 可提高性能。只要有可能，就应将级联值的 IsFixed 设置为 true。当提供的值不会随时间而改变时，可以将 IsFixed 设置为 true。

在组件将 this 作为级联值传递时，也可以将 IsFixed 设置为 true：

<CascadingValue Value="this" IsFixed="true"><SomeOtherComponents>
</CascadingValue>

7. 不要过快触发事件

某些浏览器事件极频繁地触发。例如，onmousemove 和 onscroll 每秒可以触发数十或数百次。在大多数情况下，不需要经常执行 UI 更新。如果事件触发速度过快，可能会损害 UI 响应能力或消耗过多的 CPU 时间。

请考虑使用 JS 互操作来注册不太频繁触发的回调，而不是使用快速触发的本机事件。例如，以下组件显示鼠标的位置，但每 500 毫秒最多只能更新一次：

@implements IDisposable
@inject IJSRuntime JS<h1>@message</h1><div @ref="mouseMoveElement" style="border:1px dashed red;height:200px;">Move mouse here
</div>@code {private ElementReference mouseMoveElement;private DotNetObjectReference<MyComponent>? selfReference;private string message = "Move the mouse in the box";[JSInvokable]public void HandleMouseMove(int x, int y){message = $"Mouse move at {x}, {y}";StateHasChanged();}protected override async Task OnAfterRenderAsync(bool firstRender){if (firstRender){selfReference = DotNetObjectReference.Create(this);var minInterval = 500;await JS.InvokeVoidAsync("onThrottledMouseMove", mouseMoveElement, selfReference, minInterval);}}public void Dispose() => selfReference?.Dispose();
}

相应的 JavaScript 代码会注册用于鼠标移动的 DOM 事件侦听器。在此示例中，事件侦听器使用 Lodash 的 throttle 函数来限制调用速率：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
<script>function onThrottledMouseMove(elem, component, interval) {elem.addEventListener('mousemove', _.throttle(e => {component.invokeMethodAsync('HandleMouseMove', e.offsetX, e.offsetY);}, interval));}
</script>

8. 使用缓存

private ConcurrentDictionary<TabItem, bool> LazyTabCache { get; } = new();private RenderFragment RenderTabItemContent(TabItem item) => builder =>
{if (item.IsActive){var content = _errorContent ?? item.ChildContent;builder.AddContent(0, content);_errorContent = null;if (IsLazyLoadTabItem){LazyTabCache.AddOrUpdate(item, _ => true, (_, _) => true);}}else if (!IsLazyLoadTabItem || item.AlwaysLoad || LazyTabCache.TryGetValue(item, out var init) && init){builder.AddContent(0, item.ChildContent);}
};
private RenderFragment? _errorContent;

private static readonly ConcurrentDictionary<Type, UrlValueConstraint> _cachedInstances = new();if (!_cachedInstances.TryGetValue(targetType, out result))
{result = Create(targetType);if (result is null){return false;}_cachedInstances.TryAdd(targetType, result);
}