Performance: Excessive CPU & time consumption while initializing multiple ace editor instances

[shashi-kumar-o9]

Issue:

• While initializing 100+ instances of editor on a page in read-only mode, browser seems to freeze for 20+ sec with ~100% CPU.

Ask:

• How to configure multiple editors in read-only mode without any significant impact on browser's performance?
• Please find below editor options used to configure it in read-only mode & observations/logs as well.

Configuration:

• Ace version: 1.3.3
• Editor options:
  {
  "selectionStyle": "line",
  "highlightActiveLine": true,
  "highlightSelectedWord": true,
  "readOnly": true,
  "copyWithEmptySelection": false,
  "cursorStyle": "ace",
  "mergeUndoDeltas": true,
  "behavioursEnabled": true,
  "wrapBehavioursEnabled": true,
  "autoScrollEditorIntoView": true,
  "hScrollBarAlwaysVisible": false,
  "vScrollBarAlwaysVisible": false,
  "highlightGutterLine": true,
  "animatedScroll": false,
  "showInvisibles": false,
  "showPrintMargin": false,
  "printMarginColumn": 80,
  "printMargin": false,
  "fadeFoldWidgets": false,
  "showFoldWidgets": true,
  "showLineNumbers": true,
  "showGutter": false,
  "displayIndentGuides": true,
  "fontSize": "13px",
  "maxLines": null,
  "scrollPastEnd": 0,
  "theme": "ace/theme/textmate",
  "maxPixelHeight": 0,
  "scrollSpeed": 2,
  "dragDelay": 0,
  "dragEnabled": true,
  "focusTimeout": 0,
  "tooltipFollowsMouse": true,
  "firstLineNumber": 1,
  "overwrite": false,
  "newLineMode": "auto",
  "useWorker": true,
  "useSoftTabs": true,
  "navigateWithinSoftTabs": false,
  "tabSize": 4,
  "wrap": "free",
  "indentedSoftWrap": false,
  "foldStyle": "markbegin",
  "mode": "ace/mode/ibpl",
  "enableMultiselect": true,
  "enableBlockSelect": true,
  "enableBasicAutocompletion": true,
  "enableLiveAutocompletion": true,
  "enableSnippets": false
  }

Logs:

• It seems most of the time is consumed by VirtualRenderer in Recalculating Style. PFA image & Performance profile json captured on Chrome's debugger while creating ~100+ read-only editors.
• 
• Profile-20230601T151500_latest.zip

[nightwing]

Is there a way you could give an example page showing what you are trying to do with this 100+ read-only editors. Having such an example would help me greatly in either optimizing the rendering or finding an alternative way to create them.

[shashi-kumar-o9]

Hello @nightwing, thanks for replying.

The use case here is :

• A scrollable list of rules needs to be rendered (should not consume much time & memory).
• Each rule in the list consists a name, description and formula.
• We need read-only editors for these formulas inside every rule.

Example :

• Here is an example page ace_editor_psr.html inside demo folder - ace-builds-1.3.3.zip (Please extract .zip file).
• In this example, 350 read-only editors are initialized and the page loading & rendering takes ~10 sec.