Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

perf: add variables caching #2373

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

perf: add variables caching #2373

wants to merge 13 commits into from

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Feb 19, 2020

This PR adds enableHardVariablesCaching which is disabled by default. It allows to handle styles caching for cases when boolean variables are used:

<Button variables={{ isFoo: true }} />

…st-ui/react into perf/variable-cache

� Conflicts:
�	packages/react-bindings/src/hooks/useStyles.ts
�	packages/react-bindings/src/styles/resolveStyles.ts
�	packages/react-bindings/src/styles/types.ts
…om/stardust-ui/react into perf/variable-cache

� Conflicts:
�	packages/react-bindings/src/styles/resolveStyles.ts
�	packages/react-bindings/src/styles/types.ts
�	packages/react-bindings/test/styles/resolveStyles-test.ts
�	packages/react/src/components/Provider/Provider.tsx
@layershifter layershifter changed the title Perf/variable cache perf: add variables caching Feb 20, 2020
@DustyTheBot
Copy link
Collaborator

DustyTheBot commented Feb 20, 2020

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.57 0.39 1.46:1 2000 1144
🎯 Button.Fluent 0.12 0.16 0.75:1 1000 116
🔧 Checkbox.Fluent 0.78 0.33 2.36:1 1000 777
🔧 Dialog.Fluent 0.41 0.19 2.16:1 5000 2038
🔧 Dropdown.Fluent 4.07 0.52 7.83:1 1000 4068
🔧 Icon.Fluent 0.14 0.04 3.5:1 5000 682
🦄 Image.Fluent 0.06 0.09 0.67:1 5000 293
🔧 Slider.Fluent 1.36 0.34 4:1 1000 1361
🔧 Text.Fluent 0.06 0.03 2:1 5000 285
🦄 Tooltip.Fluent 0.1 17.67 0.01:1 5000 486

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
Image.Fluent 293 222 1.32:1
Avatar.Fluent 1144 922 1.24:1
Dropdown.Fluent 4068 3319 1.23:1
StatusMinimalPerf.default 290 245 1.18:1
BoxMinimalPerf.default 244 210 1.16:1
ButtonMinimalPerf.default 127 110 1.15:1
Text.Fluent 285 250 1.14:1
Tooltip.Fluent 486 428 1.14:1
ToolbarMinimalPerf.default 913 814 1.12:1
CheckboxMinimalPerf.default 3703 3407 1.09:1
DialogMinimalPerf.default 1601 1469 1.09:1
RadioGroupMinimalPerf.default 426 392 1.09:1
RefMinimalPerf.default 154 141 1.09:1
ProviderMinimalPerf.default 581 539 1.08:1
TreeMinimalPerf.default 1138 1056 1.08:1
ChatDuplicateMessagesPerf.default 347 324 1.07:1
ImageMinimalPerf.default 237 222 1.07:1
TreeWith60ListItems.default 290 270 1.07:1
HeaderMinimalPerf.default 419 395 1.06:1
PortalMinimalPerf.default 225 212 1.06:1
TableMinimalPerf.default 564 530 1.06:1
EmbedMinimalPerf.default 5850 5580 1.05:1
LayoutMinimalPerf.default 495 471 1.05:1
Button.Fluent 116 111 1.05:1
ButtonSlotsPerf.default 560 536 1.04:1
DropdownMinimalPerf.default 3254 3126 1.04:1
AnimationMinimalPerf.default 466 451 1.03:1
InputMinimalPerf.default 879 856 1.03:1
DropdownManyItemsPerf.default 387 378 1.02:1
AlertMinimalPerf.default 549 546 1.01:1
AvatarMinimalPerf.default 481 474 1.01:1
GridMinimalPerf.default 798 794 1.01:1
ListCommonPerf.default 740 735 1.01:1
LoaderMinimalPerf.default 761 763 1:1
MenuMinimalPerf.default 1757 1764 1:1
MenuButtonMinimalPerf.default 1379 1381 1:1
PopupMinimalPerf.default 307 306 1:1
SliderMinimalPerf.default 1300 1304 1:1
Icon.Fluent 682 679 1:1
AttachmentSlotsPerf.default 2995 3028 0.99:1
DividerMinimalPerf.default 843 851 0.99:1
IconMinimalPerf.default 268 271 0.99:1
AccordionMinimalPerf.default 188 191 0.98:1
CarouselMinimalPerf.default 1782 1811 0.98:1
ListNestedPerf.default 656 667 0.98:1
SplitButtonMinimalPerf.default 10892 11150 0.98:1
CustomToolbarPrototype.default 4340 4437 0.98:1
FlexMinimalPerf.default 326 335 0.97:1
HeaderSlotsPerf.default 1326 1368 0.97:1
ListMinimalPerf.default 302 310 0.97:1
Dialog.Fluent 2038 2103 0.97:1
HierarchicalTreeMinimalPerf.default 761 789 0.96:1
LabelMinimalPerf.default 776 809 0.96:1
ReactionMinimalPerf.default 2164 2245 0.96:1
SegmentMinimalPerf.default 1086 1137 0.96:1
VideoMinimalPerf.default 811 843 0.96:1
FormMinimalPerf.default 654 687 0.95:1
ItemLayoutMinimalPerf.default 1633 1727 0.95:1
Slider.Fluent 1361 1437 0.95:1
AttachmentMinimalPerf.default 806 859 0.94:1
ChatMinimalPerf.default 413 444 0.93:1
ProviderMergeThemesPerf.default 1032 1104 0.93:1
TooltipMinimalPerf.default 826 889 0.93:1
ChatWithPopoverPerf.default 508 558 0.91:1
TextAreaMinimalPerf.default 3191 3533 0.9:1
ListWith60ListItems.default 143 160 0.89:1
TextMinimalPerf.default 256 297 0.86:1
Checkbox.Fluent 777 906 0.86:1

Generated by 🚫 dangerJS

)
})

if (!hasOnlyBooleanVariables) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we just not cache for this instances of components which donot have only boolean variables instead of throwing an error? We are not throwing if caching is enabled and there are inline overrides, I don't see how this is different.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The main goal to throw:

  • easy detect broken cases
  • avoid having these conditions in production as here we are iterating via object keys for example

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants