Blazor Server长列表场景页面体积过大问题求助及代码示例

解决方案 #

• 优先使用Blazor内置虚拟化组件
  一次性渲染1000条列表项是体积膨胀的核心原因，直接把外层的@foreach替换为Blazor官方内置的<Virtualize>组件，仅渲染当前可视区域内的列表项，通常可视区域仅展示10~30条，直接将初始HTML体积和WebSocket同步报文体积降低95%以上，示例代码如下：

  <Virtualize Items="_itemsSorted" Context="item" ItemSize="60">
      <!-- 原有单条列表项的所有代码放在此处即可，ItemSize填写单条列表的预估高度（单位px） -->
  </Virtualize>
  

• 封装独立列表项组件并指定@key
  把单条列表项的所有逻辑抽成独立的ListItem.razor组件，遍历时指定@key=item.Rank，可以大幅减少Blazor渲染树的冗余节点，降低WebSocket差分更新的报文体积，同时避免不必要的全量重渲染。
• 动态渲染下拉菜单内容
  当前每个列表项的2个下拉菜单DOM全是提前渲染的，1000条会多出近2万条隐藏DOM节点，改成点击按钮时才动态加载下拉菜单内容，不点击就不生成对应DOM，可直接减少40%以上的静态HTML体积。
• 移除冗余行内代码
  把所有重复的行内样式（比如style="width:200px;"）、行内空格  统一抽到CSS文件中，用margin/padding实现间距，减少每个列表项的重复字符，进一步压缩HTML体积。
• 检查环境配置
  开发模式下Blazor会注入大量调试标记和JS代码，生产环境发布后会自动裁剪混淆，体积会比开发环境低30%~50%，不要以开发环境的体积作为生产性能的判断标准。
• 优化状态同步逻辑
  纯展示无交互的内容可以用@rendermode RenderMode.Static指定静态渲染，Blazor不会跟踪这类节点的状态，可大幅降低Circuit状态同步的WebSocket报文体积。

内容的提问来源于stack exchange，提问作者lovesomekunicki