search

microsoft / fluent-ui-react

An ecosystem for building highly customizable enterprise class user interfaces.
https://aka.ms/fluent-ui
MIT License
432 stars 55 forks source link

perf: add variables caching #2373

Open layershifter opened 4 years ago

layershifter commented 4 years ago

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 }} />
DustyTheBot commented 4 years ago

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

Generated by :no_entry_sign: dangerJS