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

perf: disable "sanitize-css" for production #2340

Merged
merged 11 commits into from
Feb 20, 2020
Merged

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Feb 11, 2020

BREAKING CHANGES

This PR:

  • disables fela-sanitize-css for production mode
  • fela-sanitize-css will warn in development mode

To keep previous behavior please force enable enableSanitizeCssPlugin setting:

<Provider performance={{ enableSanitizeCssPlugin: true }} />

See #65 for more details.

Performance 🏎

As this plugin is disabled for production we can get 3-5% (depends on styles complication) improvement with its removal.

image

Before

Example min avg median max
ChatWithPopover.perf.tsx 364.32 379.09 375.81 416.76
ChatWithPopover.perf.tsx 364.69 379.35 376.37 425.93
379.22

After

Example min avg median max
ChatWithPopover.perf.tsx 357.39 367.77 366.42 397.19
ChatWithPopover.perf.tsx 357.6 367.61 365.51 406.38
ChatWithPopover.perf.tsx 359.33 367.48 365.96 401.37
367.62

@DustyTheBot
Copy link
Collaborator

DustyTheBot commented Feb 11, 2020

Warnings
⚠️ 1 perf regressions detected

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.53 0.51 1.04:1 2000 1064
🦄 Button.Fluent 0.12 0.19 0.63:1 1000 122
🔧 Checkbox.Fluent 0.83 0.29 2.86:1 1000 826
🔧 Dialog.Fluent 0.39 0.22 1.77:1 5000 1949
🔧 Dropdown.Fluent 4.32 0.51 8.47:1 1000 4322
🔧 Icon.Fluent 0.16 0.04 4:1 5000 810
🎯 Image.Fluent 0.05 0.07 0.71:1 5000 231
🔧 Slider.Fluent 1.88 0.36 5.22:1 1000 1875
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 370
🦄 Tooltip.Fluent 0.1 19.52 0.01:1 5000 493

🔧 Needs work     🎯 On target     🦄 Amazing

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio
LoaderMinimalPerf.default 785 2479 0.32:1
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
HeaderSlotsPerf.default 1610 1287 1.25:1
TreeWith60ListItems.default 317 255 1.24:1
ListCommonPerf.default 874 733 1.19:1
ToolbarMinimalPerf.default 1026 876 1.17:1
RadioGroupMinimalPerf.default 441 386 1.14:1
IconMinimalPerf.default 312 277 1.13:1
Icon.Fluent 810 722 1.12:1
ListWith60ListItems.default 207 186 1.11:1
StatusMinimalPerf.default 260 242 1.07:1
PortalMinimalPerf.default 226 215 1.05:1
TreeMinimalPerf.default 1060 1012 1.05:1
ChatDuplicateMessagesPerf.default 356 341 1.04:1
HierarchicalTreeMinimalPerf.default 796 768 1.04:1
ChatMinimalPerf.default 410 398 1.03:1
LabelMinimalPerf.default 808 782 1.03:1
Tooltip.Fluent 493 479 1.03:1
ProviderMergeThemesPerf.default 1070 1046 1.02:1
BoxMinimalPerf.default 233 231 1.01:1
ButtonMinimalPerf.default 120 119 1.01:1
HeaderMinimalPerf.default 430 426 1.01:1
CustomToolbarPrototype.default 3790 3766 1.01:1
Avatar.Fluent 1064 1049 1.01:1
Slider.Fluent 1875 1849 1.01:1
DividerMinimalPerf.default 833 835 1:1
ListMinimalPerf.default 309 308 1:1
CarouselMinimalPerf.default 1837 1853 0.99:1
FlexMinimalPerf.default 342 347 0.99:1
MenuButtonMinimalPerf.default 1609 1624 0.99:1
PopupMinimalPerf.default 302 304 0.99:1
SplitButtonMinimalPerf.default 13201 13379 0.99:1
AttachmentMinimalPerf.default 901 916 0.98:1
ImageMinimalPerf.default 220 225 0.98:1
RefMinimalPerf.default 158 161 0.98:1
TableMinimalPerf.default 562 573 0.98:1
TextAreaMinimalPerf.default 2923 2977 0.98:1
ButtonSlotsPerf.default 543 559 0.97:1
FormMinimalPerf.default 692 713 0.97:1
GridMinimalPerf.default 816 840 0.97:1
InputMinimalPerf.default 913 946 0.97:1
Dropdown.Fluent 4322 4461 0.97:1
DropdownManyItemsPerf.default 380 396 0.96:1
AttachmentSlotsPerf.default 3040 3216 0.95:1
Text.Fluent 370 391 0.95:1
AlertMinimalPerf.default 526 558 0.94:1
AnimationMinimalPerf.default 454 482 0.94:1
AvatarMinimalPerf.default 475 504 0.94:1
ChatWithPopoverPerf.default 488 518 0.94:1
CheckboxMinimalPerf.default 3345 3576 0.94:1
DropdownMinimalPerf.default 3118 3330 0.94:1
MenuMinimalPerf.default 1792 1912 0.94:1
AccordionMinimalPerf.default 176 189 0.93:1
ProviderMinimalPerf.default 558 600 0.93:1
ReactionMinimalPerf.default 2221 2378 0.93:1
TextMinimalPerf.default 254 273 0.93:1
DialogMinimalPerf.default 1441 1570 0.92:1
EmbedMinimalPerf.default 5772 6259 0.92:1
ItemLayoutMinimalPerf.default 1578 1719 0.92:1
Image.Fluent 231 252 0.92:1
LayoutMinimalPerf.default 481 527 0.91:1
SliderMinimalPerf.default 1377 1510 0.91:1
ListNestedPerf.default 674 750 0.9:1
SegmentMinimalPerf.default 1123 1272 0.88:1
VideoMinimalPerf.default 780 929 0.84:1
Dialog.Fluent 1949 2353 0.83:1
TooltipMinimalPerf.default 673 861 0.78:1
Checkbox.Fluent 826 1109 0.74:1
Button.Fluent 122 175 0.7:1

Generated by 🚫 dangerJS

felaSanitizeCss({
skip: ['content', 'keyframe'],
}),
process.env.NODE_ENV !== 'production' &&
Copy link
Member

Choose a reason for hiding this comment

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

I would vote for making this opt-in (or even better opt-out) for prod.

…rdust-ui/react into perf/sanitize

� Conflicts:
�	packages/react-bindings/src/styles/types.ts
�	packages/react-bindings/test/styles/resolveStyles-test.ts
�	packages/react/src/components/Animation/Animation.tsx
@layershifter layershifter merged commit 70c5a30 into master Feb 20, 2020
@layershifter layershifter deleted the perf/sanitize branch February 20, 2020 20:53
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.

None yet

4 participants