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

perf: styles lazy evaluation#2097

Merged
levithomason merged 12 commits intomasterfrom
perf/styles-lazy-evaluation
Nov 8, 2019
Merged

perf: styles lazy evaluation#2097
levithomason merged 12 commits intomasterfrom
perf/styles-lazy-evaluation

Conversation

@miroslavstastny
Copy link
Member

@miroslavstastny miroslavstastny commented Nov 6, 2019

Previously renderComponent resolved styles and add CSS classes for all slots in a rendered component.

There are components which have a lot of slots (ChatMessage currently consists of 7 slots) but not all are always used. There are even components which have mutually exclusive slots - checkbox vs toggle slots in Checkbox component.
In this PR, styles and CSS classes are computed only when used (that also means only IF used).

This can bring up to 10% rendering perf improvements.

Before (master):

Example Min Avg Median Max
Chat.perf.tsx 378.88 459.88 511.41 566.8
ChatWithPopover.perf.tsx 386.31 457.55 417.21 623.64

After (this PR):

Example Min Avg Median Max
Chat.perf.tsx 312.24 396.36 438.55 548.93
ChatWithPopover.perf.tsx 354.09 413.74 374.05 497.5

@miroslavstastny miroslavstastny marked this pull request as ready for review November 8, 2019 16:45
Copy link
Member

@levithomason levithomason left a comment

Choose a reason for hiding this comment

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

👍

@levithomason levithomason merged commit c9ae303 into master Nov 8, 2019
@levithomason levithomason deleted the perf/styles-lazy-evaluation branch November 8, 2019 20:54
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants