Skip to content
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.

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

优化代码块复制功能的渲染性能 #1502

Merged
merged 1 commit into from
Nov 22, 2023

Conversation

lc-soft
Copy link
Contributor

@lc-soft lc-soft commented Nov 21, 2023

在预览内容很多且包含很多代码片段的文档时,加载速度非常慢,有时会让整个页面卡死。

浏览器的性能分析报告如下:

20231121140553

布局耗时 36 秒,布局排班中的色块是分成很多段的,这说明触发了很多次布局。

点击跳转源码界面,e.innerText 这一行代码耗时最高:

20231121140445

由此可看出每次 e.before(divElement) 后获取元素的 innerText 都会重新布局一次。

解决方法是改成先批量获取 innerText,然后再批量插入新元素。优化后的效果如下,耗时大幅减少。

20231121134203

@Vanessa219 Vanessa219 merged commit fa4bb0f into Vanessa219:dev Nov 22, 2023
@Vanessa219 Vanessa219 changed the title perf: 优化代码块的渲染性能 优化代码块复制功能的渲染性能 Nov 22, 2023
@Vanessa219 Vanessa219 self-requested a review November 22, 2023 01:58
@Vanessa219 Vanessa219 added this to the 3.9 milestone Nov 22, 2023
Vanessa219 added a commit that referenced this pull request Nov 22, 2023
xygengcn pushed a commit to xygengcn/vditor-lite that referenced this pull request Dec 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants