Ck editor initializing is so slow.

afwn90cj93201nixr2e1re commented 5 years ago

Comment.

Mgsy commented 5 years ago

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

oleq commented 5 years ago

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

oleq commented 5 years ago

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

oleq commented 5 years ago

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 commented 5 years ago

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

oleq commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

See https://github.com/ckeditor/ckeditor5-vue/issues/82#issuecomment-513797975

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

afwn90cj93201nixr2e1re commented 5 years ago

I said, it's empty. Im using your example. xD. https://github.com/ckeditor/ckeditor5-vue/issues/82#issuecomment-513818501

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

Reinmar commented 5 years ago

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 commented 5 years ago

test123.zip

profile.zip

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

GIF

oleq commented 5 years ago

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 commented 5 years ago

it was clean. it's not related to browser or cpu, i mean more huge wyswigs initiazing take near 0.5s(https://github.com/ckeditor/ckeditor5-vue/issues/82#issuecomment-520158439), 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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

pshurygin commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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

afwn90cj93201nixr2e1re commented 4 years ago

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

Sometimes:

afwn90cj93201nixr2e1re commented 4 years ago

pshurygin commented 4 years ago

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

afwn90cj93201nixr2e1re commented 4 years ago

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 commented 4 years ago

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 commented 2 years ago

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.

ckeditor / ckeditor5-vue

Ck editor initializing is so slow. #82

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

My waterfall (~0,7s)