多实例<telerik:RadListBox>在Chrome高版本渲染性能劣化问题咨询

这真是个让人头疼的版本特定性能坑！结合你的场景（7个控件各渲染2400行数据，仅Chrome 83+出现性能暴跌，Load On Demand解决性能但自定义JS失效），我整理了几个可行的解决方向：

一、修复Load On Demand模式下的自定义JS失效问题 #

Load On Demand的核心是异步加载DOM元素，你的自定义JS失效大概率是因为事件绑定只在页面初始加载时执行，新加载的元素没有绑定事件。可以通过以下方式修复：

1. 改用事件委托绑定自定义事件 #

把原来直接绑定到元素的事件，改为委托到RadListBox的容器上，这样不管元素是何时加载的，事件都能触发：

// 替换原来的ItemChecked绑定逻辑
$("#RadListBox1").on("click", ".rlbItem input[type='checkbox']", function() {
    // 这里执行ItemChecked的原有逻辑，或者直接调用ItemChecked函数
    ItemChecked(this);
});

2. 利用RadListBox的客户端生命周期事件重新绑定逻辑 #

RadListBox提供了OnClientItemsRequested（请求新数据时）和OnClientItemDataBound（客户端绑定新项时）事件，可以在这些事件回调里对新加载的元素执行自定义JS逻辑：

function OnClientItemDataBound(sender, args) {
    var item = args.get_item();
    // 对新加载的item执行SetInitialEnable相关的启用状态设置
    SetInitialEnableForItem(item);
}

同时在ascx的RadListBox标签里添加这个事件：

<telerik:RadListBox ... OnClientItemDataBound="OnClientItemDataBound" runat="server"></telerik:RadListBox>

二、启用RadListBox的虚拟化（Virtualization）功能 #

相比Load On Demand，Virtualization是Telerik控件原生支持的DOM虚拟化方案，它只会渲染当前可见区域的列表项，大幅减少页面中的DOM节点数量，既能解决Chrome的性能问题，又能更好地兼容自定义JS逻辑：

配置步骤： #

1. 在RadListBox标签中开启虚拟化，并设置项的高度（根据你的实际行高调整）：

<telerik:RadListBox ID="RadListBox1" 
    ...
    EnableVirtualization="true"
    runat="server">
    <VirtualizationSettings ItemHeight="20px" />
</telerik:RadListBox>

2. 保持原有的自定义JS逻辑不变（或微调事件绑定方式），虚拟化后的列表项依然会触发OnClientItemChecked、OnClientLoad等事件，无需大幅修改代码。

三、延迟加载非首屏的RadListBox控件 #

如果不想修改控件的加载模式，可以尝试分散渲染压力：只在页面初始加载时渲染前2个控件，剩下的5个控件在用户滚动到它们的位置时再进行数据绑定。

实现思路： #

1. 在ascx中，默认不执行RadListBox1.DataBind()，而是给控件添加一个标识类（比如lazy-load-listbox）。
2. 在页面的客户端脚本中，监听滚动事件，当某个lazy-load-listbox进入视口时，通过AJAX调用服务器端方法完成数据绑定，或者触发服务器端的DataBind逻辑（可以使用Telerik的RadAjaxManager来实现无刷新绑定）。

四、优化RadListBox的DOM结构复杂度 #

Chrome 83+对大量复杂DOM元素的渲染性能下降明显，可以简化每个列表项的DOM结构：

1. 使用自定义ItemTemplate替换默认的渲染模板，减少不必要的嵌套元素：

<telerik:RadListBox ... runat="server">
    <ItemTemplate>
        <input type="checkbox" class="rlbCheckBox" value='<%# Eval("ID") %>' />
        <span><%# Eval("Name") %></span>
    </ItemTemplate>
</telerik:RadListBox>

2. 关闭不必要的控件特性，比如如果不需要皮肤样式，可以设置Skin="Default"或自定义极简样式，减少CSS渲染压力。

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