Chore/try mix cache n stylis #12466

layershifter · 2020-03-30T08:29:43Z

Pull request checklist

Addresses an existing issue: Fixes #0000
Include a change request file using $ yarn change

Description of changes

yarn perf --filter "+(AttachmentMinimal|SliderMinimal|SegmentMinimal|ChatWithPopover)*"

Tests

`AttachmentMinimal.perf.tsx`

import { Attachment } from "@fluentui/react-northstar";
import * as _ from "lodash";
import * as React from "react";

const AttachmentMinimalPerf = () => (
  <div>
    {_.times(100, i => (
      <Attachment key={i} />
    ))}
  </div>
);

AttachmentMinimalPerf.iterations = 1000;
AttachmentMinimalPerf.filename = "AttachmentMinimal.perf.tsx";

export default AttachmentMinimalPerf;

`SegmentMinimalPerf.tsx`

import { Segment } from "@fluentui/react-northstar";
import * as React from "react";
import * as _ from "lodash";

const SegmentMinimalPerf = () => (
  <div>
    {_.times(100, i => (
      <Segment key={i} />
    ))}
  </div>
);

SegmentMinimalPerf.iterations = 5000;
SegmentMinimalPerf.filename = "SegmentMinimal.perf.tsx";

export default SegmentMinimalPerf;

`SliderMinimal.perf.tsx`

import { Slider } from "@fluentui/react-northstar";
import * as _ from "lodash";
import * as React from "react";

const SliderMinimalPerf = () => (
  <div>
    {_.times(100, i => (
      <Slider key={i} />
    ))}
  </div>
);

SliderMinimalPerf.iterations = 1000;
SliderMinimalPerf.filename = "SliderMinimal.perf.tsx";

export default SliderMinimalPerf;

Measures

`master`

Example	min	avg	median	max
AttachmentMinimal.perf.tsx (round 1)	60.02	73.76	72.56	101.5
AttachmentMinimal.perf.tsx (round 2)	58.35	75.26	74.56	101.74
AttachmentMinimal.perf.tsx (round 3)	58.11	76.04	73.69	126.67
avg from rounds		75.02
ChatWithPopover.perf.tsx (round 1)	307.71	336.16	335.51	409.05
ChatWithPopover.perf.tsx (round 2)	307.61	334.55	332.65	442.05
ChatWithPopover.perf.tsx (round 3)	312.41	341.33	339.03	449.65
avg from rounds		337.34
SliderMinimal.perf.tsx (round 1)	117.06	134.04	130.92	175.87
SliderMinimal.perf.tsx (round 2)	117.22	132.82	128.11	167.91
SliderMinimal.perf.tsx (round 3)	119.27	136.34	132.45	170.81
avg from rounds		134.4
SegmentMinimal.perf.tsx (round 1)	15.45	20.58	19.72	30.85
SegmentMinimal.perf.tsx (round 2)	15.91	20.31	19.13	28.93
SegmentMinimal.perf.tsx (round 3)	16.43	20.79	19.69	34.69
avg from rounds		20.56

Stylis

(compared to master)

Example	min	avg	median	max
AttachmentMinimal.perf.tsx (round 1)	53.13	67.27	64.07	104.83
AttachmentMinimal.perf.tsx (round 2)	54.12	65.31	61.84	88.65
AttachmentMinimal.perf.tsx (round 3)	53.49	64.41	61.25	81.81
avg from rounds		65.66 (-13.30%)
ChatWithPopover.perf.tsx (round 1)	286.91	306.99	304.72	366.47
ChatWithPopover.perf.tsx (round 2)	285.97	305.94	303.17	353.37
ChatWithPopover.perf.tsx (round 3)	285.57	309.39	304.23	364.82
avg from rounds		307.44 (-9.27448%)
SliderMinimal.perf.tsx (round 1)	113.81	126.85	125.75	170.5
SliderMinimal.perf.tsx (round 2)	113.32	128.31	129.46	169.17
SliderMinimal.perf.tsx (round 3)	114.11	130.42	130.45	171.28
avg from rounds		128.53 (-4.46%)
SegmentMinimal.perf.tsx (round 1)	13.91	18.35	18.16	24.69
SegmentMinimal.perf.tsx (round 2)	14.02	18.44	17.45	26.68
SegmentMinimal.perf.tsx (round 3)	14.19	18.82	18.31	27.87
avg from rounds		18.54 (-10.33%)

Cache + Stylis

(compared to stylis)

Example	min	avg	median	max
AttachmentMinimal.perf.tsx (round 1)	52.9	66.45	64.07	88.7
AttachmentMinimal.perf.tsx (round 2)	52.22	65.72	63.11	87.91
AttachmentMinimal.perf.tsx (round 3)	52.4	65.33	64.21	87.53
avg from rounds		65.83 (+0.25%)
ChatWithPopover.perf.tsx (round 1)	265.49	293.34	290.84	396.87
ChatWithPopover.perf.tsx (round 2)	261.64	285.71	284.71	318.57
ChatWithPopover.perf.tsx (round 3)	263	289.01	286.99	341.26
avg from rounds		289.35 (-6.06%)
SliderMinimal.perf.tsx (round 1)	118.91	136.84	136.85	173.98
SliderMinimal.perf.tsx (round 2)	117.96	135.41	137.49	170.97
SliderMinimal.perf.tsx (round 3)	117.4	133.6	133.92	181.27
avg from rounds		135.28 (+5.11%)
SegmentMinimal.perf.tsx (round 1)	10.52	14.01	13.57	24.52
SegmentMinimal.perf.tsx (round 2)	10.6	13.73	13.58	19.27
SegmentMinimal.perf.tsx (round 3)	9.74	13.33	12.66	21.33
avg from rounds		13.69 (-30.09%)

Microsoft Reviewers: Open in CodeFlow

…om/OfficeDev/office-ui-fabric-react into chore/fela-enhancer � Conflicts: � packages/fluentui/react/package.json � packages/fluentui/react/src/utils/felaRenderer.tsx

…c-react into chore/fela-enhancer

Updates fela's `renderRule` method to compute classNames on a more granular level: by property rather than by style object. Rather than generating a full className for an entire style object at once, it now walks the style object and generates classes for each individual property. This allows us to avoid reprocessing styles that should already be cached. NOTE: this approach does not work for monolithic classNames, since that treats an entire style object as a single entity. So, do not use this if you are using that mode.

…om/microsoft/fluentui into chore/fela-enhancer � Conflicts: � packages/fluentui/react-northstar/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap

…hore/try-mix-cache-n-stylis

…uentui into chore/try-mix-cache-n-stylis � Conflicts: � packages/fluentui/react-northstar/src/utils/felaRenderer.tsx

DustyTheBot · 2020-03-30T08:42:03Z

	Fails
🚫	Invalid entry format in packages/fluentui/CHANGELOG.md: >+- Replace `fela-plugin-prexifer` with `stylis` @layershifter (#12289)< The correct format is: `- description @githubname ([#DDDD](https://github.com/microsoft/fluentui/pull/DDDD)`
🚫	All of your entries in packages/fluentui/CHANGELOG.md should be in the Unreleased section!
🚫	Non-approved dependencies were detected. It is necessary to obtain approvals and register them in `approvedPackages` file before merge.

Non-approved dependencies are detected.

The following package version constraints missing approved candidate:

failed constrains	approved candidates
stylis@^3.5.4	there are no any approved packages

Generated by 🚫 dangerJS against 8f74564

msft-github-bot · 2020-03-30T08:53:18Z

Perf Analysis

No significant results to display.

All results

Scenario	Master Ticks	PR Ticks
BaseButton	775	702
BaseButton (experiments)	821	822
DefaultButton	924	954
DefaultButton (experiments)	1752	1699
DetailsRow	2966	2919
DetailsRow (fast icons)	2992	3057
DetailsRow without styles	2837	2837
DocumentCardTitle with truncation	1523	1504
MenuButton	1313	1234
MenuButton (experiments)	3155	3109
PrimaryButton	1103	1044
PrimaryButton (experiments)	1752	1703
SplitButton	2668	2686
SplitButton (experiments)	6306	6247
Stack	416	406
Stack with Intrinsic children	972	1006
Stack with Text children	3501	3610
Text	332	320
Toggle	764	760
Toggle (experiments)	1983	1997
button	61	66

Perf Analysis (Fluent)

⚠️ 17 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
GridMinimalPerf.default	731	790	0.93:1	analysis
LayoutMinimalPerf.default	575	629	0.91:1	analysis
SliderMinimalPerf.default	1405	1538	0.91:1	analysis
Slider.Fluent	1409	1580	0.89:1	analysis
VideoMinimalPerf.default	711	859	0.83:1	analysis
HeaderMinimalPerf.default	416	506	0.82:1	analysis
AttachmentMinimalPerf.default	741	917	0.81:1	analysis
InputMinimalPerf.default	819	1039	0.79:1	analysis
DialogMinimalPerf.default	1418	1841	0.77:1	analysis
Dialog.Fluent	1417	1861	0.76:1	analysis
EmbedMinimalPerf.default	3990	5437	0.73:1	analysis
ReactionMinimalPerf.default	1734	2367	0.73:1	analysis
DividerMinimalPerf.default	648	924	0.7:1	analysis
LoaderMinimalPerf.default	731	1051	0.7:1	analysis
FormMinimalPerf.default	602	878	0.69:1	analysis
TextAreaMinimalPerf.default	2115	3124	0.68:1	analysis
SegmentMinimalPerf.default	618	1060	0.58:1	analysis

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.36	0.45	0.8:1	2000	729
🦄	Button.Fluent	0.09	0.17	0.53:1	5000	474
🔧	Checkbox.Fluent	0.54	0.4	1.35:1	1000	536
🔧	Dialog.Fluent	0.28	0.19	1.47:1	5000	1417
🔧	Dropdown.Fluent	2.62	0.46	5.7:1	1000	2624
🔧	Icon.Fluent	0.15	0.05	3:1	5000	754
🎯	Image.Fluent	0.07	0.1	0.7:1	5000	335
🔧	Slider.Fluent	1.41	0.38	3.71:1	1000	1409
🔧	Text.Fluent	0.07	0.02	3.5:1	5000	356
🦄	Tooltip.Fluent	0.12	14.75	0.01:1	5000	586

🔧 Needs work 🎯 On target 🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
CardMinimalPerf.default	368	342	1.08:1
ButtonMinimalPerf.default	139	130	1.07:1
FlexMinimalPerf.default	293	278	1.05:1
Button.Fluent	474	451	1.05:1
Image.Fluent	335	320	1.05:1
LabelMinimalPerf.default	382	373	1.02:1
ListMinimalPerf.default	451	442	1.02:1
ProviderMinimalPerf.default	652	638	1.02:1
Tooltip.Fluent	586	573	1.02:1
ProviderMergeThemesPerf.default	1431	1422	1.01:1
TooltipMinimalPerf.default	836	827	1.01:1
ChatMinimalPerf.default	590	592	1:1
ImageMinimalPerf.default	337	339	0.99:1
PortalMinimalPerf.default	281	283	0.99:1
StatusMinimalPerf.default	606	611	0.99:1
IconMinimalPerf.default	416	426	0.98:1
RefMinimalPerf.default	190	193	0.98:1
AnimationMinimalPerf.default	598	617	0.97:1
PopupMinimalPerf.default	236	243	0.97:1
RadioGroupMinimalPerf.default	506	520	0.97:1
Text.Fluent	356	380	0.94:1
CustomToolbarPrototype.default	3383	3649	0.93:1
SplitButtonMinimalPerf.default	3141	3413	0.92:1
TextMinimalPerf.default	348	377	0.92:1
Icon.Fluent	754	816	0.92:1
BoxMinimalPerf.default	321	354	0.91:1
MenuButtonMinimalPerf.default	1351	1494	0.9:1
ChatWithPopoverPerf.default	533	601	0.89:1
TreeWith60ListItems.default	190	219	0.87:1
ChatDuplicateMessagesPerf.default	364	422	0.86:1
ButtonSlotsPerf.default	518	618	0.84:1
ListCommonPerf.default	868	1033	0.84:1
ListNestedPerf.default	772	927	0.83:1
TreeMinimalPerf.default	945	1146	0.82:1
HierarchicalTreeMinimalPerf.default	793	981	0.81:1
CarouselMinimalPerf.default	504	637	0.79:1
ListWith60ListItems.default	936	1197	0.78:1
AttachmentSlotsPerf.default	2790	3602	0.77:1
AccordionMinimalPerf.default	169	223	0.76:1
AvatarMinimalPerf.default	418	560	0.75:1
DropdownMinimalPerf.default	2633	3490	0.75:1
HeaderSlotsPerf.default	1199	1593	0.75:1
ToolbarMinimalPerf.default	818	1094	0.75:1
Dropdown.Fluent	2624	3511	0.75:1
CheckboxMinimalPerf.default	2358	3209	0.73:1
Checkbox.Fluent	536	734	0.73:1
MenuMinimalPerf.default	1401	1938	0.72:1
AlertMinimalPerf.default	428	610	0.7:1
DropdownManyItemsPerf.default	1066	1519	0.7:1
ItemLayoutMinimalPerf.default	1332	1966	0.68:1
TableMinimalPerf.default	423	618	0.68:1
Avatar.Fluent	729	1074	0.68:1

size-auditor · 2020-03-30T08:55:27Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: ccc2e9a086d41a1674da17ad7f31d31fd84fe9a5 (build)

layershifter and others added 16 commits March 12, 2020 22:56

perf: try stylis for prefixing

b3af22d

fix import

cf5dd30

Merge branches 'chore/fela-enhancer' and 'master' of https://github.c…

a61a995

…om/OfficeDev/office-ui-fabric-react into chore/fela-enhancer � Conflicts: � packages/fluentui/react/package.json � packages/fluentui/react/src/utils/felaRenderer.tsx

reset lock to master

f9d89c2

wip

1ead3b3

Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…

b35c238

…c-react into chore/fela-enhancer

final updates

5d025a5

add changelog entry

6bb5596

fix grid usages

af9994c

return gap back

5694c0b

DEBUG: expand shorthands before checking style cache

d075b33

Merge branches 'chore/fela-enhancer' and 'master' of https://github.c…

31ee9ae

…om/microsoft/fluentui into chore/fela-enhancer � Conflicts: � packages/fluentui/react-northstar/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap

update snapshot after merge

ed7d95d

Merge branch 'master' of https://github.com/microsoft/fluentui into c…

150d1ac

…hore/try-mix-cache-n-stylis

Merge branch 'chore/fela-enhancer' of https://github.com/microsoft/fl…

8f74564

…uentui into chore/try-mix-cache-n-stylis � Conflicts: � packages/fluentui/react-northstar/src/utils/felaRenderer.tsx

msft-github-bot assigned aneeshack4 Mar 30, 2020

layershifter closed this Mar 30, 2020

layershifter deleted the chore/try-mix-cache-n-stylis branch March 30, 2020 17:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chore/try mix cache n stylis #12466

Chore/try mix cache n stylis #12466

layershifter commented Mar 30, 2020 •

edited

Loading

DustyTheBot commented Mar 30, 2020

msft-github-bot commented Mar 30, 2020

size-auditor bot commented Mar 30, 2020

Chore/try mix cache n stylis #12466

Chore/try mix cache n stylis #12466

Conversation

layershifter commented Mar 30, 2020 • edited Loading

Pull request checklist

Description of changes

Tests

AttachmentMinimal.perf.tsx

SegmentMinimalPerf.tsx

SliderMinimal.perf.tsx

Measures

master

Stylis

Cache + Stylis

Microsoft Reviewers: Open in CodeFlow

DustyTheBot commented Mar 30, 2020

Non-approved dependencies are detected.

msft-github-bot commented Mar 30, 2020

Perf Analysis

Perf Analysis (Fluent)

Potential regressions comparing to master

size-auditor bot commented Mar 30, 2020

Asset size changes

layershifter commented Mar 30, 2020 •

edited

Loading

`AttachmentMinimal.perf.tsx`

`SegmentMinimalPerf.tsx`

`SliderMinimal.perf.tsx`

`master`