Ck editor initializing is so slow. #82

afwn90cj93201nixr2e1re · 2019-07-20T23:16:21Z

Comment.

Mgsy · 2019-07-22T12:06:44Z

@oleq, can you take a look at this one?

oleq · 2019-07-22T13:34:29Z

What's the version of ckeditor5-vue? Also, can you confirm it's the same in the stable version of Firefox?

oleq · 2019-07-22T13:46:25Z

Can you share the editor data you're using to initialize it?

oleq · 2019-07-22T14:35:38Z

I cannot reproduce it.

In an empty directory, I called:

yarn add vue @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-decoupled-document

Then I used the following index.html.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>Hello world!</h1>
		
		<div id="app">
			<ckeditor :editor="editor" v-model="editorData" @ready="onReady"></ckeditor>
		</div>

		<script src="node_modules/vue/dist/vue.min.js"></script>
		<script src="node_modules/@ckeditor/ckeditor5-build-decoupled-document/build/ckeditor.js"></script>
		<script src="node_modules/@ckeditor/ckeditor5-vue/dist/ckeditor.js"></script>

		<script>
			Vue.use( CKEditor );

			const app = new Vue( {
				el: '#app',
				data: {
					editor: DecoupledEditor,
					editorData: '<p>Content of the editor.</p>',
				},
				methods: {
					onReady( editor ) {
						// Insert the toolbar before the editable area.
						editor.ui.getEditableElement().parentElement.insertBefore(
							editor.ui.view.toolbar.element,
							editor.ui.getEditableElement()
						);
					}
				}
			} );
		</script>
		<style>
			.ck.ck-editor__editable_inline {
				border: 1px solid #ccc;
			}
		</style>
	</body>
</html>

I cannot say its blazingly fast (because it's still 0.5MB JS in the CKEditor build), but it's nothing like 3s of waiting. Can you confirm using this minimal sample?

oleq · 2019-07-22T14:48:02Z

I mean, do you experience the lag when using the sample I provided?

oleq · 2019-07-22T15:15:37Z

It takes around .6s on my machine (i7 Macbook Pro)

It could be that it takes more than 1s on low–end hardware but it's far from 3s like you mentioned.

Mgsy · 2019-08-05T10:58:28Z

I'm closing this issue as we're not able to reproduce the problem. If you'll have some more information about it, feel free to comment - we'll check it.

afwn90cj93201nixr2e1re · 2019-08-10T15:41:42Z

@oleq i tested some another wysiwyg component's.
Froala first instance load - 0.7s.
Each next instance on page loading take ~0.6s.

Scrumpy - first instance load - 0.5s.
Each next instance on page loading take 0.5s.

I tested this with full plugin's list enabled.

But ckeditor decoupled loading take's too much time on notebook's for example. But there not too much plugins like in froala, which loading too faster.

afwn90cj93201nixr2e1re · 2019-08-10T15:43:20Z

So, maybe you should take some test's and detect which one function loading takes too much time?
Coz this is very bad now.
Only Bold, Italic and text highliting plugins enabled by default.

oleq · 2019-08-12T11:31:50Z

See #82 (comment)

Without the content you load into the editor it's hard for us to test or relate to your issue.

afwn90cj93201nixr2e1re · 2019-08-12T11:53:36Z

I said, it's empty.
Im using your example. xD.
#82 (comment)

It's not related to data rendering at all, it's some js/timeouts/promises problem.

Reinmar · 2019-08-12T12:00:14Z

Could you provide a sample, with all the code and dependencies on which we could reproduce this (ideally, a repository)? Just to be sure we're looking at the exact same thing. Right now, we don't see any major issue but perhaps we're checking something slightly different than you.

Also, please share a screenshot of a timeline recorded on this demo.

afwn90cj93201nixr2e1re · 2019-08-12T12:32:49Z

test123.zip

profile.zip

As i said above im using empty project for testing.
And it takes near 3 seconds.

oleq · 2019-08-13T09:11:20Z

Thanks for the sample and the profile. I used the sample and here are the results:

@afwn90cj93201nixr2e1re 's waterfall (~3,5s)

My waterfall (~0,7s)

I admit the difference is huge (it's around 5x) and TBH I'm not sure why. Could it be my hardware is 5 times faster in that case?

I tested in vanilla Firefox 68.0.1 (64-bit) (no add-ons etc.). Can you @afwn90cj93201nixr2e1re perform the same test in a clean Firefox installation? Just to make sure we're on the same page.

afwn90cj93201nixr2e1re · 2019-08-13T14:41:20Z

it was clean. it's not related to browser or cpu, i mean more huge wyswigs initiazing take near 0.5s(#82 (comment)), but with ckeditor it take's near 3s.
Im on i9 8950HK, 2.9.

Maybe you can create some build with debug where we can find info about how many time takes each function?

oleq · 2019-08-14T07:23:04Z

I ran the same test on another machine (Windows 10 this time) with a 10-year old CPU (Phenom II X4) and it took 1.5s to initialize the editor:

We know there's room for improvement (in various parts of the editor framework) but it's not nearly as bad as you suggest. And given your hardware configuration (Intel i9) this is even more disturbing because the editor should initialize way, way faster.

So my guess it's either your OS (which one, BTW? Is it Linux?) or some other components (GPU?) causing some issues. Maybe you could try and run this demo on another machine and we could compare the results?

Anyway, this is the first time we see a performance issue this off the scale. There were some in the past but this is a new level. Unless we have more data (cases), it's hard for us to figure anything out because (as you saw) I tried to reproduce the problem but to no avail. Sorry 😔

afwn90cj93201nixr2e1re · 2019-08-14T07:28:05Z

What about this one? It's also can help to check which function initializing take's too much in future

Maybe you can create some build with debug where we can find info about how many time takes each function?

7/8.1/10 win, 1060 6gb, 16gb RAM.

oleq · 2019-08-14T10:38:18Z

What about this one? It's also can help to check which function initializing take's too much in future

You can get this information straight, e.g. from Chrome dev tools (waterfall in the performance tab). There are plenty of functions that are used excessively and could be optimized but there's no single culprit here (like "one place to fix it all").

afwn90cj93201nixr2e1re · 2019-08-14T10:39:29Z

No, i can't. Coz it's minized. And here no options to get each function executing time.

pshurygin · 2019-11-13T15:10:33Z

@oleq I wonder if there is any way to improve startup performance. I'm initializing ckeditor on user click and it takes about 400-800ms on my desktop i7 6700, which is a noticable delay. If i do the same with 4x throttling in dev tools, this time goes up to 3s+, which means it is pretty much unusable for people with low-spec laptops.

I'm talking here about initializing editor with just a few words without any initial formatting, so that it is not the input size problem. Also, i'm using custom build with just the plugins i need(pretty close to the official balloon build).

Maybe there is some way to pre-initialize ckeditor without content and without adding it to DOM? Or some other workaround to improve startup performance with initialize-on-click strategy.

oleq · 2019-11-15T09:39:44Z

@pshurygin Do you experience this lag using the Vue adapter only or also when using the vanilla CKEditor API (SomeEditor.create())? I'm trying to find the root of the problem.

afwn90cj93201nixr2e1re · 2019-11-15T10:20:32Z

Can you create vue app with vanilla CKEditor initializing with checkbox, xD? We are not familiar with CKEditor like you.

afwn90cj93201nixr2e1re · 2019-11-15T10:29:30Z

afwn90cj93201nixr2e1re · 2019-11-15T10:34:04Z

xD, that's strange, with async await it takes 2 seconds.

Sometimes:

afwn90cj93201nixr2e1re · 2019-11-15T10:44:55Z

pshurygin · 2019-11-15T10:58:51Z

@oleq I'm using vanilla api BalloonEditor.create()

afwn90cj93201nixr2e1re · 2019-11-15T11:03:57Z

So, i can confirm that the problem is not in css files and svg boxes, xD:

But browser throw attention that will-change require too much memory.

afwn90cj93201nixr2e1re · 2019-11-15T11:15:53Z

First init:

Second init:

So, the most time seems taken by ui init.

Especially by toolbar init(it's second init on same page, first init just * 2):

Here is too many .map iterations, so, i think that we should avoid it if its possible.

thorgeir · 2022-04-20T15:04:05Z

Hi, I just overcame a painfully slow initialization of ckeditor 5.
Turns out the sample code given on ckeditor.com for the webpack.config.js was to blame.

What I changed was this section in webpack.config.js:

test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
use: [
	{
		loader: 'style-loader',
		options: {
			injectType: 'singletonStyleTag',
			attributes: {
				'data-cke': true
			}
		}
	},
	{
		loader: 'postcss-loader',
		options: styles.getPostCssConfig({
			themeImporter: {
				themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
			},
			minify: true
		})
	},
]

To

test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
use: [
	{
		loader: MiniCssExtractPlugin.loader,
	},
	{
		loader: 'postcss-loader',
		options: styles.getPostCssConfig({
			themeImporter: {
				themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
			},
			minify: true
		})
	},
]

Hope this helps someone.

oleq added the pending:feedback This issue is blocked by necessary feedback. label Jul 22, 2019

Mgsy closed this as completed Aug 5, 2019

Mgsy added resolution:invalid This issue is invalid (e.g. reports a non-existent bug or a by-design behavior). and removed pending:feedback This issue is blocked by necessary feedback. labels Aug 5, 2019

benjaminprojas mentioned this issue Jan 23, 2020

Building from Source with multiple editors on a page is causing lag on initialization #124

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ck editor initializing is so slow. #82

Ck editor initializing is so slow. #82

afwn90cj93201nixr2e1re commented Jul 20, 2019

Mgsy commented Jul 22, 2019

oleq commented Jul 22, 2019 •

edited

oleq commented Jul 22, 2019

oleq commented Jul 22, 2019 •

edited

oleq commented Jul 22, 2019

oleq commented Jul 22, 2019

Mgsy commented Aug 5, 2019

afwn90cj93201nixr2e1re commented Aug 10, 2019

afwn90cj93201nixr2e1re commented Aug 10, 2019

oleq commented Aug 12, 2019

afwn90cj93201nixr2e1re commented Aug 12, 2019

Reinmar commented Aug 12, 2019 •

edited

afwn90cj93201nixr2e1re commented Aug 12, 2019

oleq commented Aug 13, 2019

afwn90cj93201nixr2e1re commented Aug 13, 2019 •

edited

oleq commented Aug 14, 2019

afwn90cj93201nixr2e1re commented Aug 14, 2019 •

edited

oleq commented Aug 14, 2019

afwn90cj93201nixr2e1re commented Aug 14, 2019

pshurygin commented Nov 13, 2019

oleq commented Nov 15, 2019

afwn90cj93201nixr2e1re commented Nov 15, 2019

afwn90cj93201nixr2e1re commented Nov 15, 2019

afwn90cj93201nixr2e1re commented Nov 15, 2019 •

edited

afwn90cj93201nixr2e1re commented Nov 15, 2019

pshurygin commented Nov 15, 2019

afwn90cj93201nixr2e1re commented Nov 15, 2019

afwn90cj93201nixr2e1re commented Nov 15, 2019 •

edited

thorgeir commented Apr 20, 2022

Ck editor initializing is so slow. #82

Ck editor initializing is so slow. #82

Comments

afwn90cj93201nixr2e1re commented Jul 20, 2019

Mgsy commented Jul 22, 2019

oleq commented Jul 22, 2019 • edited

oleq commented Jul 22, 2019

oleq commented Jul 22, 2019 • edited

oleq commented Jul 22, 2019

oleq commented Jul 22, 2019

Mgsy commented Aug 5, 2019

afwn90cj93201nixr2e1re commented Aug 10, 2019

afwn90cj93201nixr2e1re commented Aug 10, 2019

oleq commented Aug 12, 2019

afwn90cj93201nixr2e1re commented Aug 12, 2019

Reinmar commented Aug 12, 2019 • edited

afwn90cj93201nixr2e1re commented Aug 12, 2019

oleq commented Aug 13, 2019

@afwn90cj93201nixr2e1re 's waterfall (~3,5s)

My waterfall (~0,7s)

afwn90cj93201nixr2e1re commented Aug 13, 2019 • edited

oleq commented Aug 14, 2019

afwn90cj93201nixr2e1re commented Aug 14, 2019 • edited

oleq commented Aug 14, 2019

afwn90cj93201nixr2e1re commented Aug 14, 2019

pshurygin commented Nov 13, 2019

oleq commented Nov 15, 2019

afwn90cj93201nixr2e1re commented Nov 15, 2019

afwn90cj93201nixr2e1re commented Nov 15, 2019

afwn90cj93201nixr2e1re commented Nov 15, 2019 • edited

afwn90cj93201nixr2e1re commented Nov 15, 2019

pshurygin commented Nov 15, 2019

afwn90cj93201nixr2e1re commented Nov 15, 2019

afwn90cj93201nixr2e1re commented Nov 15, 2019 • edited

thorgeir commented Apr 20, 2022

oleq commented Jul 22, 2019 •

edited

oleq commented Jul 22, 2019 •

edited

Reinmar commented Aug 12, 2019 •

edited

afwn90cj93201nixr2e1re commented Aug 13, 2019 •

edited

afwn90cj93201nixr2e1re commented Aug 14, 2019 •

edited

afwn90cj93201nixr2e1re commented Nov 15, 2019 •

edited

afwn90cj93201nixr2e1re commented Nov 15, 2019 •

edited