-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[change] StyleSheet performance rewrite
Improves StyleSheet benchmark performance by 13x. Removes undocumented `StyleSheet.resolve` API. Typical mean (and first) task duration. [benchmark] DeepTree: depth=3, breadth=10, wrap=4) -master 2809.76ms (3117.64ms) -patch 211.2ms (364.28ms) [benchmark] DeepTree: depth=5, breadth=3, wrap=1) -master 421.25ms (428.15ms) -patch 32.46ms (47.36ms) This patch adds memoization of DOM prop resolution (~3-4x faster), and re-introduces a `className`-based styling strategy (~3-4x faster). Styles map to "atomic css" rules. Fix #307
- Loading branch information
Showing
41 changed files
with
2,358 additions
and
2,290 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| exports[`apis/AppRegistry/renderApplication getApplication 1`] = ` | ||
| "<style id=\"react-native-stylesheet\"> | ||
| html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)} | ||
| body{margin:0} | ||
| button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} | ||
| input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none} | ||
| .rn_pointerEvents\\:auto, .rn_pointerEvents\\:box-only, .rn_pointerEvents\\:box-none * {pointer-events:auto}.rn_pointerEvents\\:none, .rn_pointerEvents\\:box-only *, .rn_pointerEvents\\:box-none {pointer-events:none} | ||
| .rn-bottom\\:0px{bottom:0px;} | ||
| .rn-left\\:0px{left:0px;} | ||
| .rn-position\\:absolute{position:absolute;} | ||
| .rn-right\\:0px{right:0px;} | ||
| .rn-top\\:0px{top:0px;} | ||
| .rn-alignItems\\:stretch{-webkit-align-items:stretch;-ms-flex-align:stretch;-webkit-box-align:stretch;align-items:stretch;} | ||
| .rn-backgroundColor\\:transparent{background-color:transparent;} | ||
| .rn-borderTopStyle\\:solid{border-top-style:solid;} | ||
| .rn-borderRightStyle\\:solid{border-right-style:solid;} | ||
| .rn-borderBottomStyle\\:solid{border-bottom-style:solid;} | ||
| .rn-borderLeftStyle\\:solid{border-left-style:solid;} | ||
| .rn-borderTopWidth\\:0px{border-top-width:0px;} | ||
| .rn-borderRightWidth\\:0px{border-right-width:0px;} | ||
| .rn-borderBottomWidth\\:0px{border-bottom-width:0px;} | ||
| .rn-borderLeftWidth\\:0px{border-left-width:0px;} | ||
| .rn-boxSizing\\:border-box{-moz-box-sizing:border-box;box-sizing:border-box;} | ||
| .rn-color\\:inherit{color:inherit;} | ||
| .rn-display\\:flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;} | ||
| .rn-flexBasis\\:auto{-webkit-flex-basis:auto;-ms-preferred-size:auto;flex-basis:auto;} | ||
| .rn-flexDirection\\:column{-webkit-flex-direction:column;-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;} | ||
| .rn-font\\:inherit{font:inherit;} | ||
| .rn-listStyle\\:none{list-style:none;} | ||
| .rn-marginTop\\:0px{margin-top:0px;} | ||
| .rn-marginRight\\:0px{margin-right:0px;} | ||
| .rn-marginBottom\\:0px{margin-bottom:0px;} | ||
| .rn-marginLeft\\:0px{margin-left:0px;} | ||
| .rn-minHeight\\:0px{min-height:0px;} | ||
| .rn-minWidth\\:0px{min-width:0px;} | ||
| .rn-paddingTop\\:0px{padding-top:0px;} | ||
| .rn-paddingRight\\:0px{padding-right:0px;} | ||
| .rn-paddingBottom\\:0px{padding-bottom:0px;} | ||
| .rn-paddingLeft\\:0px{padding-left:0px;} | ||
| .rn-position\\:relative{position:relative;} | ||
| .rn-textAlign\\:inherit{text-align:inherit;} | ||
| .rn-textDecoration\\:none{text-decoration:none;} | ||
| .rn-flexShrink\\:0{-webkit-flex-shrink:0px;-ms-flex-negative:0px;flex-shrink:0;} | ||
| </style>" | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 15 additions & 0 deletions
15
src/apis/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| exports[`apis/StyleSheet/createReactDOMStyle converts ReactNative style to ReactDOM style 1`] = ` | ||
| Object { | ||
| "borderBottomWidth": "1px", | ||
| "borderLeftWidth": "1px", | ||
| "borderRightWidth": "1px", | ||
| "borderTopWidth": "1px", | ||
| "borderWidthLeft": "2px", | ||
| "borderWidthRight": "3px", | ||
| "boxShadow": "1px 1px 1px 1px #000, 1px 2px 0px rgba(255,0,0,1)", | ||
| "display": "flex", | ||
| "marginBottom": "0px", | ||
| "marginTop": "0px", | ||
| "opacity": 0, | ||
| } | ||
| `; |
1 change: 1 addition & 0 deletions
1
src/apis/StyleSheet/__tests__/__snapshots__/generateCss-test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| exports[`apis/StyleSheet/generateCss generates correct css 1`] = `"-webkit-transition-duration:0.1s;transition-duration:0.1s;position:absolute;border-width-right:3px;border-width-left:2px;box-shadow:1px 1px 1px 1px #000;"`; |
22 changes: 13 additions & 9 deletions
22
src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,14 @@ | ||
| exports[`apis/StyleSheet resolve 1`] = ` | ||
| Object { | ||
| "className": "test __style_df __style_pebn", | ||
| "style": Object { | ||
| "display": null, | ||
| "opacity": 1, | ||
| "pointerEvents": null, | ||
| }, | ||
| } | ||
| exports[`apis/StyleSheet renderToString 1`] = ` | ||
| "<style id=\"react-native-stylesheet\"> | ||
| .rn-borderTopColor\\:red{border-top-color:red;} | ||
| .rn-borderRightColor\\:red{border-right-color:red;} | ||
| .rn-borderBottomColor\\:red{border-bottom-color:red;} | ||
| .rn-borderLeftColor\\:red{border-left-color:red;} | ||
| .rn-borderTopWidth\\:0px{border-top-width:0px;} | ||
| .rn-borderRightWidth\\:0px{border-right-width:0px;} | ||
| .rn-borderBottomWidth\\:0px{border-bottom-width:0px;} | ||
| .rn-borderLeftWidth\\:0px{border-left-width:0px;} | ||
| .rn-left\\:50px{left:50px;} | ||
| .rn-position\\:absolute{position:absolute;} | ||
| </style>" | ||
| `; |
179 changes: 179 additions & 0 deletions
179
src/apis/StyleSheet/__tests__/__snapshots__/registry-test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,179 @@ | ||
| exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to className 1`] = ` | ||
| Object { | ||
| "className": " | ||
| rn-borderTopColor:red | ||
| rn-borderRightColor:red | ||
| rn-borderBottomColor:red | ||
| rn-borderLeftColor:red | ||
| rn-borderTopWidth:0px | ||
| rn-borderRightWidth:0px | ||
| rn-borderBottomWidth:0px | ||
| rn-borderLeftWidth:0px | ||
| rn-left:50px | ||
| rn-pointerEvents:box-only | ||
| rn-position:absolute | ||
| rn-width:100px", | ||
| "style": Object {}, | ||
| } | ||
| `; | ||
|
|
||
| exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to className 2`] = ` | ||
| Object { | ||
| "className": " | ||
| rn-borderTopColor:red | ||
| rn-borderRightColor:red | ||
| rn-borderBottomColor:red | ||
| rn-borderLeftColor:red | ||
| rn-borderTopWidth:0px | ||
| rn-borderRightWidth:0px | ||
| rn-borderBottomWidth:0px | ||
| rn-borderLeftWidth:0px | ||
| rn-left:50px | ||
| rn-pointerEvents:box-only | ||
| rn-position:absolute | ||
| rn-width:200px", | ||
| "style": Object {}, | ||
| } | ||
| `; | ||
|
|
||
| exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to className 3`] = ` | ||
| Object { | ||
| "className": " | ||
| rn-borderTopColor:red | ||
| rn-borderRightColor:red | ||
| rn-borderBottomColor:red | ||
| rn-borderLeftColor:red | ||
| rn-borderTopWidth:0px | ||
| rn-borderRightWidth:0px | ||
| rn-borderBottomWidth:0px | ||
| rn-borderLeftWidth:0px | ||
| rn-left:50px | ||
| rn-pointerEvents:box-only | ||
| rn-position:absolute | ||
| rn-width:100px", | ||
| "style": Object {}, | ||
| } | ||
| `; | ||
|
|
||
| exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to mixed 1`] = ` | ||
| Object { | ||
| "className": " | ||
| rn-left:50px | ||
| rn-pointerEvents:box-only | ||
| rn-position:absolute", | ||
| "style": Object { | ||
| "borderBottomColor": "red", | ||
| "borderBottomWidth": "0px", | ||
| "borderLeftColor": "red", | ||
| "borderLeftWidth": "0px", | ||
| "borderRightColor": "red", | ||
| "borderRightWidth": "0px", | ||
| "borderTopColor": "red", | ||
| "borderTopWidth": "0px", | ||
| "width": "100px", | ||
| }, | ||
| } | ||
| `; | ||
|
|
||
| exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to mixed 2`] = ` | ||
| Object { | ||
| "className": " | ||
| rn-left:50px | ||
| rn-pointerEvents:box-only | ||
| rn-position:absolute | ||
| rn-width:200px", | ||
| "style": Object { | ||
| "borderBottomColor": "red", | ||
| "borderBottomWidth": "0px", | ||
| "borderLeftColor": "red", | ||
| "borderLeftWidth": "0px", | ||
| "borderRightColor": "red", | ||
| "borderRightWidth": "0px", | ||
| "borderTopColor": "red", | ||
| "borderTopWidth": "0px", | ||
| }, | ||
| } | ||
| `; | ||
|
|
||
| exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to mixed 3`] = ` | ||
| Object { | ||
| "className": " | ||
| rn-left:50px | ||
| rn-pointerEvents:box-only | ||
| rn-position:absolute", | ||
| "style": Object { | ||
| "borderBottomColor": "red", | ||
| "borderBottomWidth": "0px", | ||
| "borderLeftColor": "red", | ||
| "borderLeftWidth": "0px", | ||
| "borderRightColor": "red", | ||
| "borderRightWidth": "0px", | ||
| "borderTopColor": "red", | ||
| "borderTopWidth": "0px", | ||
| "width": "100px", | ||
| }, | ||
| } | ||
| `; | ||
|
|
||
| exports[`apis/StyleSheet/registry resolve without stylesheet, resolves to inline styles 1`] = ` | ||
| Object { | ||
| "className": " | ||
| ", | ||
| "style": Object { | ||
| "borderBottomColor": "red", | ||
| "borderBottomWidth": "0px", | ||
| "borderLeftColor": "red", | ||
| "borderLeftWidth": "0px", | ||
| "borderRightColor": "red", | ||
| "borderRightWidth": "0px", | ||
| "borderTopColor": "red", | ||
| "borderTopWidth": "0px", | ||
| "left": "50px", | ||
| "pointerEvents": "box-only", | ||
| "position": "absolute", | ||
| "width": "100px", | ||
| }, | ||
| } | ||
| `; | ||
|
|
||
| exports[`apis/StyleSheet/registry resolve without stylesheet, resolves to inline styles 2`] = ` | ||
| Object { | ||
| "className": " | ||
| ", | ||
| "style": Object { | ||
| "borderBottomColor": "red", | ||
| "borderBottomWidth": "0px", | ||
| "borderLeftColor": "red", | ||
| "borderLeftWidth": "0px", | ||
| "borderRightColor": "red", | ||
| "borderRightWidth": "0px", | ||
| "borderTopColor": "red", | ||
| "borderTopWidth": "0px", | ||
| "left": "50px", | ||
| "pointerEvents": "box-only", | ||
| "position": "absolute", | ||
| "width": "200px", | ||
| }, | ||
| } | ||
| `; | ||
|
|
||
| exports[`apis/StyleSheet/registry resolve without stylesheet, resolves to inline styles 3`] = ` | ||
| Object { | ||
| "className": " | ||
| ", | ||
| "style": Object { | ||
| "borderBottomColor": "red", | ||
| "borderBottomWidth": "0px", | ||
| "borderLeftColor": "red", | ||
| "borderLeftWidth": "0px", | ||
| "borderRightColor": "red", | ||
| "borderRightWidth": "0px", | ||
| "borderTopColor": "red", | ||
| "borderTopWidth": "0px", | ||
| "left": "50px", | ||
| "pointerEvents": "box-only", | ||
| "position": "absolute", | ||
| "width": "100px", | ||
| }, | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| /* eslint-env jasmine, jest */ | ||
|
|
||
| import generateCss from '../generateCss'; | ||
|
|
||
| describe('apis/StyleSheet/generateCss', () => { | ||
| test('generates correct css', () => { | ||
| const style = { | ||
| boxShadow: '1px 1px 1px 1px #000', | ||
| borderWidthLeft: 2, | ||
| borderWidthRight: 3, | ||
| position: 'absolute', | ||
| transitionDuration: '0.1s' | ||
| }; | ||
| expect(generateCss(style)).toMatchSnapshot(); | ||
| }); | ||
| }); |
Oops, something went wrong.