baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
17.14k stars 2.48k forks source link

crud,50列,100行,渲染速度特别慢 #10925

Closed songyinhai2006 closed 5 days ago

songyinhai2006 commented 6 days ago

描述问题:

一个普通的crud,列数相对比较多,50列左右,100行,渲染的速度特别慢,10S+才能渲染出来。 特地部署了一个外网环境,作者可以体验一下,初次渲染以及分页选择都很慢。希望作者能改进一下。 补充:之前crud慢是因为行比较多,现在行通过懒加载,解决了渲染慢的问题。 现在慢应该是因为列多了,超过30列好像就开始慢了。

截图或视频:

https://github.com/user-attachments/assets/7431563e-497d-478e-a0d9-4b122b7b20f4

如何复现(请务必完整填写下面内容):

  1. 你是如何使用 amis 的? sdk

  2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在 6.8

  3. 粘贴有问题的完整 amis schema 代码: { "type": "crud", "syncLocation": false, "api": { "method": "post", "url": "http://121.36.242.230:81/api/amisTest/getAmisTestPages", "requestAdaptor": "", "adaptor": "", "messages": {} }, "bulkActions": [], "itemActions": [], "id": "u:8b77ba0ea1c9", "perPageAvailable": [ 50, 100, 200, 500 ], "messages": {}, "autoFillHeight": true, "footerToolbar": [ { "type": "statistics" }, { "type": "pagination" }, { "type": "switch-per-page", "tpl": "内容", "wrapperComponent": "", "id": "u:b9392591aecb", "align": "left" } ], "perPage": 100, "headerToolbar": [ { "type": "bulk-actions" }, { "type": "button", "tpl": "内容", "wrapperComponent": "", "id": "2bb5f6d09550", "label": "刷新", "onEvent": { "click": { "weight": 0, "actions": [ { "componentId": "u:8b77ba0ea1c9", "ignoreError": false, "actionType": "reload" } ] } } } ], "columns": [ { "name": "id", "label": "id", "type": "text", "id": "u:583a95224a0e" }, { "name": "c1", "label": "c1", "type": "text", "id": "u:497b43e309e1" }, { "name": "c2", "label": "c2", "type": "text", "id": "u:6faab3ee0b0a" }, { "name": "c3", "label": "c3", "type": "text", "id": "u:bf1b80676b82" }, { "name": "c4", "label": "c4", "type": "text", "id": "u:29e32237cd51" }, { "name": "c5", "label": "c5", "type": "text", "id": "u:d7516a0518cd" }, { "name": "c6", "label": "c6", "type": "text", "id": "u:ad612938d78b" }, { "name": "c7", "label": "c7", "type": "text", "id": "u:8af14acf93e1" }, { "name": "c8", "label": "c8", "type": "text", "id": "u:e09e406f749f" }, { "name": "c9", "label": "c9", "type": "text", "id": "u:b9df89381a40" }, { "name": "c10", "label": "c10", "type": "text", "id": "u:302aae946350" }, { "name": "c11", "label": "c11", "type": "text", "id": "u:70a77060c184" }, { "name": "c12", "label": "c12", "type": "text", "id": "u:6d343fc474e7" }, { "name": "c13", "label": "c13", "type": "text", "id": "u:c0496b078e6f" }, { "name": "c14", "label": "c14", "type": "text", "id": "u:6887c7610b35" }, { "name": "c15", "label": "c15", "type": "text", "id": "u:541fdf3f4f77" }, { "name": "c16", "label": "c16", "type": "text", "id": "u:84ed76117e5c" }, { "name": "c17", "label": "c17", "type": "text", "id": "u:7875abe81612" }, { "name": "c18", "label": "c18", "type": "text", "id": "u:c53bd2917a17" }, { "name": "c19", "label": "c19", "type": "text", "id": "u:7377c81d8340" }, { "name": "c20", "label": "c20", "type": "text", "id": "u:08f7d4342f29" }, { "name": "c21", "label": "c21", "type": "text", "id": "u:da2a42b8c3fc" }, { "name": "c22", "label": "c22", "type": "text", "id": "u:1aaa0146fcda" }, { "name": "c23", "label": "c23", "type": "text", "id": "u:4db6e474af9d" }, { "name": "c24", "label": "c24", "type": "text", "id": "u:3937c26fab44" }, { "name": "c25", "label": "c25", "type": "text", "id": "u:72975ad53c61" }, { "name": "c26", "label": "c26", "type": "text", "id": "u:ffcf147cae60" }, { "name": "c27", "label": "c27", "type": "text", "id": "u:201a5d3e14cc" }, { "name": "c28", "label": "c28", "type": "text", "id": "u:9817476a392f" }, { "name": "c29", "label": "c29", "type": "text", "id": "u:449c1f5d45dd" }, { "name": "c30", "label": "c30", "type": "text", "id": "u:bb430d1666ea" }, { "name": "c31", "label": "c31", "type": "text", "id": "u:116a2e8e4e55" }, { "name": "c32", "label": "c32", "type": "text", "id": "u:a38ac68c2e43" }, { "name": "c33", "label": "c33", "type": "text", "id": "u:dc073cedb2fe" }, { "name": "c34", "label": "c34", "type": "text", "id": "u:e33998d71a34" }, { "name": "c35", "label": "c35", "type": "text", "id": "u:b9f029f42b61" }, { "name": "c36", "label": "c36", "type": "text", "id": "u:8e417b27ef85" }, { "name": "c37", "label": "c37", "type": "text", "id": "u:2a645715f0fb" }, { "name": "c38", "label": "c38", "type": "text", "id": "u:c9cbedd02efb" }, { "name": "c39", "label": "c39", "type": "text", "id": "u:18e3d9efafeb" }, { "name": "c40", "label": "c40", "type": "text", "id": "u:2400ee486011" }, { "name": "c41", "label": "c41", "type": "text", "id": "u:7e6db6b129f4" }, { "name": "c42", "label": "c42", "type": "text", "id": "u:43522f91b72c" }, { "name": "c43", "label": "c43", "type": "text", "id": "u:6804c828048e" }, { "name": "c44", "label": "c44", "type": "text", "id": "u:4cb180e23b0d" }, { "name": "c45", "label": "c45", "type": "text", "id": "u:5510600d0620" }, { "name": "c46", "label": "c46", "type": "text", "id": "u:b15bfbb74b1a" }, { "name": "c47", "label": "c47", "type": "text", "id": "u:a331151b641c" }, { "name": "c48", "label": "c48", "type": "text", "id": "u:f402717c1b7a" }, { "name": "c49", "label": "c49", "type": "text", "id": "u:42f69249f564" }, { "name": "c50", "label": "c50", "type": "text", "id": "u:2b071b56145c" } ] }

CheshireJCat commented 5 days ago

看起来你的使用场景是渲染 excel,建议换成 table 或者 table2 组件,然后配置 lazyRenderAfter 属性优化试试 image

songyinhai2006 commented 5 days ago

看起来你的使用场景是渲染 excel,建议换成 table 或者 table2 组件,然后配置 lazyRenderAfter 属性优化试试 image

我补充一下,这个不是仅仅查询效果,上面的amis schema,只是想表达速度慢。在此基础上还需要增加各种类型的操作按钮(按钮组等等)。 image 请问,这个如何在table2上快速添加相关按钮。