VisActor
[Bug] 批量删除200条行，页面有明显白屏闪动
Version
lastest and（ v1.19.3）
Link to Minimal Reproduction
https://codesandbox.io/p/devbox/vtable-list-table-forked-hwyy9x?workspaceId=ws_K7v5C97Vyk7KfPKrTjA987
Steps to Reproduce
- 调用删除接口 tableInstance.deleteRecords(rows)， 删除200条数据（比如0-200）
- 观察页面，有明显白屏闪动, (codesandbox中更加明显）
Current Behavior
删除200行有明显白屏闪烁
Expected Behavior
没有闪烁，和新增200的效率record表现一样
Environment
- OS:win10
- Browser: chrome latest
- Framework:
Any additional comments?
查看源码后，发现增删行的入口是在 packages\vtable\src\scenegraph\layout\update-row.ts的 removeCells: CellAddress[]中实现的。
其中，删除调用下面代码。
removeRows.forEach(row => {
removeRow(row, scene, skipUpdateProxy);
});
删除最终调用function removeCellGroup(row: number, scene: Scenegraph): void，会立即从VRender的stage中删除对应的行，这时候引起了白屏，大概16ms左右。
接着在packages\vtable\src\scenegraph\layout\update-row.ts的 removeCells: CellAddress[]中继续处理add和update逻辑，这时候不更新VRender，最终的更新是在scene.proxy.progress()中进行渐进式渲染的，每次延时16ms, 代码块如下，这导致刚才删除后留下的白屏 ，需要16ms后才能被新行填补，出现白屏闪烁。
async progress() {
if (this.isProgressing) {
return;
}
this.isProgressing = true;
return new Promise<void>((resolve, reject) => {
setTimeout(async () => {
this.isProgressing = false;
if (this.isRelease) {
return;
}
// console.log('progress col', this.colUpdatePos, this.colEnd, this.currentCol, this.totalCol);
// console.log('progress row', this.rowUpdatePos, this.rowEnd, this.currentRow, this.totalRow);
// console.log('before: createRow', table.scenegraph.bodyGroup.lastChild.attribute);
// if (this.isSkipProgress) {
// await this.progress();
// } else
if (this.colUpdatePos <= this.colEnd) {
// console.log('progress colUpdatePos', this.colUpdatePos);
await this.updateColCellGroupsAsync();
await this.progress();
} else if (this.rowUpdatePos <= this.rowEnd) {
// console.log('progress rowUpdatePos', this.rowUpdatePos);
// 先更新
await this.updateRowCellGroupsAsync();
await this.progress();
} else if (this.currentCol < this.totalCol) {
await this.createCol();
await this.progress();
} else if (this.currentRow < this.totalRow) {
// console.log('progress currentRow', this.currentRow);
// 先更新没有需要更新的节点，在生成新节点
await this.createRow();
await this.progress();
}
handleTextStick(this.table);
this.table.scenegraph.updateNextFrame();
resolve();
}, 16);
});
}
我尝试修改延时等内容，但不成功。请问是否有官方的经验或者建议？ 感谢
maintainedDataCount 配置这个试试？ 这个内部默认200 调大点看看。不过调大点的话 可能滚动性能会影响
感谢回复，这个参数调大点也不行。看源码和这个没有关系。
