I have tested the 13900K+3090, 7950x+4090, and 7950x3d+4090, and there is a serious issue with Canvas performance. No configuration can smoothly run a Canvas card with 26,000 characters of content

In this post,For heavy Canvas users (from hundreds of thousands to millions of words), which computer components should be upgraded?

I have described the problems I encountered and tried some methods, but none improved the situation. So, I thought about testing using a remote computer rented online.

Why the coherence of the cards and side-by-side display is so important, and why I think a two-dimensional note like Canvas is more important than Markdown. To gain inspiration by displaying information and its relevance within a limited space.

Platforms:

  • 7950X
    • Configuration:
      • CPU: 7950X
      • Memory: Kingbank DDR5-6000 64GB (shows 4800Mhz on Windows)
      • Graphics Card: RTX 4090
      • System: Win10
    • Benchmarks:
    • PS: Remote desktop + Task Manager + HWinfo64. The first time using OSB to record, the window selection was wrong, and the recording was not successful.
  • 7950X3D
  • 13900K

Testing methods:

  • With plugins enabled and disabled
    • Single-core test: Input into a card in Chinese, English, and LaTeX. Observe Core Usage in Task Manager and HWinfo.
    • Multi-core test: Use the right mouse button to move the Canvas, loading multiple cards to test multi-core (only two threads working).

Test results:

  • 7950X+4090+DDR5 4800

    • Due to the first test, the recording was not successful, and the testing method was not well planned (plugins were not disabled).
    • Conclusion:
      • Editing a 27,000-character card causes noticeable input lag, with Chinese < English < LaTeX.
      • Dragging the page is laggy.
  • 7950X3D+4090+DDR5 3600

    • With plugins enabled:

    • With plugins disabled:

  • 13900K+3090+DDR4 3200

    • With plugins enabled:

      • Dragging the page, two cores reach a usage of 116.4%, 115.8%, the lag is perceptibly the same as the 7950X3D.

      • Inputting content, one core reaches a usage of 158.4, slightly better than the 7950X3D.

    • With plugins disabled:

      • Dragging the page, two cores reach a usage of 110.1%, 154.4%, the lag is the same.

      • Inputting content, everything but LaTeX is good.

Conclusion:

  • Which hardware improves Canvas performance:

    • Graphics Card (almost no improvement, my test platforms were all 4090, 3090)
    • Memory (did not feel an improvement)
    • CPU, single-core performance or single-thread performance (very important)
  • Test results:

    • Canvas has almost no multi-core optimization, at most two cores work.
    • The graphics card hardly works. During dragging and writing content, the graphics card does not work (because I used a remote desktop, so the graphics card usage is mainly due to the remote desktop software). On my own computer, the 3060 hardly works.
    • The main reason for Canvas lag is the CPU single-core usage exceeding 100%.
    • The same number of characters in a markdown document does not cause lag, but it does on a Canvas page, suggesting that markdown has block content rendering, and Canvas has serious optimization issues.
    • Plugins affect the smooth experience of Canvas, especially Latex-suite 1.7.4 (because we need to automatically enter & under $$ with tab, so we updated to the latest), even if you do not edit LaTeX content, it will cause lag with 26,000 characters (the main reason, disabling plugins can edit smoothly)
    • There is not much difference between AMD and Intel, at least at the user perception level, X3D does not improve.
    • It may be related to memory
      • When I used the 5800x, the CPU was not fully loaded when dragging, but when I used the 13900 with 2400 memory, the single core was still full, that is, it exceeded 100% in HWinfo64.

Suggestions:

  • Add hardware acceleration features, don’t let the graphics card idle, let it help with the rendering and editing of markdown.
  • Add multi-threading support
    • First, allocate different threads to multiple cards to improve multi-core utilization.
    • Second, support partitioning of individual cards to reduce the burden on a single core.
  • Optimize LaTeX, whether plugins are enabled or disabled, inputting LaTeX causes severe lag.
  • Convert cards into markdown documents.
    • Due to limited rental time, I did not test whether Markdown cards in Canvas would perform better. I will upload the video after I have edited it.
3 Likes

