环境 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);
}