codex-team / codex-team/editor.js

Slow rendering of editor blocks due to offsetWidth

Open
#3,022 2 comments 0 reactions 0 assignees View on GitHub
good first issue
Dominant language
TypeScript
Stars
31.9k
Forks
2.2k
Avg merge
1d 1h
Merged PRs (30d)
1

Description

I'm working on a project with EditorJS that renders various lengths of legal documents. In the most massive documents (they are long and a metric ton of DOM-nodes) I've noticed that rendering of the page becomes very slow. Running a Devtools performance recording points towards a EditorJS internal `make`-method that does the following:

```
this.nodes.holder.offsetWidth < this.contentRect.width && this.nodes.wrapper.classList.add(this.CSS.editorWrapperNarrow)
```

Basically it seems to checks if the holder elements width is smaller than the block width and applies the `codex-editor--narrow` CSS if it is?

Here is a screenshot from the Devtools performance recording:
Image

And with a local override in Devtools without the `this.nodes.holder.offsetWidth < this.contentRect.width &&` part:
Image

Goes from +60 second load time to less than 20 seconds.

Any ideas how to solve this? To me this check would be better to conduct only when all the initial editor blocks has rendered?

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by locating the internal `make` method that reads `this.nodes.holder.offsetWidth`, then profile rendering with a very large document to confirm the layout cost. Compare the behavior with and without that width check and verify that the editor still applies `codex-editor--narrow` correctly while substantially reducing initial render time.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.