节点较多，视口操作卡顿

[skyfish-1024]

在较多节点的情况下，当全部元素渲染至视口时（缩放百分比较小），视口操作较为卡顿；视口部分渲染（缩放百分比较大），操作丝滑， 请问这是视口包的问题，还是配置的问题呢？ 节点数据：https://app.skyfish1024.top/release/web/data/test.json 卡顿：

不卡顿：

视频：

https://github.com/user-attachments/assets/633067ea-84e5-4b36-9b8f-9312df14119f

[skyfish-1024]

示例代码：

import { Leafer, Rect } from 'leafer-ui'

import '@leafer-in/viewport' import '@leafer-in/view' const leafer = new Leafer({ view: window,type: 'viewport', move: { holdSpaceKey: false, // 按住空白键拖拽可平移视图 holdMiddleKey: false, // 按住滚轮中键拖拽可平移视图 dragEmpty: true, }, wheel: { zoomMode: 'mouse', preventDefault: true, }, })

fetch("https://app.skyfish1024.top/release/web/data/test.json").then(res=>res.json()).then(data=>{ leafer.add(data.children) })

[leaferjs]

内容全部堆窗口中，多了是会卡的，尤其是使用了阴影、半透明描边等功能。

或者用浏览器的火焰图调试一下，看看主要卡在哪里。

[leaferjs]

有一个光速引擎的插件还在开发中，可以解决缩放大量元素卡顿的问题，可以等后面看看。

[skyfish-1024]

内容全部堆窗口中，多了是会卡的，尤其是使用了阴影、半透明描边等功能。

或者用浏览器的火焰图调试一下，看看主要卡在哪里。

正常来讲，目前的节点数量应该还不至于这么卡，canvas的性能应该不仅于此，后面我也进一步调试，定位一下问题 这是G6的性能示例：https://g6.antv.antgroup.com/examples/performance/massive-data#20000

[skyfish-1024]

有一个光速引擎的插件还在开发中，可以解决缩放大量元素卡顿的问题，可以等后面看看。

期待

[leaferjs]

内容全部堆窗口中，多了是会卡的，尤其是使用了阴影、半透明描边等功能。 或者用浏览器的火焰图调试一下，看看主要卡在哪里。

正常来讲，目前的节点数量应该还不至于这么卡，canvas的性能应该不仅于此，后面我也进一步调试，定位一下问题 这是G6的性能示例：https://g6.antv.antgroup.com/examples/performance/massive-data#20000

可以取消阴影和文字描边试试

[skyfish-1024]

内容全部堆窗口中，多了是会卡的，尤其是使用了阴影、半透明描边等功能。 或者用浏览器的火焰图调试一下，看看主要卡在哪里。

正常来讲，目前的节点数量应该还不至于这么卡，canvas的性能应该不仅于此，后面我也进一步调试，定位一下问题 这是G6的性能示例：https://g6.antv.antgroup.com/examples/performance/massive-data#20000

可以取消阴影和文字描边试试

确实，去掉阴影之后确实好了许多，看样子让ui让步是目前不错的一个办法

[leaferjs]

阴影可以用一张图片代替，可以兼顾性能和美观

[skyfish-1024]

阴影可以用一张图片代替，可以兼顾性能和美观

这确实是一个不错的解决办法