Performance check

[pjasiun]

We did check the performance at the very beginning (ckeditor/ckeditor5-design#65), but since then engine architecture changes a lot. We need to check it again. There are multiple aspects to be tests:

• memory usage - we need to know how big document we can handle, how much memory "standard" document use,
• conversion time - we should add more converters and check how much time it takes to load a big and complex document,
• initialisation time - now it takes a lot of time because of 400-500 modules which need to be loaded, we should check it with a bundled version.

[Reinmar]

Performance issue reported in #1374.

[Reinmar]

Another performance issue report (FF only): #1377

[oleq]

Another one: #1398

[ckotzbauer]

@oleq @Reinmar
Are there any plans when these issues (especially the loading and conversion time problems) can be addressed? This has a huge impact to some of our customers. If these issues stay for longer we have to consider some architectural changes in our own application for the integration of CK.

[Reinmar]

Actually, we've been doing a bit of research recently because we noticed that the diff() function that we use to compare list of nodes during rendering is causing slowdowns more often than we thought.

I checked whether your scenario reported in #1398 falls into this category and it looks like it is.

Fortunately, we plan to improve the diff() function (by adding fast paths for some troublesome cases). There's big chance that it will solve your problem, although, it's hard now to tell whether it's the only problem.

[Reinmar]

We closed https://github.com/ckeditor/ckeditor5-utils/issues/269 today and there are huge improvements :) Renderer calls which now take less than 200ms took 10s+ before this change.

Those changes will be released in ~2-3 weeks.

[Reinmar]

I pushed some data for testing two scenarios:

• Improve performance of attribute removal #4504 – removing text formatting
• loading loads of data that requires normalization

Branch: https://github.com/ckeditor/ckeditor5/compare/i/3767

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).

[alparslandev]

Title: CKEditor 5 takes 2+ minutes to load a large document (938,209 characters) in Vue.js 3 application

Description:

Hello CKEditor team,

I am developing a Vue.js 3 application using the Quasar framework and CKEditor 5. I am encountering performance issues when loading very large documents (such as legal texts). For example, one document contains 938,209 characters, and CKEditor takes 2 minutes and 13 seconds to open it.

Below is the setup I am using:
Vue.js Component:

<template>
  <div>
     <ckeditor v-else v-model="newDocument.content" :editor="ClassicEditor" :config="RichTextEditorConfig" />
  </div>
</template>

export default {
  computed: {
    ...mapState(["newDocument"]),
  },
};

Rich Text Editor Configuration (richtexteditorconfig.js):

import {
  Alignment,
  AutoImage,
  AutoLink,
  Autosave,
  Bold,
  Essentials,
  FindAndReplace,
  FontBackgroundColor,
  FontColor,
  FontFamily,
  FontSize,
  GeneralHtmlSupport,
  HorizontalLine,
  ImageBlock,
  ImageInsert,
  ImageInsertViaUrl,
  ImageToolbar,
  ImageUpload,
  Indent,
  IndentBlock,
  Italic,
  Link,
  List,
  Paragraph,
  PasteFromOffice,
  RemoveFormat,
  SelectAll,
  SourceEditing,
  Strikethrough,
  Table,
  TableCaption,
  TableCellProperties,
  TableColumnResize,
  TableProperties,
  TableToolbar,
  Underline,
  Undo,
} from "ckeditor5";

export const RichTextEditorConfig = {
  translations: [translations],
  language: "tr",
  toolbar: {
    viewportTopOffset: 54,
    items: [
      "undo",
      "redo",
      "selectAll",
      "findAndReplace",
      "|",
      "fontSize",
      "fontFamily",
      "fontColor",
      "fontBackgroundColor",
      "|",
      "bold",
      "italic",
      "underline",
      "strikethrough",
      "removeFormat",
      "|",
      "horizontalLine",
      "link",
      "insertImage",
      "insertTable",
      "alignment",
      "|",
      "bulletedList",
      "numberedList",
      "outdent",
      "indent",
      "|",
      "sourceEditing",
    ],
    shouldNotGroupWhenFull: true,
  },
  plugins: [
    Alignment,
    AutoImage,
    AutoLink,
    Autosave,
    Bold,
    Essentials,
    FindAndReplace,
    FontBackgroundColor,
    FontColor,
    FontFamily,
    FontSize,
    GeneralHtmlSupport,
    HorizontalLine,
    ImageBlock,
    ImageInsert,
    ImageInsertViaUrl,
    ImageToolbar,
    ImageUpload,
    Indent,
    IndentBlock,
    Italic,
    Link,
    List,
    Paragraph,
    PasteFromOffice,
    RemoveFormat,
    SelectAll,
    SourceEditing,
    Strikethrough,
    Table,
    TableCaption,
    TableCellProperties,
    TableColumnResize,
    TableProperties,
    TableToolbar,
    Underline,
    Undo,
  ],
  fontFamily: {
    supportAllValues: true,
  },
  fontBackgroundColor: {
    colors: [
      {
        color: "rgb(255, 0, 0)",
        label: "Red",
      },
      {
        color: "rgb(0, 255, 255)",
        label: "Cyan",
      },
      {
        color: "rgb(255, 0, 255)",
        label: "Magenta",
      },
      {
        color: "rgb(192, 192, 192)",
        label: "Silver",
      },
    ],
    colorPicker: false,
  },
  fontSize: {
    options: [10, 12, 14, "default", 18, 20, 22],
    supportAllValues: true,
  },
  htmlSupport: {
    allow: [
      {
        name: /^.*$/,
        styles: true,
        attributes: true,
        classes: true,
      },
    ],
  },
  image: {
    toolbar: ["imageTextAlternative"],
  },
  link: {
    addTargetToExternalLinks: true,
    defaultProtocol: "https://",
    decorators: {
      toggleDownloadable: {
        mode: "manual",
        label: "Downloadable",
        attributes: {
          download: "file",
        },
      },
    },
  },
  placeholder: "Type or paste your content here!",
  table: {
    contentToolbar: [
      "tableColumn",
      "tableRow",
      "mergeTableCells",
      "tableProperties",
      "tableCellProperties",
    ],
  },
};

Problem:
The CKEditor instance is very slow when loading large documents. For the example document (938,209 characters), it takes over 2 minutes to fully load and be usable.

Question:
Is there any way to optimize or reduce the loading time for large documents in CKEditor 5? Are there specific configurations, plugins, or strategies that could improve performance in this case?

Thank you for your assistance!