Skip to content

Optimize rendering performance of databases containing relation fields #11249

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
5kyfkr opened this issue May 4, 2024 · 9 comments
Closed

Optimize rendering performance of databases containing relation fields #11249

5kyfkr opened this issue May 4, 2024 · 9 comments
Assignees
@88250
Labels
Enhancement
Milestone
3.0.14

Comments

@5kyfkr
Copy link

5kyfkr commented May 4, 2024 •
edited by 88250
Loading

含有关联列的数据库选项加载速度优化

In what scenarios do you need this feature?

如题，起因是发现我的主题大库和文档大库点开菜单会卡顿60ms左右，后台一直报[Violation] Forced reflow while executing JavaScript took 66ms，一直在强制重排如下图
image

尝试关了插件，但还是会和正常库有30ms左右的延迟区别，详见下视频
https://github.com/siyuan-note/siyuan/assets/63196026/6854917c-98e4-4c03-972b-e6d3a127518c
下面是视频里末端的演示笔记附件，可以复现，点击单选列明显上面的会慢，看性能数据却又是延迟相接近
主题库.sy.zip
只有把关联列都删了就正常了

Describe the optimal solution

希望延迟恢复正常，不强制重排，强制重排的时候是在执行以下JS语句，但是每次好像都不一样，供参考

window.siyuan.hideBreadcrumb && (window.siyuan.hideBreadcrumb = !1,
            Yb().forEach(o=>{
                o.protyle.breadcrumb?.element.classList.contains("protyle-breadcrumb__bar--hide") && (o.protyle.breadcrumb.element.classList.remove("protyle-breadcrumb__bar--hide"),
                o.protyle.breadcrumb.render(o.protyle, !0))
            }
            )),
            !e && t.buttons === 0 && window.siyuan.layout.bottomDock && !(0,
            T.FJ)() && (t.clientX < Math.max(document.getElementById("dockLeft").clientWidth + 1, 16) ? !window.siyuan.layout.leftDock.pin && window.siyuan.layout.leftDock.layout.element.clientWidth > 0 && (window.siyuan.layout.leftDock.element.clientWidth > 0 || window.siyuan.layout.leftDock.element.clientWidth === 0 && t.clientX < 8) && (t.clientY > document.getElementById("toolbar").clientHeight && t.clientY < window.innerHeight - document.getElementById("status").clientHeight - document.getElementById("dockBottom").clientHeight ? !v(t.target, "b3-menu") && !v(t.target, "protyle-toolbar") && !v(t.target, "layout--float") && window.siyuan.layout.leftDock.showDock() : window.siyuan.layout.leftDock.hideDock()) : t.clientX > window.innerWidth - Math.max(document.getElementById("dockRight").clientWidth - 2, 16) && !window.siyuan.layout.rightDock.pin && window.siyuan.layout.rightDock.layout.element.clientWidth > 0 && (window.siyuan.layout.rightDock.element.clientWidth > 0 || window.siyuan.layout.rightDock.element.clientWidth === 0 && t.clientX > window.innerWidth - 8) && (t.clientY > document.getElementById("toolbar").clientHeight && t.clientY < window.innerHeight - document.getElementById("status").clientHeight - document.getElementById("dockBottom").clientHeight ? !v(t.target, "layout--float") && !v(t.target, "protyle-toolbar") && window.siyuan.layout.rightDock.showDock() : window.siyuan.layout.rightDock.hideDock()),
            t.clientY > Math.min(window.innerHeight - 10, window.innerHeight - (window.siyuan.config.uiLayout.hideDock ? 0 : document.getElementById("dockBottom").clientHeight) - document.querySelector("#status").clientHeight) && window.siyuan.layout.bottomDock.showDock());
            const a = t.composedPath()[0];

Describe the candidate solution

No response

Other information

No response
@5kyfkr 5kyfkr changed the title 含有关联列的数据库选项加载速度慢 含有关联列的数据库选项加载速度优化 May 6, 2024
@5kyfkr
Copy link
Author

5kyfkr commented May 6, 2024

