为什么拖放后的服务器响应如此之大且速度慢

Question

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

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

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

任何想法这里发生了什么以及如何消除它？

我正在使用 Vaadin 21.0.4，spring boot 2.5.4。

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

1. 优化数据库查询+索引
2. 尽可能使用@cacheable
3. 使用 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