Perf optimization #18

wpc009 · 2021-04-01T03:10:56Z

The current web client is sub-optimal, it consuming lots of memory and causing GC a lot.
I did some dirty hacks to improving the client's performance. Now, it can run smoothly on a 4K display.
The hack is not well-designed. So, take what ever you need, just make sure that the web client runs more smoothly.

SerVB · 2021-04-05T10:56:42Z

Hi @wpc009! Thank you for the great amount of work!

Could you share some details how you've found the places to optimize? Also, comparisons of performance before and after will be helpful.

We can check it ourselves but a bit later.

Finally, I think if something is compiled by Kotlin/JS inefficiently, it should be reported to https://youtrack.jetbrains.com/issues/KT and comments near hack in code should be left.

wpc009 · 2021-04-06T02:48:04Z

It true that a huge part of performance issue comes from the compiled JS code(It could be more efficient in pure JS code.). Lots of "isType" checks and "toTypedArray" conversion. Also, the int to string color conversion in fillStyle cause a lot of GC overhead.
I appreciate the great work you have done, and really need this "Projector" solution in real works.
By the way, I'm using the "Dev Tools -> Performance" panel to do the profiling, trying to reduce the render task costs.

wpc009 · 2021-04-06T08:42:53Z

Test scenario:
Open java source code( around 500 lines), scroll up and down a little, and then scroll up to the beginning.

The Current head of Master build

The yellow box are all "GC" overhead.

These parts can be eliminate by using some pure javascript code and some color string cache to replace the code compiled from Kotlin.

PR

The optimized version use less time rendering the open stage. Also, the master branch build feels laggy.

profile details. These are the profile data, you can load them into Dev Tools.

1. refine the rendering order. avoid redundant canvas state sync at the end of `applyClip`. 2. caching font styles, avoid string conversion during rendering. 3. try to avoid `isType` in JS runtime. using extra type enum & type cast. 4. change Kotlin collections to primitive arrays.

...ient-common/src/commonMain/kotlin/org/jetbrains/projector/client/common/canvas/Extensions.kt

SerVB · 2021-04-08T11:43:25Z

...client-common/src/jsMain/kotlin/org/jetbrains/projector/client/common/canvas/DomContext2d.kt

+    if( color != null) {
+      val ctx = myContext2d
+      val strCache = JsExtensions.rgbStrCache
+      //TODO: hacking to avoid expensive Kotlin binary operator and string concat
+      js("""
+      if(color.argb){
+        var a = (color.argb >>> 24) & 0xff
+        var r = (color.argb >>> 16) & 0xff
+        var g = (color.argb >>> 8) & 0xff
+        var b = color.argb & 0xff
+        ctx.fillStyle = "#" + strCache[r] + strCache[g] + strCache[b] + strCache[a];
+      }else{
+        ctx.fillStyle = color.canvasGradient;
+      }
+    """)
+    }
  }

