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

[Bug] Performance: Slugify calculations causing significant slowdown in medium/large document initial paste and editing #1601

Open
2 tasks done
ValeriyDyachenko opened this issue Dec 23, 2024 · 1 comment
Assignees
Labels
bug Something isn't working

Comments

@ValeriyDyachenko
Copy link

ValeriyDyachenko commented Dec 23, 2024

Initial checklist

  • I agree to follow the code of conduct
  • I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Affected packages and versions

@milkdown/crepe 7.5.7

Link to runnable example

No response

Steps to reproduce

Create or open a large document (~150kb)
Try to paste content or edit any node in the document
Open performance tab in dev tools to observe the slugify method calls

Expected behavior

Document loading and editing should be fast and responsive
Slugify operations should only run when necessary (e.g., for headings)
Performance should not significantly degrade with larger documents

research:
An important note - these method calls were occurring when editing any node, not just headings. For testing, I patched the library's slugify method (@sindresorhus/slugify/index.js) so that instead of its calculations, it would simply return the string 'slugify'. And this immediately solved 2 problems - the initial document loading (paste) happened instantly instead of taking 15 seconds. Document editing began to occur without noticeable delays.

Actual behavior

Initial document loading (paste for 150kb markdown) takes around 15 seconds (MacBook pro M1)
Editing has noticeable delays
Performance tab shows excessive calls to @sindresorhus/slugify/index.js
Slugify is being called on every node change, not just headings
When patched to return a static string 'slugify', performance immediately improves

Document loading becomes instant
Editing becomes responsive without delays

Runtime

Chrome

OS

macOS

Build and bundle tools

Vite

@ValeriyDyachenko ValeriyDyachenko added the bug Something isn't working label Dec 23, 2024
@ValeriyDyachenko ValeriyDyachenko changed the title [Bug] Performance: Slugify calculations causing significant slowdown in medium/large document loading and editing [Bug] Performance: Slugify calculations causing significant slowdown in medium/large document initial paste and editing Dec 23, 2024
@ValeriyDyachenko
Copy link
Author

This fixed the issue:

import { headingIdGenerator } from '@milkdown/preset-commonmark';
// ...
  this.crepe.editor
    .config(ctx => {
      ctx.set(headingIdGenerator.key, value => value.textContent);
      // ...

Slugify significantly impacts performance, what was the idea behind using it? Why are heading IDs being regenerated in the document on every keystroke, and how are these IDs being used?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants