为什么拖放后服务器响应又大又慢

Question

我在网格之间拖动卡片时遇到一些性能问题。从后端的角度来看，更改后存储来自网格的数据大约需要 200 毫秒。

但是，当后端工作似乎完成时，前端又需要 2.5 秒才能从请求中获得响应。花费这么长时间的请求联系了 2 个 rpc 事件：grid-drop 和 grid-dragend。

我认为反应也异常大。只是给你一个想法，看截图......注意右边的小滚动条。 TTFB 为 2,42s，下载大小约半 MB。

知道这里发生了什么以及如何消除它吗？

我正在使用 Vaadin 21.0.4，spring 启动 2.5.4。

我为优化性能采取的步骤：

优化数据库查询+索引
尽可能使用@cacheable
使用 LitElement 实现了卡片

这是下拉监听器：


ComponentEventListener<GridDropEvent<Task>> dropListener = event -> {
            if (dragSource != null) {
                // The item ontop or below where the source item is dropped. Used to calculate the index of the newly dropped item(s)
                Optional<Task> targetItem = event.getDropTargetItem();
                // if the item is dropped on an existing row and the dragged item contains the same items that's being dropped.
                if (targetItem.isPresent() && draggedItems.contains(targetItem.get())) {
                    return;
                }

                // Add dragged items to the grid of the target room
                Grid<Task> targetGrid = event.getSource();
                Optional<Room> room = dayPlanningView.getRoomForGrid(targetGrid);

                // The items of the target Grid. Using listdataview so this would not retrigger the query
                List<Task> targetItems = targetGrid.getListDataView().getItems().toList();

//               Calculate the position of the dropped item
                int index = targetItem.map(task -> targetItems.indexOf(task)
                                + (event.getDropLocation() == GridDropLocation.BELOW ? 1 : 0))
                        .orElse(0);

                room.ifPresent(r -> service.plan(draggedItems, r, index, dayPlanningView.getSelectedDate()));
// send event to update other users
                Optional<ScheduleUpdatedEvent> scheduleUpdatedEvent = room.map(r -> new ScheduleUpdatedEvent(PlanningMasterDetailView.this, r.getId()));
                scheduleUpdatedEvent.ifPresent(Broadcaster::broadcast);

// remove items from the source grid. using list provider so items can be removed without DB round-trip.
    productionOrderGrid.getListDataView().removeItems(draggedItems);

            }
        };

我现在有点卡住了，因为我有点没主意了

谢谢

Answer 1

您应该使用 TemplateRenderer/LitRenderer 而不是 ComponentRenderer，因为生成的服务器端组件会影响性能：

在此处阅读更多内容：https://vaadin.com/blog/top-5-most-common-vaadin-performance-pitfalls-and-how-to-avoid-them

为什么拖放后服务器响应又大又慢

Why is the server response after a Drag&Drop so large and slow

vaadin-grid

vaadin-flow

vaadin14