Use native `jsi::Runtime::evaluateJavaScript` instead of JS `eval()` thru global #1863

mrousavy · 2021-03-23T10:52:36Z

Description

This PR refactors the worklet creation code to make it cleaner to read and a bit faster.

Changes

Replace the retrieval of global.eval(...), calling it, and getting the returned function with a simple Runtime::evaluateJavaScript(...). That's cleaner to read and by a few microseconds faster.

Benchmarks

The time (in microseconds) it takes to create a worklet jsi::Function from a string:

Before:

2021-03-18 09:14:12.946440+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 56ms
2021-03-18 09:14:12.947215+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 68ms
2021-03-18 09:14:12.947460+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 51ms
2021-03-18 09:14:12.947821+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 86ms
2021-03-18 09:14:12.947999+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 19ms
2021-03-18 09:14:12.948240+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 49ms
2021-03-18 09:14:12.948516+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 31ms
2021-03-18 09:14:12.948730+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 37ms
2021-03-18 09:14:12.949116+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 50ms
2021-03-18 09:14:12.949329+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 40ms
2021-03-18 09:14:12.949512+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 21ms
2021-03-18 09:14:12.949845+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 147ms
2021-03-18 09:14:12.950113+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 54ms
2021-03-18 09:14:12.950468+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 126ms
2021-03-18 09:14:12.950890+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 49ms
2021-03-18 09:14:12.951242+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 63ms
2021-03-18 09:14:12.951637+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 21ms
2021-03-18 09:14:12.951850+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 18ms
2021-03-18 09:14:12.952636+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 17ms
2021-03-18 09:14:12.952805+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 19ms
2021-03-18 09:14:12.952964+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 20ms
2021-03-18 09:14:12.953175+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 24ms
2021-03-18 09:14:12.953382+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 23ms
2021-03-18 09:14:12.953557+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 19ms
2021-03-18 09:14:12.953706+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 23ms
2021-03-18 09:14:12.954333+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 57ms
2021-03-18 09:14:12.954695+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 38ms
2021-03-18 09:14:12.954908+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 57ms
2021-03-18 09:14:12.955136+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 58ms
2021-03-18 09:14:12.955427+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 59ms
2021-03-18 09:14:12.955612+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 48ms
2021-03-18 09:14:12.955995+0100 ReanimatedExample[9344:189303] Evaluating Worklet took 20ms

After

2021-03-18 09:14:42.995224+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 54ms
2021-03-18 09:14:42.995998+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 59ms
2021-03-18 09:14:42.996217+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 42ms
2021-03-18 09:14:42.996516+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 46ms
2021-03-18 09:14:42.996696+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 17ms
2021-03-18 09:14:42.996898+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 43ms
2021-03-18 09:14:42.997110+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 16ms
2021-03-18 09:14:42.997349+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 41ms
2021-03-18 09:14:42.997713+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 43ms
2021-03-18 09:14:42.997960+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 39ms
2021-03-18 09:14:42.998144+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 15ms
2021-03-18 09:14:42.998422+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 99ms
2021-03-18 09:14:42.998655+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 49ms
2021-03-18 09:14:42.998978+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 117ms
2021-03-18 09:14:42.999374+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 52ms
2021-03-18 09:14:42.999786+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 35ms
2021-03-18 09:14:43.000217+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 17ms
2021-03-18 09:14:43.000452+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 18ms
2021-03-18 09:14:43.001388+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 15ms
2021-03-18 09:14:43.001571+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 15ms
2021-03-18 09:14:43.001734+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 17ms
2021-03-18 09:14:43.001910+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 17ms
2021-03-18 09:14:43.002085+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 18ms
2021-03-18 09:14:43.002272+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 16ms
2021-03-18 09:14:43.002458+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 20ms
2021-03-18 09:14:43.003233+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 61ms
2021-03-18 09:14:43.003608+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 35ms
2021-03-18 09:14:43.003878+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 63ms
2021-03-18 09:14:43.004151+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 56ms
2021-03-18 09:14:43.004401+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 54ms
2021-03-18 09:14:43.004579+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 40ms
2021-03-18 09:14:43.004937+0100 ReanimatedExample[9361:190498] Evaluating Worklet took 13ms

Worklet creation

I noticed that a lot of worklets are being created for just a simple useAnimatedStyle, aka this code runs very often:

react-native-reanimated/Common/cpp/Registries/WorkletsCache.cpp

Lines 13 to 15 in d9ec062

    
           auto codeBuffer = std::make_shared<const jsi::StringBuffer>("(" + ValueWrapper::asString(frozenObj->map["asString"]->valueContainer) + ")"); 
        
           auto func = rt.evaluateJavaScript(codeBuffer, ValueWrapper::asString(frozenObj->map["__location"]->valueContainer)).asObject(rt).asFunction(rt); 
        
           worklets[workletHash] = std::make_shared<jsi::Function>(std::move(func));

