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

WIP: perf(theme): optimize theme handling#1006

Closed
levithomason wants to merge 7 commits intomasterfrom
perf/theming
Closed

WIP: perf(theme): optimize theme handling#1006
levithomason wants to merge 7 commits intomasterfrom
perf/theming

Conversation

@levithomason
Copy link
Member

@levithomason levithomason commented Mar 1, 2019

Merging themes on context is a hot code path. It is also heavy due to merging themes and applying variables.

This PR is experimenting with approaches to optimize this path for all components.

Initial results are promising, just memoizing mergeThemes produces 75-95% performance gain in all components:

==============================
Button.perf.tsx
BEFORE  AFTER  SAVED  
42.83   2.89   93%    
43.53   1.57   96%    
10.57   1.11   89%    
86.06   19.54  77%    

==============================
Header.perf.tsx
BEFORE  AFTER  SAVED  
1.13    1.3    -15%   
0.69    0.66   4%     
0.45    0.46   -2%    
4.71    7.63   -62%   

==============================
Icon.perf.tsx
BEFORE  AFTER  SAVED  
8.34    1.33   84%    
8.69    0.56   94%    
3.27    0.38   88%    
16.25   7.99   51%    

==============================
Loader.perf.tsx
BEFORE  AFTER  SAVED  
25.84   1.86   93%    
31.44   1.14   96%    
5.93    0.82   86%    
48.51   11.24  77%    

==============================
HeaderDescription.perf.tsx
BEFORE  AFTER  SAVED  
7.35    2.25   69%    
5.86    1.3    78%    
2.53    0.89   65%    
15.79   16.41  -4%    

==============================
Attachment.perf.tsx
BEFORE  AFTER  SAVED  
35.33   2.47   93%    
26.54   1.44   95%    
7.94    1.04   87%    
68.63   11.54  83%    

==============================
Divider.perf.tsx
BEFORE  AFTER  SAVED  
8.26    1.18   86%    
8.42    0.58   93%    
3.27    0.41   87%    
16.49   11.22  32%    

==============================
List.perf.tsx
BEFORE  AFTER  SAVED  
68.27   68.78  -1%    
67.67   65.39  3%     
54.4    56.3   -3%    
98.21   99.29  -1%    

==============================
Chat.perf.tsx
BEFORE  AFTER  SAVED  
284.64  40.03  86%    
276.29  39.44  86%    
208.04  30.11  86%    
426.62  82.98  81% 

@layershifter
Copy link
Member

layershifter commented Mar 4, 2019

I can be wrong, but Lodash memoizes only the first param, lodash/lodash#2115. fast-memoize works with multiple arguments.

levithomason and others added 3 commits April 10, 2019 10:52
move fela types to /types

add many perf flags and logging

wip

wip

wip

Add rtl-css-js to node_modules_fela

Fix performance is undefined during build

add mark to for processStyleWithPlugins

add SKIP_FELA_PLUGINS

add mark for getUnhandledProps

add mark for generateColorScheme

wip

drop cruft

update context usage

perf tooling

add perf tests

remove examples

update felaDevMode
…dust-ui/react into perf/theming

# Conflicts:
#	docs/src/examples/components/Chat/Performance/Chat.perf.tsx
#	docs/src/examples/components/Chat/Performance/index.tsx
@levithomason levithomason deleted the perf/theming branch July 11, 2019 18:12
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