+
+  @Suppress("UNUSED_VARIABLE")
  override fun setStrokeStyle(color: PaintColor?) {
-    myContext2d.strokeStyle = color?.extract()
+    if( color != null) {
+      val ctx = myContext2d
+      val strCache = JsExtensions.rgbStrCache
+      //TODO: hacking to avoid expensive Kotlin binary operator and string concat
+      js("""
+        if(color.argb){
+          var a = (color.argb >>> 24) & 0xff
+          var r = (color.argb >>> 16) & 0xff
+          var g = (color.argb >>> 8) & 0xff
+          var b = color.argb & 0xff
+          ctx.strokeStyle = "#" + strCache[r] + strCache[g] + strCache[b] + strCache[a];
+        }else{
+          ctx.strokeStyle = color.canvasGradient
+        }
+    """)
+    }


Are you sure we need this amount of optimizations, including switch to #color notation and rgbStrCache? I've just changed Long to Int in b98edad and the generated code looks quite optimal now:

The int to String conversion put a lot pressure on memory. After using str cache less GC is triggered. You could adding "--expose-gc" flag to chrome to view GC events.

SerVB · 2021-04-08T14:12:37Z

I've looked a bit. There are many changes. Do you think we need them all? I just wonder maybe there are only a couple places that can be optimized a lot, and others a just minor enhancements.

I don't want to take all the changes because many make the code less readable.

SerVB · 2021-04-08T14:15:34Z

...or-client-common/src/jsMain/kotlin/org/jetbrains/projector/client/common/canvas/DomCanvas.kt

+  override fun context2d(): Context2d {
+    if( _context2d == null){
+      _context2d = DomContext2d(myCanvas.getContext("2d",js("{ desynchronized: true }")) as CanvasRenderingContext2D)
+    }
+    return _context2d!!
+  }


Can it be left as lazy?

override val context2d: Context2d by lazy { DomContext2d(myCanvas.getContext("2d") as CanvasRenderingContext2D) }

Sure. I'm new to Kotlin.

SerVB · 2021-04-08T14:17:46Z

...ent-common/src/jsMain/kotlin/org/jetbrains/projector/client/common/canvas/ExperimentalAPI.kt

+object ExperimentalAPI {
+}
+
+public open external class OffscreenCanvas : CanvasImageSource {


I see that it's not available in browsers other than Chromium, so we can't use it: https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#browser_compatibility

That's true. Maybe we can create a chromium-only branch. After all, the Electron is chromium inside.

SerVB · 2021-04-08T14:22:56Z

projector-client-web/src/main/kotlin/org/jetbrains/projector/client/web/state/ClientState.kt

+              encoder = SupportedTypesProvider.supportedToServerEncoders.first(),
+              decoder = SupportedTypesProvider.supportedToClientDecoders.first(),
+              decompressor = SupportedTypesProvider.supportedToClientDecompressors.first(),
+              compressor = SupportedTypesProvider.supportedToServerCompressors.first(),


Breaks logic: it now doesn't use the result from server...

I will revert this change.

…into perf-optimization

wpc009 · 2021-04-08T14:59:11Z

I made some more optimization on the rendering logic.

The origin code did clip on the first, and must reset all the canvas states at the end of applyClip.
I re-arrange the clip operation, make it possible to reusing previous canvas state.
The measureText during fillText can be avoided, by caching the rescale ratio for each font size.

SerVB · 2021-04-08T15:26:36Z

gradle.properties

+kotlinVersion=1.4.30
+kotlinExtensionsVersion=1.0.1-pre.146-kotlin-1.4.30
+kotlinReactVersion= 17.0.1-pre.146-kotlin-1.4.30
+kotlinStyledComponentsVersion=5.2.1-pre.146-kotlin-1.4.30


I will update Kotlin and dependencies to 1.4.30 on the next week, it seems there are some performance improvements.

By the way, there is a relatively new mode of compilation called IR. It can give more performant code too. I will try it later, but if you have some time, you can try it yourself. Just add (IR) to build.gradle(.kts) files of JS and multiplatform modules like this:

kotlin { js(IR) { // <-- here it was just "js {" //... } }

At least many Kotlin.isType are replaced with JS instanceof in IR.

I will try that.

I will update Kotlin and dependencies to 1.4.30 on the next week, it seems there are some performance improvements.

By the way, there is a relatively new mode of compilation called IR. It can give more performant code too. I will try it later, but if you have some time, you can try it yourself. Just add (IR) to build.gradle(.kts) files of JS and multiplatform modules like this:

kotlin { js(IR) { // <-- here it was just "js {" //... } }

At least many Kotlin.isType are replaced with JS instanceof in IR.

just add IR in projector-client-web will cause :

dceTask configuration is useless with IR compiler. Use @JsExport on declarations instead.

FAILURE: Build failed with an exception.

What went wrong:
Task 'browserProductionWebpack' not found in project ':projector-client-web'.

projector-client-web is already some time with IR enabled and that problem solved:

projector-client/projector-client-web/build.gradle.kts

Line 63 in 2811e60

js(IR) {

projector-client-web is already some time with IR enabled and that problem solved:

projector-client/projector-client-web/build.gradle.kts

Line 63 in 2811e60

js(IR) {

thanks ,I merger the pr to my 1.6.0 version and it shows ok . I found you have released it to 1.7.0 , I will use the latest version after PRJ-857 fix

SerVB · 2021-04-08T15:29:45Z

Thank you for going on 😀

I've submitted a few reports to Kotlin issue tracker, so feel free to vote for them and maybe even add some info:

I will proceed with you changes hopefully on the next week.

Which changes are vital is still the open question. Could you somehow determine which ones give the most boost?

Also, if it's possible to open a separate PR for every change, I will appreciate it much.

wpc009 · 2021-04-09T02:19:56Z

By the way, the current optimization may break some things. I try to using OffscreenCanvas to improve double buffered render logic, but dose not succeed. The transferToImageBitmap will make the buffer canvas empty. /
Maybe I should revert those change.

wpc009 · 2021-04-09T06:52:03Z

There is still some space for improvements.

offload the websocket communication & serialization/deserialization to WebWorker.
Using WebWorker to render OffscreenCanvas, then dump image bitmap to the front canvas.

The current optimization makes the web client usable. I may not have time to go further.

zhipengzuo · 2022-03-29T10:09:01Z

@wpc009 are you still working to merge it to master ?

wpc009 · 2022-04-04T12:16:50Z

@wpc009 are you still working to merge it to master ?

No, This PR contains lots of Hacks which should not be merge into master.
I propose this PR only to provide some idea on perf improvement.

zhipengzuo · 2022-04-24T08:52:11Z

@wpc009 are you still working to merge it to master ?

No, This PR contains lots of Hacks which should not be merge into master. I propose this PR only to provide some idea on perf improvement.

ok .thanks .
one more question ,do you still remember the server version you can build with ?
i want to see the effect.
i tried with some server like 1.0.0 1.1.0 seem can't use .

wpc009 added 11 commits March 19, 2021 15:01

perf improvement

e60b161

Merge branch 'master' of https://github.com/JetBrains/projector-client

a5d580e

Performance tuning

4872a4e

revert wire protocol version assertion

252148f

revert codestyle config

01ec80e

revert unnecessary changes

bde7a74

clean code

8f35f4b

passing checks

b72134d

fix tests

0dba75d

Adding extra v8 flags

921bd1e

Adding usefull Electron Menu items

cd6c602

wpc009 added 2 commits April 8, 2021 17:56

Merge branch 'master' into perf-optimization

aacd44d

SerVB reviewed Apr 8, 2021

View reviewed changes

...ient-common/src/commonMain/kotlin/org/jetbrains/projector/client/common/canvas/Extensions.kt Outdated Show resolved Hide resolved

SerVB reviewed Apr 8, 2021

View reviewed changes

...ient-common/src/commonMain/kotlin/org/jetbrains/projector/client/common/canvas/Extensions.kt Outdated Show resolved Hide resolved

SerVB added a commit that referenced this pull request Apr 8, 2021

Fix bug (kudos to #18)

9fe1ab5

SerVB added a commit that referenced this pull request Apr 8, 2021

Make argbIntToRgbaString more effective (kudos to #18)

b98edad

SerVB reviewed Apr 8, 2021

View reviewed changes

wpc009 added 3 commits April 8, 2021 22:40

Merge

b9881ce

Merge branch 'master' of https://github.com/JetBrains/projector-client …

5750e47

…into perf-optimization

revert ClientState changes

004fda9

fix merge typo

9541c50

SerVB reviewed Apr 8, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Perf optimization #18

Perf optimization #18

wpc009 commented Apr 1, 2021 •

edited

Loading

SerVB commented Apr 5, 2021

wpc009 commented Apr 6, 2021 •

edited

Loading

wpc009 commented Apr 6, 2021 •

edited

Loading

SerVB Apr 8, 2021

wpc009 Apr 8, 2021

SerVB commented Apr 8, 2021

SerVB Apr 8, 2021

wpc009 Apr 8, 2021

SerVB Apr 8, 2021

wpc009 Apr 8, 2021 •

edited

Loading

SerVB Apr 8, 2021

wpc009 Apr 9, 2021

wpc009 commented Apr 8, 2021 •

edited

Loading

SerVB Apr 8, 2021 •

edited

Loading

wpc009 Apr 9, 2021

zhipengzuo Apr 11, 2022

SerVB Apr 11, 2022

zhipengzuo Apr 11, 2022

SerVB commented Apr 8, 2021

wpc009 commented Apr 9, 2021 •

edited

Loading

wpc009 commented Apr 9, 2021 •

edited

Loading

zhipengzuo commented Mar 29, 2022 •

edited

Loading

wpc009 commented Apr 4, 2022 •

edited

Loading

zhipengzuo commented Apr 24, 2022

Perf optimization #18

Are you sure you want to change the base?

Perf optimization #18

Conversation

wpc009 commented Apr 1, 2021 • edited Loading

SerVB commented Apr 5, 2021

wpc009 commented Apr 6, 2021 • edited Loading

wpc009 commented Apr 6, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SerVB commented Apr 8, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wpc009 Apr 8, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wpc009 commented Apr 8, 2021 • edited Loading

SerVB Apr 8, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SerVB commented Apr 8, 2021

wpc009 commented Apr 9, 2021 • edited Loading

wpc009 commented Apr 9, 2021 • edited Loading

zhipengzuo commented Mar 29, 2022 • edited Loading

wpc009 commented Apr 4, 2022 • edited Loading

zhipengzuo commented Apr 24, 2022

wpc009 commented Apr 1, 2021 •

edited

Loading

wpc009 commented Apr 6, 2021 •

edited

Loading

wpc009 commented Apr 6, 2021 •

edited

Loading

wpc009 Apr 8, 2021 •

edited

Loading

wpc009 commented Apr 8, 2021 •

edited

Loading

SerVB Apr 8, 2021 •

edited

Loading

wpc009 commented Apr 9, 2021 •

edited

Loading

wpc009 commented Apr 9, 2021 •

edited

Loading

zhipengzuo commented Mar 29, 2022 •

edited

Loading

wpc009 commented Apr 4, 2022 •

edited

Loading