Calling (a bunch of) Javascript Functions from a CefSharp Application

[jl2]

We're using CefSharp to embed a page with a WebGL canvas in our application, allowing us to use the same renderer for both our desktop and web applications.

It works remarkably well, but in some situations we're calling a large number of Javascript functions to query the geometry loaded in the WebGL canvas and Javascript context. This was cheap and fast with our old renderer, which used C++/CLI and OpenGL.

Profiling in Visual Studio shows >99% of the C# time is spent waiting for EvaluateScriptAsync, and profiling in the Cef dev tools shows that >70% of that time is spent in "Compile Script" and "Compile Code".

I'm looking at ways to reduce that time, and one option I found is to use the CefV8Context's GetGlobal method, and then use ExecuteFunction to call the functions we need.

My understanding is that going that route would avoid the compilation, and so it should execute faster, but it doesn't look like those capabilities of the CefV8Context are exposed in CefSharp.

So my questions are:

Is there a way to execute Javascript functions in CefSharp directly via the CefV8Context, without compiling Javascript strings?

If not, any suggestions for speeding up a large number of Javascript calls? The alternatives I've come up with involve a pretty big refactor for our existing code...

[amaitland]

I'm looking at ways to reduce that time, and one option I found is to use the CefV8Context's GetGlobal method, and then use ExecuteFunction to call the functions we need.

You cannot directly call ExecuteFunction on the Global CefV8Value, you need to obtain a CefV8Value that represents a function first.

ExecuteFunction is exposed in the form of IJavascriptCallback.

You can execute javascript that returns a function, then execute that function multiple times via IJavascriptCallback. If your planning on executing the callback multiple times then don't forget to check the CanExecute property.

See https://github.com/cefsharp/CefSharp/blob/cefsharp/109/CefSharp.Test/Javascript/JavascriptCallbackFacts.cs for some test case examples.

[jl2]

So far this seems to give a good speed up for us.

What I ended up doing is creating a dictionary of function names to IJavascriptCallback objects, and the first time a function is called I build the anonymous wrapper, execute it with EvaluateScriptAsync to get an IJavascriptCallback, and then add that callback to the map. From then on I run it with functionMap[functionName].ExecuteAsync(argumentArray).

We might have to optimize our Javascript sooner or later, or cache things in the C# code, but for now those changes were enough to get rid of almost all of time spent in "Compile Script" in the hotpath.

One issue I ran into immediately was that I needed to wrap the Javascript functions from window.myControl.ourDocument.myFunction in an anonymous function block: (function (arg1, arg2) { window.myControl.ourDocument.myFunction(arg1, arg2); }) to make "this" behave correctly when the callback runs. That could be some kind of Javascript misunderstanding on my part, but the anonymous wrapper fixed it for now.

[aimcosoftware]

Thanks for posting, tips on speeding up JS access from the wrapper are always useful ;-)

[amaitland]

One issue I ran into immediately was that I needed to wrap the Javascript functions from window.myControl.ourDocument.myFunction in an anonymous function block: (function (arg1, arg2) { window.myControl.ourDocument.myFunction(arg1, arg2); }) to make "this" behave correctly when the callback runs.

We don't specify a this object when executing a callback so the globalThis is used. This is something I'd like to improve, unfortunately in the case where CefV8Context::Eval is used to directly obtain a function I've been unable to find a means of obtaining the parent object. Function.prototype.caller is deprecated (didn't work when I tried in newer Chromium either). Open to suggestions if someone has one.

You should be able to use a standard bind when returning the function to specify the this. Something like:

window.myControl.ourDocument.myFunction.bind(window.myControl.ourDocument);

[aimcosoftware]

Function.prototype.caller is still working in Chrome 109.0.5414.120

Can you use window.myControl.ourDocument.myFunction.call(myObj, args)

[amaitland]

We don't specify a this object when executing a callback so the globalThis is used. This is something I'd like to improve, unfortunately in the case where CefV8Context::Eval is used to directly obtain a function I've been unable to find a means of obtaining the parent object.

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};
module.getX;

Using the above as an example, we get back a CefV8Value where CefV8Value::IsFunction() == true. Using the CEF API how to obtain the correct this value (a reference to module)?

• CEF V8 Unit Tests, the only example I see that passes in an explicit this, a new object is created, so not sure that would be an improvement in behaviour.
• v8::value API in Chromium, nothing I could see that would achieve this.

I'll ask on CEF forum, see if any other CEF users have ideas.

For now it'll have to remain up to the end user to explicitly specify a this value using bind/call/apply.

[aimcosoftware]

Don't know if this helps for your case, but one of the things I do to overcome this, is to move your results into javascript, then return an object (either as expando or JSON)
It does take some refactoring, but hopefully, not a lot. It allows you to do it the slower way to test, then move into JS to speed it up.
e.g.

a =  await ExecuteAsync("return a")
b =  await ExecuteAsync("return b")

r = await ExecuteAsync("obj.a=a;obj.b=b;return obj")
a = r.a
b = r.b

[jl2]

Thank you for taking the time to help with this!

This is similar to a solution we had in mind - basically collecting small snippets into larger scripts and running them with a single call to EvaluateScriptAsync.

I'm going to try the solution from amaitland first, but this is our backup plan.