I feel like there can be a few more memoizations done on the JS side to avoid re-creating the worklet when the worklet hash changes but the actual code stays the same - e.g. by correctly utilizing useMemo, useCallback, and it's dependencies. wdyt @piaskowyk ?

…`RuntimeManager`

…anager

…l()` from global should be a bit faster, and it's cleaner code

This reverts commit c4a08c7.

…anager

piaskowyk · 2021-04-14T10:15:15Z

Did you test it on an emulator or physical device?

mrousavy · 2021-04-14T10:18:09Z

Emulator.

piaskowyk · 2021-05-26T09:29:40Z

I used your changes here: #1879 so I'll close this PR, and these changes will be merged with #1879

mrousavy added 22 commits March 23, 2021 11:10

Update UIResponder+Reanimated.mm

c4a08c7

Use std::make_shared for Scheduler

8a5b3e3

Indent

2955e81

private:

ddd3cfc

Re-indent NativeReanimatedModule

8274b52

new -> make_unique/make_shared

1cec07a

new -> std::make_shared (NativeReanimatedModule ctor)

4762801

Restructure RuntimeDecorator to be more general (ui -> worklet)

b377ee6

Fix private ctor call in make_shared

5dde5dd

Merge branch 'restructure-code' into restructure-runtimedecorator

24a6cea

Create RuntimeManager.h

cb5475c

Extract worklet specific properties from NativeReanimatedModule -> …

61f54c4

…`RuntimeManager`

Update ShareableValue.cpp

6f37341

Include RuntimeDecorator

ca2d678

Merge branch 'restructure-runtimedecorator' into restructure-runtimem…

7faf4e8

…anager

Fix maybeInitializeOnUIRuntime

fd79583

Use native jsi::Runtime::evaluateJavaScript instead of getting `eva…

0abb183

…l()` from global should be a bit faster, and it's cleaner code

Revert "Update UIResponder+Reanimated.mm"

aa334c5

This reverts commit c4a08c7.

Merge branch 'restructure-code' into restructure-runtimedecorator

dee5f7d

Remove unused NativeReanimatedModule *module

fb199b0

Merge branch 'restructure-runtimedecorator' into restructure-runtimem…

21fdbdd

…anager

Merge branch 'restructure-runtimemanager' into use-native-jsi-eval

47ff2aa

mrousavy mentioned this pull request Mar 23, 2021

Use native JSI Runtime evaluate func #1843

Closed

mrousavy added 5 commits March 23, 2021 13:51

Merge branch 'master' into restructure-runtimedecorator

cfde6b7

Merge branch 'restructure-runtimedecorator' into restructure-runtimem…

dc5642a

…anager

Merge branch 'restructure-runtimemanager' into use-native-jsi-eval

b03c3df

Merge branch 'master' into restructure-runtimemanager

af95390

Merge branch 'restructure-runtimemanager' into use-native-jsi-eval

6ea3ea2

piaskowyk requested review from Szymon20000 and piaskowyk March 30, 2021 14:00

merge master

d9ec062

mrousavy mentioned this pull request Apr 12, 2021

Performance optimization #1879

Merged

4 tasks

mrousavy mentioned this pull request May 3, 2021

JSI Frame Processors (iOS) mrousavy/react-native-vision-camera#2

Merged

11 tasks

piaskowyk closed this May 26, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use native `jsi::Runtime::evaluateJavaScript` instead of JS `eval()` thru global #1863

Use native `jsi::Runtime::evaluateJavaScript` instead of JS `eval()` thru global #1863

mrousavy commented Mar 23, 2021 •

edited

Loading

piaskowyk commented Apr 14, 2021

mrousavy commented Apr 14, 2021

piaskowyk commented May 26, 2021

	auto codeBuffer = std::make_shared<const jsi::StringBuffer>("(" + ValueWrapper::asString(frozenObj->map["asString"]->valueContainer) + ")");
	auto func = rt.evaluateJavaScript(codeBuffer, ValueWrapper::asString(frozenObj->map["__location"]->valueContainer)).asObject(rt).asFunction(rt);
	worklets[workletHash] = std::make_shared<jsi::Function>(std::move(func));

Use native jsi::Runtime::evaluateJavaScript instead of JS eval() thru global #1863

Use native jsi::Runtime::evaluateJavaScript instead of JS eval() thru global #1863

Conversation

mrousavy commented Mar 23, 2021 • edited Loading

Description

Changes

Benchmarks

Before:

After

Worklet creation

piaskowyk commented Apr 14, 2021

mrousavy commented Apr 14, 2021

piaskowyk commented May 26, 2021

Use native `jsi::Runtime::evaluateJavaScript` instead of JS `eval()` thru global #1863

Use native `jsi::Runtime::evaluateJavaScript` instead of JS `eval()` thru global #1863

mrousavy commented Mar 23, 2021 •

edited

Loading