最好能像notion一样支持动态加载关联数据库的项目

@5kyfkr
Copy link
Author

5kyfkr commented May 6, 2024 •
edited
Loading

我把主题库的所有关联列删了重新弄，发现加载变快了，但是有了双向关联列还是比没有关联列的数据库慢大概30ms左右，就和视频里后面的区别差不多，notion是先显示界面再加载，没有延迟的，希望有空能优化，还是比较影响数据库操作的流畅感

@TCOTC
Copy link
Contributor

TCOTC commented May 6, 2024 •
edited
Loading

平时用数据库的时候确实会感觉弹出菜单有「延迟」

不过新建数据库试了一下发现好像跟有没有关联列没啥关系

@5kyfkr
Copy link
Author

5kyfkr commented May 6, 2024 •
edited
Loading

平时用数据库的时候确实会感觉弹出菜单有「延迟」

不过新建数据库试了一下发现好像跟有没有关联列没啥关系

要数据量多了才会有感觉，我一百多篇文章分别关联过去主题库下面对应的文档，然后就已经延迟增加了，但是后续速度没有变得更慢，一开始应该是以前3.0.3和3.04遗留了许多修复bug的代码造成卡顿导致延迟60ms，但今天我重新弄了新库添加也是会慢，但是延迟30ms基本能接受，全新的库是10ms左右。另外如果是默认主题加载效率会更高点，但是总归也是有一点点停顿感

@5kyfkr 5kyfkr mentioned this issue May 7, 2024
Closed
@88250
Copy link
Member

88250 commented May 10, 2024

这个和界面重绘应该关系不大，看一下是不是某个网络请求比较慢？

@5kyfkr
Copy link
Author

5kyfkr commented May 10, 2024 •
edited
Loading

这个和界面重绘应该关系不大，看一下是不是某个网络请求比较慢？

image

数据库还会网络请求嘛，上图网络那里也没有相关请求吧，现在是比如加一段JS代码没排除数据库都会影响点击操作速度，有没可能弄出类似notion那种先出界面再转圈加载的方式？如下面视频

22-37-06.mp4

看了似乎已经是这样转圈加载。。但是是整个界面还没出来前那一小截10ms左右也有延迟
image

@88250 88250 self-assigned this May 10, 2024
@88250
Copy link
Member

88250 commented May 10, 2024

找到一个优化点，下个 dev 版本麻烦帮忙测试看看。

@88250 88250 changed the title 含有关联列的数据库选项加载速度优化 Optimize rendering performance of databases containing relation fields May 10, 2024
@88250 88250 added this to the 3.0.14 milestone May 10, 2024
88250 added a commit that referenced this issue May 10, 2024
@88250
⚡ Optimize rendering performance of databases containing relation fie…
0021730 
…lds #11249
88250 added a commit that referenced this issue May 10, 2024
@88250
⚡ Optimize rendering performance of databases containing relation fie…
2ee4533 
…lds #11249
@88250 88250 closed this as completed May 10, 2024
@5kyfkr
Copy link
Author

5kyfkr commented May 12, 2024 •
edited
Loading

dev2试了虽然还是有强制重排，但是速度和感觉比以前快了几十毫秒，基本能和没有双向关联的库比了，排查了插件是日历面板这个插件也会有影响，关了插件20ms，开了就会重排到60ms，总体还是比上版好很多了，把重排前的那段渲染延迟从30ms优化到1ms了，这个插件也不知道怎么排查，好像调用的也是思源内的接口，记录里没有体现出来
image

@5kyfkr
Copy link
Author

5kyfkr commented May 12, 2024 •
edited
Loading

日历面板这个插件，似乎只要开了(图片只是展示插件样式，不点开界面也会有影响)就会在数据库内强制重排，各位大佬们有没有什么办法排查
image

@5kyfkr 5kyfkr mentioned this issue May 12, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@88250 88250

Labels
Enhancement
Projects
None yet
Milestone
3.0.14
Development

No branches or pull requests
3 participants
@88250 @5kyfkr @TCOTC