Update Content - Video

  • 7950X3D+4090+DDR5 3600

    • With plugin enabled dragging
  • With plugin enabled inputting
  • With plugin disabled dragging
  • With plugin disabled inputting
  • 13900K+3090+DDR4 3200

    • With plugin enabled dragging and inputting
  • With plugin disabled dragging
  • With plugin disabled inputting

This is true. Canvas has a really bad performance with many notes.
Can I ask you to make the same test with the Excalidraw plugin?

It might be possible, but I would need you to provide the files. However, I may only have a 14900K computer because I pay out of pocket to rent computers for testing. Later, I want to try @demeneer’s snippet method. Although this method has shown a slight improvement on my 3700x+3060, it still hasn’t resolved the experience issues, and it’s not yet usable for normal operations.

This css snippet is very useful, can you enable it and test it again?

The problem still lies in the fact that when there is too much content on the page, the processing methods of Canvas cards and Markdown are different. Canvas likely doesn’t render in chunks. This issue is particularly noticeable when cards are aligned side by side. You can try to adjust your canvas’s display ratio to be as small as possible and still visible (pull to the right). The main problem is that Canvas has not been well optimized for multicore and hardware acceleration, leading to a heavy reliance on single-core performance. This snippet cannot solve the editing issue, as I mentioned above, one is editing, and the other is dragging. Therefore, the chances of improvement are very low, as this is essentially a performance optimization issue of Canvas not being able to support a card with tens of thousands of words. I will try it tomorrow or the day after, but based on the above conclusion, even if there is an improvement, it will only be in the dragging process, not the editing process

No, it’s not working. I’ve tried for half an hour and can’t copy my file into the Excalidraw plugin. If I copy it alone, it’s not in markdown format. So you’d better provide a file with similar content for me. However, I’m about to test soon.

Update: New Test Content

Test Update Content:

  1. Whether @demeneer’s snippet script is effective.
.view-content:has(> .canvas-wrapper) {
  overflow: hidden;
}

.canvas-wrapper {
  width: 1000%;
  height: 1000%;

  left: -450%;
  top: -450%;

  .canvas {

    transition: transform 60ms ease;
    will-change: transform, scale, translate;

    > svg * {
      shape-rendering: optimizeSpeed;
    }
  }

  .canvas-controls {
    right: calc(45% + var(--size-4-2));
    top: calc(45% + var(--size-4-2));
  }

  .canvas-card-menu {
    bottom: calc(45% + var(--size-4-2));
  }
}
  1. Whether importing markdown into Canvas to replace cards will improve performance.
  2. Excalidraw testing.
  3. Testing the effects after disabling several main plugins.

Conclusion:

  • Demeneer’s script does not improve drag-and-drop page and input performance in this test environment. It also causes user interface flickering and card display issues, and does not alleviate CPU single-core performance overload.
  • Importing markdown files into Canvas to replace cards does not improve efficiency. However, the same content in markdown is very smooth even with plugins enabled.
  • Importing markdown into Excalidraw and canvas does not optimize performance.
  • Disabling latex-suite 1.7.4 and Easy-typing improves input performance when plugins are enabled.

Test Platform:

  • 14900K+4090+DDR5 6000
  • Benchmark Scores:
    • CPU-Z
      • Single-core: 915
      • Multi-core: 16677.3
    • Geekbench
      • ASUS System Product Name - Geekbench

Videos:

  • Video 1: Drag-and-drop and input performance test with plugins enabled and disabled under snippet.
  • Video 2: Drag-and-drop and input performance test with plugins enabled under disabled snippet.
  • Video 3: Drag-and-drop and input performance test with plugins disabled under disabled snippet.
1 Like

If there are more than a hundred images in the canvas, the canvas may crash, and the scaling will be very laggy.

After enabling this CSS snippet, the canvas will better than before.(This is my experience using it)

In addition, I canceled the shadow and rounded corners of the canvas card through css to slightly improve performance.

I think it’s related to the usage environment, as my cards contain a lot of text and LaTeX. Moreover, I’ve set the card display to the minimum limit. As you can see in the video above, enabling the CSS snippet causes window flickering, and it doesn’t change the CPU overload situation. I’m now trying to use the developer tools’ performance feature to detect more specific time usage. However, I’ve encountered an export issue and can’t export the report. ‘Failed to save timeline: The request is not allowed by the user agent or the platform in the current context. (NotAllowedError)’