Styled-components: getStyleTags method very slow in v5

[tonycassara]

Hi all,

Upgrading my company's large codebase to v5 and we've seen a performance downgrade. Here are the times I recorded from our server for each styled-components specific methods we use:

| v4 | v5 |
|---|---|
|ServerStyleSheet: 5.355ms|ServerStyleSheet: 0.210ms|
|getStyleTags: 0.916ms|getStyleTags: 10.355ms|
|ServerStyleSheet: 2.883ms|ServerStyleSheet: 0.039ms|
|getStyleTags: 0.789ms|getStyleTags: 9.055ms|
|ServerStyleSheet: 4.064ms|ServerStyleSheet: 0.030ms|
|getStyleTags: 1.472ms|getStyleTags: 5.485ms|

Nice to see ServerStyleSheet constructor is much faster now! But the worse getStyleTags is not worth upgrading to. ~Wondering if it's related to my Node version.~ Just tried latest stable release Erbium and have the same results.

Environment

## System:
 - OS: macOS Mojave 10.14.6
 - CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
 - Memory: 1.35 GB / 16.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
 - npm: 6.13.4 - ~/.nvm/versions/node/v10.15.0/bin/npm
## npmPackages:
 - babel-plugin-styled-components: ^1.10.6 => 1.10.6
 - styled-components: ^5.0.0 => 5.0.0

Steps to reproduce

Update styled-components to v5 and jest-styled-components to latest

Expected Behavior

Expect to see a significant reduction in overall render time

Actual Behavior

Experience significant reduction in ServerStyleSheet time but overwhelming increase in getStyleTags

[kitten]

So there's not really any reason why this would become this much slower other than if you're creating a lot of StyledComponents dynamically (inside render / other components) which isn't supported.

I've got an explanation of why this is an issue here: https://github.com/styled-components/styled-components/issues/2753#issuecomment-533073888

I'm only suspecting that this may be the case though, since as you're creating more components, your performance during SSR CSS outputs will degrade linearly.

Also without any code or hints to go on this isn't really something we can go after or inspect :/

[tonycassara]

Thank you I think that's a great place to start!!

[tonycassara]

@kitten Can you please provide a concrete example of dynamic StyledComponent generation? I understand defining in a render method (and we've been pretty vigilant about that) but not sure about programmatically / other components.

[tonycassara]

FYI I dug a little deeper and removed all Styled Components from the page when doing SSR, and only render an empty div. Still seeing the much slower getStyleTags times.

| v4 | v5 |
|---|---|
|ServerStyleSheet: 4.386ms|ServerStyleSheet: 0.041ms|
|getStyleTags: 0.566ms|getStyleTags: 9.684ms|
|ServerStyleSheet: 2.973ms|ServerStyleSheet: 0.028ms|
|getStyleTags: 0.765ms|getStyleTags: 9.965ms|
|ServerStyleSheet: 3.178ms|ServerStyleSheet: 0.031ms|
|getStyleTags: 0.488ms|getStyleTags: 8.054ms|

[kitten]

Any dynamic generation means:

• calling styled in a function component or class component's render method
• calling createGlobalStyle in a function component or render method
• calling withComponent on a StyledComponent in a function component or render method

I think that's it (?) but there may be more cases. One thing we can check is how many components have been registered with the ServerStyleSheet. For that you can check .instance.getTag().length on your ServerStyleSheet. That number will tell you the _"upper bound"_ of registered components which is always a power of 2.

If you want to see how many rules you have inserted in total, you could check .instance.getTag().tag.length.

If this number increases over SSR renders, then you may have a leak where you're creating more components over time. Otherwise we may simply want to check how many rule groups you're inserting in total. Maybe that's simply just a "big number" 😅

[probablyup]

I’m curious if something is getting deopted. If you wouldn’t mind running your stack with node’s deopt hints turned on that may reveal a culprit.

[tonycassara]

Thank you both! I'll try these tomorrow morning.

[tonycassara]

@kitten I got an instance length of 262144 I have no idea if this is good or bad. I tried loading a few more pages and routing to new paths, the number remained unchanged.

[kitten]

@tonycassara which one of the two is that? And does that increase across SSR renders?

[tonycassara]

@kitten that is v5, when I run the same method on v4 it throws an error:

"r.instance.getTag is not a function"

edit: Oh sorry it's getTag().length not .tag.length, checking .tag.length now

[tonycassara]

Here's .tag.length from a few pages:

{ instanceLength: 72 } // page with empty div and zero styles in style tag
{ instanceLength: 312 } // home page
{ instanceLength: 312 } // home page
{ instanceLength: 376 } // deals page
{ instanceLength: 312 } // home page
{ instanceLength: 422 } // product list page
{ instanceLength: 372 } // product detail page

[tonycassara]

I’m curious if something is getting deopted. If you wouldn’t mind running your stack with node’s deopt hints turned on that may reveal a culprit.

Do you use --trace-deopt for this? I'm seeing nothing in my server console after trying a few different flags.

[probablyup]

Yup! https://blog.ghaiklor.com/2016/05/16/tracing-de-optimizations-in-nodejs/

Sent from my iPhone

On Jan 22, 2020, at 2:03 PM, Tony Cassara [e-mail] wrote:


I’m curious if something is getting deopted. If you wouldn’t mind running your stack with node’s deopt hints turned on that may reveal a culprit.

Do you use --trace-deopt for this? I'm seeing nothing in my server console after trying a few different flags.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

[tonycassara]

Thank you! Seeing lots now... time to comb through.

[tonycassara]

@probablyup I could only find 2 deopts in my server code (page with empty div) but I saw lots of deopts for styled-components in my node_modules. Does this mean I'm potentially doing dynamic generation somewhere?

[probablyup]

Yes what were the s-c deopts

Sent from my iPhone

On Jan 22, 2020, at 2:29 PM, Tony Cassara [e-mail] wrote:


@probablyup I could only find 2 deopts in my server code (page with empty div) but I saw lots of deopts for styled-components in my node_modules.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[tonycassara]

Here's a snippet (again from the empty div page), I have redacted part of my path with ...:

[deoptimizing (DEOPT soft): begin 0x1845ec9aa539 <JSFunction insertRules </...node_modules/styled-components/dist/styled-components.cjs.js> (sfi = 0x1845ec9aa1c9)> (opt #111) @6, FP to SP delta: 168, caller sp: 0x7ffeefbebcd0]
            ;;; deoptimize at </...node_modules/styled-components/dist/styled-components.cjs.js:344:26>, Insufficient type feedback for generic named access
  reading input frame insertRules => bytecode_offset=117, args=3, height=12; inputs:
      0: 0x1845ec9aa539 ;  [fp -  16]  0x1845ec9aa539 <JSFunction insertRules </...node_modules/styled-components/dist/styled-components.cjs.js> (sfi = 0x1845ec9aa1c9)>
      1: 0x18459101a739 ; rdi 0x18459101a739 <DefaultGroupedTag map = 0x184596f178b9>
      2: 0x0a9400000000 ;  [fp +  24]  2708
      3: 0x18459101a911 ;  [fp +  16]  0x18459101a911 <JSArray[56]>
      4: 0x184541bb7c79 ;  [fp - 128]  0x184541bb7c79 <FunctionContext[114]>
      5: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
      6: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
      7: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
      8: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
      9: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
     10: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
     11: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
     12: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
     13: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
     14: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
     15: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
     16: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
  translating interpreted frame insertRules => bytecode_offset=117, height=96
    0x7ffeefbebcc8: [top + 160] <- 0x18459101a739 <DefaultGroupedTag map = 0x184596f178b9> ;  stack parameter (input #1)
    0x7ffeefbebcc0: [top + 152] <- 0x0a9400000000 <Smi 2708> ;  stack parameter (input #2)
    0x7ffeefbebcb8: [top + 144] <- 0x18459101a911 <JSArray[56]> ;  stack parameter (input #3)
    -------------------------
    0x7ffeefbebcb0: [top + 136] <- 0x30f574d918d5 ;  caller's pc
    0x7ffeefbebca8: [top + 128] <- 0x7ffeefbebd08 ;  caller's fp
    0x7ffeefbebca0: [top + 120] <- 0x184541bb7c79 <FunctionContext[114]> ;  context
 (input #0)
    0x7ffeefbebc98: [top + 112] <- 0x1845ec9aa539 <JSFunction insertRules </...node_modules/styled-components/dist/styled-components.cjs.js> (sfi = 0x1845ec9aa1c9)> ;  function
 (input #0)
    0x7ffeefbebc90: [top + 104] <- 0x1845c4bc4821 <BytecodeArray[215]> ;  bytecode array
    0x7ffeefbebc88: [top +  96] <- 0x00ae00000000 <Smi 174> ;  bytecode offset
    -------------------------
    0x7ffeefbebc80: [top +  88] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  stack parameter (input #5)
    0x7ffeefbebc78: [top +  80] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  stack parameter (input #6)
    0x7ffeefbebc70: [top +  72] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  stack parameter (input #7)
    0x7ffeefbebc68: [top +  64] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  stack parameter (input #8)
    0x7ffeefbebc60: [top +  56] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  stack parameter (input #9)
    0x7ffeefbebc58: [top +  48] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  stack parameter (input #10)
    0x7ffeefbebc50: [top +  40] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  stack parameter (input #11)
    0x7ffeefbebc48: [top +  32] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  stack parameter (input #12)
    0x7ffeefbebc40: [top +  24] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  stack parameter (input #13)
    0x7ffeefbebc38: [top +  16] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  stack parameter (input #14)
    0x7ffeefbebc30: [top +   8] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  stack parameter (input #15)
    0x7ffeefbebc28: [top +   0] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  accumulator (input #0)
[deoptimizing (soft): end 0x1845ec9aa539 <JSFunction insertRules </...node_modules/styled-components/dist/styled-components.cjs.js> (sfi = 0x1845ec9aa1c9)> @6 => node=117, pc=0x30f574d91ec0, caller sp=0x7ffeefbebcd0, took 2.958 ms]
[deoptimizing (DEOPT eager): begin 0x184541bbb2a1 <JSFunction phash </...node_modules/styled-components/dist/styled-components.cjs.js> (sfi = 0x1845ec99c3c1)> (opt #105) @0, FP to SP delta: 56, caller sp: 0x7ffeefbebd98]
            ;;; deoptimize at </...node_modules/styled-components/dist/styled-components.cjs.js:679:3>, not a Smi
  reading input frame phash => bytecode_offset=0, args=3, height=5; inputs:
      0: 0x184541bbb2a1 ;  [fp -  16]  0x184541bbb2a1 <JSFunction phash </...node_modules/styled-components/dist/styled-components.cjs.js> (sfi = 0x1845ec99c3c1)>
      1: 0x18453f6026f1 ;  [fp +  32]  0x18453f6026f1 <undefined>
      2: 0x184591068101 ; rax 0x184591068101 <Number 2.65201e+09>
      3: 0x1845c4bb7a81 ;  [fp +  16]  0x1845c4bb7a81 <String[4]: 5381>
      4: 0x184541bb7c79 ;  [fp -  40]  0x184541bb7c79 <FunctionContext[114]>
      5: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
      6: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
      7: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
      8: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
      9: 0x18453f603211 ; (literal  1) 0x18453f603211 <Odd Oddball: optimized_out>
  translating interpreted frame phash => bytecode_offset=0, height=40
    0x7ffeefbebd90: [top + 104] <- 0x18453f6026f1 <undefined> ;  stack parameter (input #1)
    0x7ffeefbebd88: [top +  96] <- 0x184591068101 <Number 2.65201e+09> ;  stack parameter (input #2)
    0x7ffeefbebd80: [top +  88] <- 0x1845c4bb7a81 <String[4]: 5381> ;  stack parameter (input #3)
    -------------------------
    0x7ffeefbebd78: [top +  80] <- 0x30f574d918d5 ;  caller's pc
    0x7ffeefbebd70: [top +  72] <- 0x7ffeefbebe48 ;  caller's fp
    0x7ffeefbebd68: [top +  64] <- 0x184541bb7c79 <FunctionContext[114]> ;  context
 (input #0)
    0x7ffeefbebd60: [top +  56] <- 0x184541bbb2a1 <JSFunction phash </...node_modules/styled-components/dist/styled-components.cjs.js> (sfi = 0x1845ec99c3c1)> ;  function
 (input #0)
    0x7ffeefbebd58: [top +  48] <- 0x1845ec9b6d59 <BytecodeArray[70]> ;  bytecode array
    0x7ffeefbebd50: [top +  40] <- 0x003900000000 <Smi 57> ;  bytecode offset
    -------------------------
    0x7ffeefbebd48: [top +  32] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  stack parameter (input #5)
    0x7ffeefbebd40: [top +  24] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  stack parameter (input #6)
    0x7ffeefbebd38: [top +  16] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  stack parameter (input #7)
    0x7ffeefbebd30: [top +   8] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  stack parameter (input #8)
    0x7ffeefbebd28: [top +   0] <- 0x18453f603211 <Odd Oddball: optimized_out> ;  accumulator (input #0)
[deoptimizing (eager): end 0x184541bbb2a1 <JSFunction phash </...node_modules/styled-components/dist/styled-components.cjs.js> (sfi = 0x1845ec99c3c1)> @0 => node=0, pc=0x30f574d91ec0, caller sp=0x7ffeefbebd98, took 1.494 ms]
[deoptimizing (DEOPT soft): begin 0x184541bbae29 <JSFunction flatten </...node_modules/styled-components/dist/styled-components.cjs.js> (sfi = 0x1845ec99b069)> (opt #104) @2, FP to SP delta: 72, caller sp: 0x7ffeefbebd98]
            ;;; deoptimize at </...node_modules/styled-components/dist/styled-components.cjs.js:1036:21>, Insufficient type feedback for call
  reading input frame flatten => bytecode_offset=194, args=4, height=10; inputs:
      0: 0x184541bbae29 ;  [fp -  16]  0x184541bbae29 <JSFunction flatten </...node_modules/styled-components/dist/styled-components.cjs.js> (sfi = 0x1845ec99b069)>
      1: 0x18453f6026f1 ;  [fp +  40]  0x18453f6026f1 <undefined>

[probablyup]

Thanks that’s helpful!

Sent from my iPhone

On Jan 22, 2020, at 2:39 PM, Tony Cassara [e-mail] wrote:


Here's a snippet (again from the empty div page):

[deoptimizing (DEOPT soft): begin 0x1845ec9aa539 (sfi = 0x1845ec9aa1c9)> (opt #111) @6, FP to SP delta: 168, caller sp: 0x7ffeefbebcd0]
;;; deoptimize at , Insufficient type feedback for generic named access
reading input frame insertRules => bytecode_offset=117, args=3, height=12; inputs:
0: 0x1845ec9aa539 ; [fp - 16] 0x1845ec9aa539 (sfi = 0x1845ec9aa1c9)>
1: 0x18459101a739 ; rdi 0x18459101a739
2: 0x0a9400000000 ; [fp + 24] 2708
3: 0x18459101a911 ; [fp + 16] 0x18459101a911 4: 0x184541bb7c79 ; [fp - 128] 0x184541bb7c79 5: 0x18453f603211 ; (literal 1) 0x18453f603211
6: 0x18453f603211 ; (literal 1) 0x18453f603211
7: 0x18453f603211 ; (literal 1) 0x18453f603211
8: 0x18453f603211 ; (literal 1) 0x18453f603211
9: 0x18453f603211 ; (literal 1) 0x18453f603211
10: 0x18453f603211 ; (literal 1) 0x18453f603211
11: 0x18453f603211 ; (literal 1) 0x18453f603211
12: 0x18453f603211 ; (literal 1) 0x18453f603211
13: 0x18453f603211 ; (literal 1) 0x18453f603211
14: 0x18453f603211 ; (literal 1) 0x18453f603211
15: 0x18453f603211 ; (literal 1) 0x18453f603211
16: 0x18453f603211 ; (literal 1) 0x18453f603211
translating interpreted frame insertRules => bytecode_offset=117, height=96
0x7ffeefbebcc8: [top + 160] <- 0x18459101a739 ; stack parameter (input #1)
0x7ffeefbebcc0: [top + 152] <- 0x0a9400000000 ; stack parameter (input #2)
0x7ffeefbebcb8: [top + 144] <- 0x18459101a911 -------------------------
0x7ffeefbebcb0: [top + 136] <- 0x30f574d918d5 ; caller's pc
0x7ffeefbebca8: [top + 128] <- 0x7ffeefbebd08 ; caller's fp
0x7ffeefbebca0: [top + 120] <- 0x184541bb7c79 (input #0)
0x7ffeefbebc98: [top + 112] <- 0x1845ec9aa539 (sfi = 0x1845ec9aa1c9)> ; function
(input #0)
0x7ffeefbebc90: [top + 104] <- 0x1845c4bc4821 0x7ffeefbebc88: [top + 96] <- 0x00ae00000000 ; bytecode offset
-------------------------
0x7ffeefbebc80: [top + 88] <- 0x18453f603211 ; stack parameter (input #5)
0x7ffeefbebc78: [top + 80] <- 0x18453f603211 ; stack parameter (input #6)
0x7ffeefbebc70: [top + 72] <- 0x18453f603211 ; stack parameter (input #7)
0x7ffeefbebc68: [top + 64] <- 0x18453f603211 ; stack parameter (input #8)
0x7ffeefbebc60: [top + 56] <- 0x18453f603211 ; stack parameter (input #9)
0x7ffeefbebc58: [top + 48] <- 0x18453f603211 ; stack parameter (input #10)
0x7ffeefbebc50: [top + 40] <- 0x18453f603211 ; stack parameter (input #11)
0x7ffeefbebc48: [top + 32] <- 0x18453f603211 ; stack parameter (input #12)
0x7ffeefbebc40: [top + 24] <- 0x18453f603211 ; stack parameter (input #13)
0x7ffeefbebc38: [top + 16] <- 0x18453f603211 ; stack parameter (input #14)
0x7ffeefbebc30: [top + 8] <- 0x18453f603211 ; stack parameter (input #15)
0x7ffeefbebc28: [top + 0] <- 0x18453f603211 ; accumulator (input #0)
[deoptimizing (soft): end 0x1845ec9aa539 (sfi = 0x1845ec9aa1c9)> @6 => node=117, pc=0x30f574d91ec0, caller sp=0x7ffeefbebcd0, took 2.958 ms]
[deoptimizing (DEOPT eager): begin 0x184541bbb2a1 (sfi = 0x1845ec99c3c1)> (opt #105) @0, FP to SP delta: 56, caller sp: 0x7ffeefbebd98]
;;; deoptimize at , not a Smi
reading input frame phash => bytecode_offset=0, args=3, height=5; inputs:
0: 0x184541bbb2a1 ; [fp - 16] 0x184541bbb2a1 (sfi = 0x1845ec99c3c1)>
1: 0x18453f6026f1 ; [fp + 32] 0x18453f6026f1
2: 0x184591068101 ; rax 0x184591068101
3: 0x1845c4bb7a81 ; [fp + 16] 0x1845c4bb7a81
4: 0x184541bb7c79 ; [fp - 40] 0x184541bb7c79 5: 0x18453f603211 ; (literal 1) 0x18453f603211
6: 0x18453f603211 ; (literal 1) 0x18453f603211
7: 0x18453f603211 ; (literal 1) 0x18453f603211
8: 0x18453f603211 ; (literal 1) 0x18453f603211
9: 0x18453f603211 ; (literal 1) 0x18453f603211
translating interpreted frame phash => bytecode_offset=0, height=40
0x7ffeefbebd90: [top + 104] <- 0x18453f6026f1 ; stack parameter (input #1)
0x7ffeefbebd88: [top + 96] <- 0x184591068101 ; stack parameter (input #2)
0x7ffeefbebd80: [top + 88] <- 0x1845c4bb7a81 ; stack parameter (input #3)
-------------------------
0x7ffeefbebd78: [top + 80] <- 0x30f574d918d5 ; caller's pc
0x7ffeefbebd70: [top + 72] <- 0x7ffeefbebe48 ; caller's fp
0x7ffeefbebd68: [top + 64] <- 0x184541bb7c79 (input #0)
0x7ffeefbebd60: [top + 56] <- 0x184541bbb2a1 (sfi = 0x1845ec99c3c1)> ; function
(input #0)
0x7ffeefbebd58: [top + 48] <- 0x1845ec9b6d59 0x7ffeefbebd50: [top + 40] <- 0x003900000000 ; bytecode offset
-------------------------
0x7ffeefbebd48: [top + 32] <- 0x18453f603211 ; stack parameter (input #5)
0x7ffeefbebd40: [top + 24] <- 0x18453f603211 ; stack parameter (input #6)
0x7ffeefbebd38: [top + 16] <- 0x18453f603211 ; stack parameter (input #7)
0x7ffeefbebd30: [top + 8] <- 0x18453f603211 ; stack parameter (input #8)
0x7ffeefbebd28: [top + 0] <- 0x18453f603211 ; accumulator (input #0)
[deoptimizing (eager): end 0x184541bbb2a1 (sfi = 0x1845ec99c3c1)> @0 => node=0, pc=0x30f574d91ec0, caller sp=0x7ffeefbebd98, took 1.494 ms]
[deoptimizing (DEOPT soft): begin 0x184541bbae29 (sfi = 0x1845ec99b069)> (opt #104) @2, FP to SP delta: 72, caller sp: 0x7ffeefbebd98]
;;; deoptimize at , Insufficient type feedback for call
reading input frame flatten => bytecode_offset=194, args=4, height=10; inputs:
0: 0x184541bbae29 ; [fp - 16] 0x184541bbae29 (sfi = 0x1845ec99b069)>
1: 0x18453f6026f1 ; [fp + 40] 0x18453f6026f1
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[probablyup]

@tonycassara Any chance you have a version of this code in a repo I could test against?

[tonycassara]

@probablyup sadly no, I'm not at liberty to share access to the codebase 😢 What were you thinking?

[probablyup]

I'm just not seeing the deopts from node in a limited reproduction, so I imagine there's some factors coming together here...

[tonycassara]

@probablyup our SSR was setup using the tutorial in the docs, we do pretty much everything by the book SC has provided. The only possibility is some complexity with our component library but we use the expected patterns of extending components with Styled(Button) / Styled.button etc.

So all I can say for sure is our getStyleTags method slowed down considerably between v4 and v5. The sentiment here is that we were doing something incorrectly before that was made worse by the changes to ServerStyleSheet instantiation.

[probablyup]

Can you try out [email protected] and let me know how that goes? It's based on https://github.com/styled-components/styled-components/pull/2983

When profiling, we're specifically looking for "eager" deopts which have more severe performance penalties

[tonycassara]

@probablyup no appreciable difference in the getStyleTags times:

getStyleTags: 10.587ms
{ instanceLength: 72 }
getStyleTags: 9.143ms
{ instanceLength: 72 }
getStyleTags: 5.043ms
{ instanceLength: 72 }
getStyleTags: 5.039ms
{ instanceLength: 72 }
getStyleTags: 5.382ms
{ instanceLength: 72 }

still seeing deopts eager on empty div page:

[deoptimizing (DEOPT eager): begin 0x2ad2931057d1 <JSFunction join (sfi = 0x2ad299986cf1)> (opt #45) @0, FP to SP delta: 32, caller sp: 0x7ffeefbef840]
            ;;; deoptimize at <native array.js:280:46>, wrong map
  reading input frame join => bytecode_offset=0, args=2, height=7; inputs:
      0: 0x2ad2931057d1 ;  [fp -  16]  0x2ad2931057d1 <JSFunction join (sfi = 0x2ad299986cf1)>
      1: 0x2ad2e06f5209 ; rbx 0x2ad2e06f5209 <JSArray[0]>
      2: 0x2ad2ca1eda09 ;  [fp +  16]  0x2ad2ca1eda09 <String[1]: &>
      3: 0x2ad293105411 ;  [fp -  24]  0x2ad293105411 <FunctionContext[37]>
      4: 0x2ad2bdd03211 ; (literal  1) 0x2ad2bdd03211 <Odd Oddball: optimized_out>
      5: 0x2ad2bdd03211 ; (literal  1) 0x2ad2bdd03211 <Odd Oddball: optimized_out>
      6: 0x2ad2bdd03211 ; (literal  1) 0x2ad2bdd03211 <Odd Oddball: optimized_out>
      7: 0x2ad2bdd03211 ; (literal  1) 0x2ad2bdd03211 <Odd Oddball: optimized_out>
      8: 0x2ad2bdd03211 ; (literal  1) 0x2ad2bdd03211 <Odd Oddball: optimized_out>
      9: 0x2ad2bdd03211 ; (literal  1) 0x2ad2bdd03211 <Odd Oddball: optimized_out>
     10: 0x2ad2bdd03211 ; (literal  1) 0x2ad2bdd03211 <Odd Oddball: optimized_out>
  translating interpreted frame join => bytecode_offset=0, height=56
    0x7ffeefbef838: [top + 112] <- 0x2ad2e06f5209 <JSArray[0]> ;  stack parameter (input #1)
    0x7ffeefbef830: [top + 104] <- 0x2ad2ca1eda09 <String[1]: &> ;  stack parameter (input #2)
    -------------------------
    0x7ffeefbef828: [top +  96] <- 0x0dbe60e918d5 ;  caller's pc
    0x7ffeefbef820: [top +  88] <- 0x7ffeefbef938 ;  caller's fp
    0x7ffeefbef818: [top +  80] <- 0x2ad293105411 <FunctionContext[37]> ;  context
 (input #0)
    0x7ffeefbef810: [top +  72] <- 0x2ad2931057d1 <JSFunction join (sfi = 0x2ad299986cf1)> ;  function
 (input #0)
    0x7ffeefbef808: [top +  64] <- 0x2ad2a0ad0009 <BytecodeArray[38]> ;  bytecode array
    0x7ffeefbef800: [top +  56] <- 0x003900000000 <Smi 57> ;  bytecode offset
    -------------------------
    0x7ffeefbef7f8: [top +  48] <- 0x2ad2bdd03211 <Odd Oddball: optimized_out> ;  stack parameter (input #4)
    0x7ffeefbef7f0: [top +  40] <- 0x2ad2bdd03211 <Odd Oddball: optimized_out> ;  stack parameter (input #5)
    0x7ffeefbef7e8: [top +  32] <- 0x2ad2bdd03211 <Odd Oddball: optimized_out> ;  stack parameter (input #6)
    0x7ffeefbef7e0: [top +  24] <- 0x2ad2bdd03211 <Odd Oddball: optimized_out> ;  stack parameter (input #7)
    0x7ffeefbef7d8: [top +  16] <- 0x2ad2bdd03211 <Odd Oddball: optimized_out> ;  stack parameter (input #8)
    0x7ffeefbef7d0: [top +   8] <- 0x2ad2bdd03211 <Odd Oddball: optimized_out> ;  stack parameter (input #9)
    0x7ffeefbef7c8: [top +   0] <- 0x2ad2bdd03211 <Odd Oddball: optimized_out> ;  accumulator (input #0)
[deoptimizing (eager): end 0x2ad2931057d1 <JSFunction join (sfi = 0x2ad299986cf1)> @0 => node=0, pc=0x0dbe60e91ec0, caller sp=0x7ffeefbef840, took 4.944 ms]

[deoptimizing (DEOPT eager): begin 0x2ad22b686c89 <JSFunction phash (sfi = 0x2ad22136ecc9)> (opt #105) @2, FP to SP delta: 64, caller sp: 0x7ffeefbebdd8]
            ;;; deoptimize at </node_modules/styled-components/dist/styled-components.cjs.js:680:12>, not a Smi
  reading input frame phash => bytecode_offset=0, args=3, height=5; inputs:
      0: 0x2ad22b686c89 ;  [fp -  16]  0x2ad22b686c89 <JSFunction phash (sfi = 0x2ad22136ecc9)>
      1: 0x2ad2bdd026f1 ;  [fp +  32]  0x2ad2bdd026f1 <undefined>
      2: 0x2ad2d5223cb9 ; rsi 0x2ad2d5223cb9 <Number 2.65201e+09>
      3: 0x2ad2ea0e2219 ; rax 0x2ad2ea0e2219 <String[4]: 5381>
      4: 0x2ad22b6831f1 ;  [fp -  40]  0x2ad22b6831f1 <FunctionContext[114]>
      5: 0x2ad2bdd03211 ; (literal  1) 0x2ad2bdd03211 <Odd Oddball: optimized_out>
      6: 0x2ad2bdd03211 ; (literal  1) 0x2ad2bdd03211 <Odd Oddball: optimized_out>
      7: 0x2ad2bdd03211 ; (literal  1) 0x2ad2bdd03211 <Odd Oddball: optimized_out>
      8: 0x2ad2bdd03211 ; (literal  1) 0x2ad2bdd03211 <Odd Oddball: optimized_out>
      9: 0x2ad2bdd03211 ; (literal  1) 0x2ad2bdd03211 <Odd Oddball: optimized_out>
  translating interpreted frame phash => bytecode_offset=0, height=40
    0x7ffeefbebdd0: [top + 104] <- 0x2ad2bdd026f1 <undefined> ;  stack parameter (input #1)
    0x7ffeefbebdc8: [top +  96] <- 0x2ad2d5223cb9 <Number 2.65201e+09> ;  stack parameter (input #2)
    0x7ffeefbebdc0: [top +  88] <- 0x2ad2ea0e2219 <String[4]: 5381> ;  stack parameter (input #3)
    -------------------------
    0x7ffeefbebdb8: [top +  80] <- 0x0dbe60e918d5 ;  caller's pc
    0x7ffeefbebdb0: [top +  72] <- 0x7ffeefbebe88 ;  caller's fp
    0x7ffeefbebda8: [top +  64] <- 0x2ad22b6831f1 <FunctionContext[114]> ;  context
 (input #0)
    0x7ffeefbebda0: [top +  56] <- 0x2ad22b686c89 <JSFunction phash (sfi = 0x2ad22136ecc9)> ;  function
 (input #0)
    0x7ffeefbebd98: [top +  48] <- 0x2ad22fbb73b1 <BytecodeArray[70]> ;  bytecode array
    0x7ffeefbebd90: [top +  40] <- 0x003900000000 <Smi 57> ;  bytecode offset
    -------------------------
    0x7ffeefbebd88: [top +  32] <- 0x2ad2bdd03211 <Odd Oddball: optimized_out> ;  stack parameter (input #5)
    0x7ffeefbebd80: [top +  24] <- 0x2ad2bdd03211 <Odd Oddball: optimized_out> ;  stack parameter (input #6)
    0x7ffeefbebd78: [top +  16] <- 0x2ad2bdd03211 <Odd Oddball: optimized_out> ;  stack parameter (input #7)
    0x7ffeefbebd70: [top +   8] <- 0x2ad2bdd03211 <Odd Oddball: optimized_out> ;  stack parameter (input #8)
    0x7ffeefbebd68: [top +   0] <- 0x2ad2bdd03211 <Odd Oddball: optimized_out> ;  accumulator (input #0)
[deoptimizing (eager): end 0x2ad22b686c89 <JSFunction phash (sfi = 0x2ad22136ecc9)> @2 => node=0, pc=0x0dbe60e91ec0, caller sp=0x7ffeefbebdd8, took 23.402 ms]

[probablyup]

Looks like there’s a new one there in the join function. Any other ones you find in the trace output would be useful!

Sent from my iPhone

On Jan 22, 2020, at 8:06 PM, Tony Cassara [e-mail] wrote:


@probablyup no appreciable difference in the getStyleTags times:

getStyleTags: 10.587ms
{ instanceLength: 72 }
getStyleTags: 9.143ms
{ instanceLength: 72 }
getStyleTags: 5.043ms
{ instanceLength: 72 }
getStyleTags: 5.039ms
{ instanceLength: 72 }
getStyleTags: 5.382ms
{ instanceLength: 72 }
still seeing deopts eager:

[deoptimizing (DEOPT eager): begin 0x2ad2931057d1 @0, FP to SP delta: 32, caller sp: 0x7ffeefbef840]
;;; deoptimize at , wrong map
reading input frame join => bytecode_offset=0, args=2, height=7; inputs:
0: 0x2ad2931057d1 ; [fp - 16] 0x2ad2931057d1 1: 0x2ad2e06f5209 ; rbx 0x2ad2e06f5209 2: 0x2ad2ca1eda09 ; [fp + 16] 0x2ad2ca1eda09 3: 0x2ad293105411 ; [fp - 24] 0x2ad293105411 4: 0x2ad2bdd03211 ; (literal 1) 0x2ad2bdd03211
5: 0x2ad2bdd03211 ; (literal 1) 0x2ad2bdd03211
6: 0x2ad2bdd03211 ; (literal 1) 0x2ad2bdd03211
7: 0x2ad2bdd03211 ; (literal 1) 0x2ad2bdd03211
8: 0x2ad2bdd03211 ; (literal 1) 0x2ad2bdd03211
9: 0x2ad2bdd03211 ; (literal 1) 0x2ad2bdd03211
10: 0x2ad2bdd03211 ; (literal 1) 0x2ad2bdd03211
translating interpreted frame join => bytecode_offset=0, height=56
0x7ffeefbef838: [top + 112] <- 0x2ad2e06f5209 0x7ffeefbef830: [top + 104] <- 0x2ad2ca1eda09 -------------------------
0x7ffeefbef828: [top + 96] <- 0x0dbe60e918d5 ; caller's pc
0x7ffeefbef820: [top + 88] <- 0x7ffeefbef938 ; caller's fp
0x7ffeefbef818: [top + 80] <- 0x2ad293105411 (input #0)
0x7ffeefbef810: [top + 72] <- 0x2ad2931057d1 (input #0)
0x7ffeefbef808: [top + 64] <- 0x2ad2a0ad0009 0x7ffeefbef800: [top + 56] <- 0x003900000000 ; bytecode offset
-------------------------
0x7ffeefbef7f8: [top + 48] <- 0x2ad2bdd03211 ; stack parameter (input #4)
0x7ffeefbef7f0: [top + 40] <- 0x2ad2bdd03211 ; stack parameter (input #5)
0x7ffeefbef7e8: [top + 32] <- 0x2ad2bdd03211 ; stack parameter (input #6)
0x7ffeefbef7e0: [top + 24] <- 0x2ad2bdd03211 ; stack parameter (input #7)
0x7ffeefbef7d8: [top + 16] <- 0x2ad2bdd03211 ; stack parameter (input #8)
0x7ffeefbef7d0: [top + 8] <- 0x2ad2bdd03211 ; stack parameter (input #9)
0x7ffeefbef7c8: [top + 0] <- 0x2ad2bdd03211 ; accumulator (input #0)
[deoptimizing (eager): end 0x2ad2931057d1 @0 => node=0, pc=0x0dbe60e91ec0, caller sp=0x7ffeefbef840, took 4.944 ms]
[deoptimizing (DEOPT eager): begin 0x2ad22b686c89 @2, FP to SP delta: 64, caller sp: 0x7ffeefbebdd8]
;;; deoptimize at , not a Smi
reading input frame phash => bytecode_offset=0, args=3, height=5; inputs:
0: 0x2ad22b686c89 ; [fp - 16] 0x2ad22b686c89 1: 0x2ad2bdd026f1 ; [fp + 32] 0x2ad2bdd026f1
2: 0x2ad2d5223cb9 ; rsi 0x2ad2d5223cb9
3: 0x2ad2ea0e2219 ; rax 0x2ad2ea0e2219
4: 0x2ad22b6831f1 ; [fp - 40] 0x2ad22b6831f1 5: 0x2ad2bdd03211 ; (literal 1) 0x2ad2bdd03211
6: 0x2ad2bdd03211 ; (literal 1) 0x2ad2bdd03211
7: 0x2ad2bdd03211 ; (literal 1) 0x2ad2bdd03211
8: 0x2ad2bdd03211 ; (literal 1) 0x2ad2bdd03211
9: 0x2ad2bdd03211 ; (literal 1) 0x2ad2bdd03211
translating interpreted frame phash => bytecode_offset=0, height=40
0x7ffeefbebdd0: [top + 104] <- 0x2ad2bdd026f1 ; stack parameter (input #1)
0x7ffeefbebdc8: [top + 96] <- 0x2ad2d5223cb9 ; stack parameter (input #2)
0x7ffeefbebdc0: [top + 88] <- 0x2ad2ea0e2219 ; stack parameter (input #3)
-------------------------
0x7ffeefbebdb8: [top + 80] <- 0x0dbe60e918d5 ; caller's pc
0x7ffeefbebdb0: [top + 72] <- 0x7ffeefbebe88 ; caller's fp
0x7ffeefbebda8: [top + 64] <- 0x2ad22b6831f1 (input #0)
0x7ffeefbebda0: [top + 56] <- 0x2ad22b686c89 (input #0)
0x7ffeefbebd98: [top + 48] <- 0x2ad22fbb73b1 0x7ffeefbebd90: [top + 40] <- 0x003900000000 ; bytecode offset
-------------------------
0x7ffeefbebd88: [top + 32] <- 0x2ad2bdd03211 ; stack parameter (input #5)
0x7ffeefbebd80: [top + 24] <- 0x2ad2bdd03211 ; stack parameter (input #6)
0x7ffeefbebd78: [top + 16] <- 0x2ad2bdd03211 ; stack parameter (input #7)
0x7ffeefbebd70: [top + 8] <- 0x2ad2bdd03211 ; stack parameter (input #8)
0x7ffeefbebd68: [top + 0] <- 0x2ad2bdd03211 ; accumulator (input #0)
[deoptimizing (eager): end 0x2ad22b686c89 @2 => node=0, pc=0x0dbe60e91ec0, caller sp=0x7ffeefbebdd8, took 23.402 ms]
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[tonycassara]

That's all I got from the empty div page, I'll follow up with other pages tomorrow. Do optimizations help or only deopts?

[probablyup]

Just eager deopts! Thanks :)

Sent from my iPhone

On Jan 22, 2020, at 8:12 PM, Tony Cassara [e-mail] wrote:


That's all I got from the empty div page, I'll follow up with other pages tomorrow. Do optimizations help or only deopts?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[RomanLubushkin]

Got the same dramatic performance degradation by updating from v4 to v5. Server average RPS dropped from 400 to 30.

[probablyup]

Alright let's try out [email protected] and see where that gets us. It's very hard for me to debug without a reproduction repo... anything people can contribute here would be helpful.

I think I'm optimizing the wrong thing here though. If getStyleTags is slow, that implies the slowdown is somewhere in that particular code stack and none of the deopts mentioned here so far have to do with that code.

[probablyup]

Something like this could be helpful for figuring out which code paths are contributing the most: https://clinicjs.org/flame/

[RomanLubushkin]

@probablyup thank you for support, for now, we just rolled back to v4. On a weekend I'll try to get as much info as possible.
You're doing awesome work with v5 anyway.

[Ketler13]

Could someone help with similar problem in 5.0.0-rc2 version. We have SSR with styled components. When server has started for a few days, such error appeared (top of the stack where styled components are mentioned):

RangeError: Invalid typed array length: -2147483648
at new Uint32Array ()
at DefaultGroupedTag.insertRules (/usr/src/app/node_modules/styled-components/dist/styled-components.cjs.js:417:25)
at StyleSheet.insertRules (/usr/src/app/node_modules/styled-components/dist/styled-components.cjs.js:654:19)
at GlobalStyle.createStyles (/usr/src/app/node_modules/styled-components/dist/styled-components.cjs.js:1644:16)
at GlobalStyle.renderStyles (/usr/src/app/node_modules/styled-components/dist/styled-components.cjs.js:1655:10)
at GlobalStyleComponent (/usr/src/app/node_modules/styled-components/dist/styled-components.cjs.js:1690:19)

This happens when page is rendered. I checked source code and in https://github.com/styled-components/styled-components/blob/147b0e9a1f10786551b13fd27452fcd5c678d5e0/packages/styled-components/src/sheet/GroupedTag.js there is a insertRules method.
There is a line where new size for groupSizes is calculated:

const newSize = BASE_SIZE << ((group / BASE_SIZE) | 0);

Error described above happens when BASE_SIZE << 23 ,e.g. group === 5888.
Argument group in this method comes from other module - https://github.com/styled-components/styled-components/blob/147b0e9a1f10786551b13fd27452fcd5c678d5e0/packages/styled-components/src/sheet/GroupIDAllocator.js . This is a plain counter that increments every time new group is created.

When group equals 5632, bitwise operation from above equals this BASE_SIZE << 22 === 1073741824. And new Uint32Array is created with size of 1073741824.

Does someone experience the same issue? To reproduce this problem, please, start SSR server and try to access your application via curl in a loop 1000, 2000 or even more and log to console newSize variable.

UPDATE. It was fixed by https://github.com/styled-components/styled-components/commit/aca9186920dd4adddb44b76063b75ab1147b480a

[tonycassara]

@probablyup this is what I got running the new testdeopt2 package on the empty div page:

[deoptimizing (DEOPT eager): begin 0x1f0d06e857d1 <JSFunction join (sfi = 0x1f0d54886cf1)> (opt #43) @0, FP to SP delta: 32, caller sp: 0x7ffeefbef830]
            ;;; deoptimize at <native array.js:280:46>, wrong map
  reading input frame join => bytecode_offset=0, args=2, height=7; inputs:
      0: 0x1f0d06e857d1 ;  [fp -  16]  0x1f0d06e857d1 <JSFunction join (sfi = 0x1f0d54886cf1)>
      1: 0x1f0dd26da199 ; rbx 0x1f0dd26da199 <JSArray[0]>
      2: 0x1f0dbd0ed4b1 ;  [fp +  16]  0x1f0dbd0ed4b1 <String[1]: &>
      3: 0x1f0d06e85411 ;  [fp -  24]  0x1f0d06e85411 <FunctionContext[37]>
      4: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
      5: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
      6: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
      7: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
      8: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
      9: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     10: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
  translating interpreted frame join => bytecode_offset=0, height=56
    0x7ffeefbef828: [top + 112] <- 0x1f0dd26da199 <JSArray[0]> ;  stack parameter (input #1)
    0x7ffeefbef820: [top + 104] <- 0x1f0dbd0ed4b1 <String[1]: &> ;  stack parameter (input #2)
    -------------------------
    0x7ffeefbef818: [top +  96] <- 0x22472a6918d5 ;  caller's pc
    0x7ffeefbef810: [top +  88] <- 0x7ffeefbef928 ;  caller's fp
    0x7ffeefbef808: [top +  80] <- 0x1f0d06e85411 <FunctionContext[37]> ;  context
 (input #0)
    0x7ffeefbef800: [top +  72] <- 0x1f0d06e857d1 <JSFunction join (sfi = 0x1f0d54886cf1)> ;  function
 (input #0)
    0x7ffeefbef7f8: [top +  64] <- 0x1f0d15850009 <BytecodeArray[38]> ;  bytecode array
    0x7ffeefbef7f0: [top +  56] <- 0x003900000000 <Smi 57> ;  bytecode offset
    -------------------------
    0x7ffeefbef7e8: [top +  48] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #4)
    0x7ffeefbef7e0: [top +  40] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #5)
    0x7ffeefbef7d8: [top +  32] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #6)
    0x7ffeefbef7d0: [top +  24] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #7)
    0x7ffeefbef7c8: [top +  16] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #8)
    0x7ffeefbef7c0: [top +   8] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #9)
    0x7ffeefbef7b8: [top +   0] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  accumulator (input #0)
[deoptimizing (eager): end 0x1f0d06e857d1 <JSFunction join (sfi = 0x1f0d54886cf1)> @0 => node=0, pc=0x22472a691ec0, caller sp=0x7ffeefbef830, took 5.402 ms]
[deoptimizing (DEOPT soft): begin 0x1f0d75f521f1 <JSFunction insertRules (sfi = 0x1f0d75f51e61)> (opt #113) @6, FP to SP delta: 168, caller sp: 0x7ffeefbefda0]
            ;;; deoptimize at </node_modules/styled-components/dist/styled-components.cjs.js:344:26>, Insufficient type feedback for generic named access
  reading input frame insertRules => bytecode_offset=117, args=3, height=12; inputs:
      0: 0x1f0d75f521f1 ;  [fp -  16]  0x1f0d75f521f1 <JSFunction insertRules (sfi = 0x1f0d75f51e61)>
      1: 0x1f0d5cb0adb9 ; rdi 0x1f0d5cb0adb9 <DefaultGroupedTag map = 0x1f0d464b87b1>
      2: 0x0a9400000000 ;  [fp +  24]  2708
      3: 0x1f0d5cb08631 ;  [fp +  16]  0x1f0d5cb08631 <JSArray[56]>
      4: 0x1f0dad8826a1 ;  [fp - 128]  0x1f0dad8826a1 <FunctionContext[114]>
      5: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
      6: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
      7: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
      8: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
      9: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     10: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     11: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     12: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     13: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     14: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     15: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     16: 0x1f0dd2903211 ; (literal  1) 0x1f0dd2903211 <Odd Oddball: optimized_out>
  translating interpreted frame insertRules => bytecode_offset=117, height=96
    0x7ffeefbefd98: [top + 160] <- 0x1f0d5cb0adb9 <DefaultGroupedTag map = 0x1f0d464b87b1> ;  stack parameter (input #1)
    0x7ffeefbefd90: [top + 152] <- 0x0a9400000000 <Smi 2708> ;  stack parameter (input #2)
    0x7ffeefbefd88: [top + 144] <- 0x1f0d5cb08631 <JSArray[56]> ;  stack parameter (input #3)
    -------------------------
    0x7ffeefbefd80: [top + 136] <- 0x22472a6918d5 ;  caller's pc
    0x7ffeefbefd78: [top + 128] <- 0x7ffeefbefdd8 ;  caller's fp
    0x7ffeefbefd70: [top + 120] <- 0x1f0dad8826a1 <FunctionContext[114]> ;  context
 (input #0)
    0x7ffeefbefd68: [top + 112] <- 0x1f0d75f521f1 <JSFunction insertRules (sfi = 0x1f0d75f51e61)> ;  function
 (input #0)
    0x7ffeefbefd60: [top + 104] <- 0x1f0dacd74051 <BytecodeArray[215]> ;  bytecode array
    0x7ffeefbefd58: [top +  96] <- 0x00ae00000000 <Smi 174> ;  bytecode offset
    -------------------------
    0x7ffeefbefd50: [top +  88] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #5)
    0x7ffeefbefd48: [top +  80] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #6)
    0x7ffeefbefd40: [top +  72] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #7)
    0x7ffeefbefd38: [top +  64] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #8)
    0x7ffeefbefd30: [top +  56] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #9)
    0x7ffeefbefd28: [top +  48] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #10)
    0x7ffeefbefd20: [top +  40] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #11)
    0x7ffeefbefd18: [top +  32] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #12)
    0x7ffeefbefd10: [top +  24] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #13)
    0x7ffeefbefd08: [top +  16] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #14)
    0x7ffeefbefd00: [top +   8] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #15)
    0x7ffeefbefcf8: [top +   0] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  accumulator (input #0)
[deoptimizing (soft): end 0x1f0d75f521f1 <JSFunction insertRules (sfi = 0x1f0d75f51e61)> @6 => node=117, pc=0x22472a691ec0, caller sp=0x7ffeefbefda0, took 1.515 ms]

No more phash?

[tonycassara]

Here are two eager deopts from another page with Styled Components rendering:

[deoptimizing (DEOPT eager): begin 0x1f0d5cb6f7d9 <JSFunction M (sfi = 0x1f0daedfc4f1)> (opt #132) @86, FP to SP delta: 224, caller sp: 0x7ffeefbebc88]
            ;;; deoptimize at </node_modules/@emotion/stylis/dist/stylis.cjs.prod.js:315:46>, out of bounds
  reading FeedbackVector (slot 254)
  reading input frame M => bytecode_offset=1869, args=6, height=37; inputs:
      0: 0x1f0d5cb6f7d9 ;  [fp -  24]  0x1f0d5cb6f7d9 <JSFunction M (sfi = 0x1f0daedfc4f1)>
      1: 0x1f0dd29026f1 ;  [fp +  56]  0x1f0dd29026f1 <undefined>
      2: 0x1f0d5cb04fb1 ;  [fp +  48]  0x1f0d5cb04fb1 <JSArray[0]>
      3: 0x1f0d5cb6f7a9 ;  [fp +  40]  0x1f0d5cb6f7a9 <JSArray[1]>
      4: 0x1f0d5cb6f491 ;  [fp +  32]  0x1f0d5cb6f491 <String[19]: background:#F4F4F4;>
      5: 0x000000000000 ;  [fp +  24]  0
      6: 0x000000000000 ;  [fp +  16]  0
      7: 0x1f0d5cb042e9 ;  [fp -  32]  0x1f0d5cb042e9 <FunctionContext[38]>
      8: 0x000000000000 ; (literal  7) 0
      9: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     10: 0 ; (int) [fp -  56]
     11: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     12: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     13: 0 ; (int) [fp -  64]
     14: 0 ; (int) [fp -  72]
     15: 0 ; (int) [fp -  80]
     16: 0 ; (int) [fp -  88]
     17: 52 ; (int) [fp -  96]
     18: 70 ; (int) [fp - 104]
     19: 0x000000000000 ; (literal  7) 0
     20: 18 ; rbx
     21: 0x000000000000 ; (literal  7) 0
     22: 0x000000000000 ; (literal  7) 0
     23: 0x001200000000 ;  [fp -  40]  18
     24: 0x001300000000 ;  [fp - 152]  19
     25: 18 ; (int) [fp - 160]
     26: 0x1f0dd29029f1 ; (literal  6) 0x1f0dd29029f1 <String[0]: >
     27: 0x1f0d5cb6fab9 ;  [fp - 176]  0x1f0d5cb6fab9 <String[19]: background:#F4F4F4;>
     28: 0x1f0dd29029f1 ;  [fp - 184]  0x1f0dd29029f1 <String[0]: >
     29: 0x1f0dd29029f1 ; (literal  6) 0x1f0dd29029f1 <String[0]: >
     30: 0x1f0d5cb6f7d9 ;  [fp -  24]  0x1f0d5cb6f7d9 <JSFunction M (sfi = 0x1f0daedfc4f1)>
     31: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     32: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     33: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     34: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     35: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     36: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     37: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     38: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     39: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     40: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     41: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     42: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     43: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     44: 0x1f0dd2903211 ; (literal  4) 0x1f0dd2903211 <Odd Oddball: optimized_out>
  translating interpreted frame M => bytecode_offset=1869, height=296
    0x7ffeefbebc80: [top + 384] <- 0x1f0dd29026f1 <undefined> ;  stack parameter (input #1)
    0x7ffeefbebc78: [top + 376] <- 0x1f0d5cb04fb1 <JSArray[0]> ;  stack parameter (input #2)
    0x7ffeefbebc70: [top + 368] <- 0x1f0d5cb6f7a9 <JSArray[1]> ;  stack parameter (input #3)
    0x7ffeefbebc68: [top + 360] <- 0x1f0d5cb6f491 <String[19]: background:#F4F4F4;> ;  stack parameter (input #4)
    0x7ffeefbebc60: [top + 352] <- 0x000000000000 <Smi 0> ;  stack parameter (input #5)
    0x7ffeefbebc58: [top + 344] <- 0x000000000000 <Smi 0> ;  stack parameter (input #6)
    -------------------------
    0x7ffeefbebc50: [top + 336] <- 0x22472a6918d5 ;  caller's pc
    0x7ffeefbebc48: [top + 328] <- 0x7ffeefbebd18 ;  caller's fp
    0x7ffeefbebc40: [top + 320] <- 0x1f0d5cb042e9 <FunctionContext[38]> ;  context
 (input #0)
    0x7ffeefbebc38: [top + 312] <- 0x1f0d5cb6f7d9 <JSFunction M (sfi = 0x1f0daedfc4f1)> ;  function
 (input #0)
    0x7ffeefbebc30: [top + 304] <- 0x1f0daedfdac9 <BytecodeArray[3951]> ;  bytecode array
    0x7ffeefbebc28: [top + 296] <- 0x078600000000 <Smi 1926> ;  bytecode offset
    -------------------------
    0x7ffeefbebc20: [top + 288] <- 0x000000000000 <Smi 0> ;  stack parameter (input #8)
    0x7ffeefbebc18: [top + 280] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #9)
    0x7ffeefbebc10: [top + 272] <- 0x000000000000 <Smi 0> ;  stack parameter (input #10)
    0x7ffeefbebc08: [top + 264] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #11)
    0x7ffeefbebc00: [top + 256] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #12)
    0x7ffeefbebbf8: [top + 248] <- 0x000000000000 <Smi 0> ;  stack parameter (input #13)
    0x7ffeefbebbf0: [top + 240] <- 0x000000000000 <Smi 0> ;  stack parameter (input #14)
    0x7ffeefbebbe8: [top + 232] <- 0x000000000000 <Smi 0> ;  stack parameter (input #15)
    0x7ffeefbebbe0: [top + 224] <- 0x000000000000 <Smi 0> ;  stack parameter (input #16)
    0x7ffeefbebbd8: [top + 216] <- 0x003400000000 <Smi 52> ;  stack parameter (input #17)
    0x7ffeefbebbd0: [top + 208] <- 0x004600000000 <Smi 70> ;  stack parameter (input #18)
    0x7ffeefbebbc8: [top + 200] <- 0x000000000000 <Smi 0> ;  stack parameter (input #19)
    0x7ffeefbebbc0: [top + 192] <- 0x001200000000 <Smi 18> ;  stack parameter (input #20)
    0x7ffeefbebbb8: [top + 184] <- 0x000000000000 <Smi 0> ;  stack parameter (input #21)
    0x7ffeefbebbb0: [top + 176] <- 0x000000000000 <Smi 0> ;  stack parameter (input #22)
    0x7ffeefbebba8: [top + 168] <- 0x001200000000 <Smi 18> ;  stack parameter (input #23)
    0x7ffeefbebba0: [top + 160] <- 0x001300000000 <Smi 19> ;  stack parameter (input #24)
    0x7ffeefbebb98: [top + 152] <- 0x001200000000 <Smi 18> ;  stack parameter (input #25)
    0x7ffeefbebb90: [top + 144] <- 0x1f0dd29029f1 <String[0]: > ;  stack parameter (input #26)
    0x7ffeefbebb88: [top + 136] <- 0x1f0d5cb6fab9 <String[19]: background:#F4F4F4;> ;  stack parameter (input #27)
    0x7ffeefbebb80: [top + 128] <- 0x1f0dd29029f1 <String[0]: > ;  stack parameter (input #28)
    0x7ffeefbebb78: [top + 120] <- 0x1f0dd29029f1 <String[0]: > ;  stack parameter (input #29)
    0x7ffeefbebb70: [top + 112] <- 0x1f0d5cb6f7d9 <JSFunction M (sfi = 0x1f0daedfc4f1)> ;  stack parameter (input #30)
    0x7ffeefbebb68: [top + 104] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #31)
    0x7ffeefbebb60: [top +  96] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #32)
    0x7ffeefbebb58: [top +  88] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #33)
    0x7ffeefbebb50: [top +  80] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #34)
    0x7ffeefbebb48: [top +  72] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #35)
    0x7ffeefbebb40: [top +  64] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #36)
    0x7ffeefbebb38: [top +  56] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #37)
    0x7ffeefbebb30: [top +  48] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #38)
    0x7ffeefbebb28: [top +  40] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #39)
    0x7ffeefbebb20: [top +  32] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #40)
    0x7ffeefbebb18: [top +  24] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #41)
    0x7ffeefbebb10: [top +  16] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #42)
    0x7ffeefbebb08: [top +   8] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #43)
    0x7ffeefbebb00: [top +   0] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  accumulator (input #0)
[deoptimizing (eager): end 0x1f0d5cb6f7d9 <JSFunction M (sfi = 0x1f0daedfc4f1)> @86 => node=1869, pc=0x22472a691ec0, caller sp=0x7ffeefbebc88, took 2.260 ms]

[deoptimizing (DEOPT eager): begin 0x1f0d97d375b9 <JSFunction M (sfi = 0x1f0daedfc4f1)> (opt #135) @95, FP to SP delta: 240, caller sp: 0x7ffeefbebc88]
            ;;; deoptimize at </node_modules/@emotion/stylis/dist/stylis.cjs.prod.js:295:58>, out of bounds
  reading FeedbackVector (slot 181)
  reading input frame M => bytecode_offset=1432, args=6, height=37; inputs:
      0: 0x1f0d97d375b9 ;  [fp -  24]  0x1f0d97d375b9 <JSFunction M (sfi = 0x1f0daedfc4f1)>
      1: 0x1f0dd29026f1 ;  [fp +  56]  0x1f0dd29026f1 <undefined>
      2: 0x1f0d75813c81 ;  [fp +  48]  0x1f0d75813c81 <JSArray[0]>
      3: 0x1f0d97d37589 ;  [fp +  40]  0x1f0d97d37589 <JSArray[1]>
      4: 0x1f0d97d372c9 ;  [fp +  32]  0x1f0d97d372c9 <String[30]: margin:8px 0;a{color:#FFFFFF;}>
      5: 0x000000000000 ;  [fp +  24]  0
      6: 0x000000000000 ;  [fp +  16]  0
      7: 0x1f0d75812fb9 ;  [fp -  32]  0x1f0d75812fb9 <FunctionContext[38]>
      8: 0x000000000000 ; (literal  4) 0
      9: 0x1f0dd2903211 ; (literal  5) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     10: 0x000000000000 ; (literal  4) 0
     11: 0x1f0dd2903211 ; (literal  5) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     12: 0x1f0dd2903211 ; (literal  5) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     13: 0 ; (int) [fp -  64]
     14: 0 ; (int) [fp -  72]
     15: 0 ; (int) [fp -  80]
     16: 0x000000000000 ;  [fp -  88]  0
     17: 0x006100000000 ;  [fp -  96]  97
     18: 0x003000000000 ;  [fp - 104]  48
     19: 0x000000000000 ; (literal  4) 0
     20: 0x1f0dd2903211 ; (literal  5) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     21: 0x000000000000 ; (literal  4) 0
     22: 0x000000000000 ; (literal  4) 0
     23: 15 ; (int) [fp -  56]
     24: 0x001e00000000 ;  [fp - 152]  30
     25: 29 ; (int) [fp - 160]
     26: 0x1f0dd29029f1 ; (literal  6) 0x1f0dd29029f1 <String[0]: >
     27: 0x1f0d97d37779 ;  [fp - 176]  0x1f0d97d37779 <String[13]: margin:8px 0;>
     28: 0x1f0d97d37b71 ;  [fp -  40]  0x1f0d97d37b71 <String[30]: .ljvPPQ a{color:#FFFFFF;/*|*/}>
     29: 0x1f0dd29029f1 ; (literal  6) 0x1f0dd29029f1 <String[0]: >
     30: 0x1f0d97d375b9 ;  [fp -  24]  0x1f0d97d375b9 <JSFunction M (sfi = 0x1f0daedfc4f1)>
     31: 0x1f0dd2903211 ; (literal  5) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     32: 0x1f0d06e90229 ; rax 0x1f0d06e90229 <JSFunction charCodeAt (sfi = 0x1f0d548919b1)>
     33: 0x1f0dd2903211 ; (literal  5) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     34: 0x1f0dd2903211 ; (literal  5) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     35: 0x1f0dd2903211 ; (literal  5) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     36: 0x1f0dd2903211 ; (literal  5) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     37: 0x1f0dd2903211 ; (literal  5) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     38: 0x1f0dd2903211 ; (literal  5) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     39: 0x1f0dd2903211 ; (literal  5) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     40: 0x1f0dd2903211 ; (literal  5) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     41: 0x1f0dd2903211 ; (literal  5) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     42: 0x1f0dd2903211 ; (literal  5) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     43: 0x1f0dd2903211 ; (literal  5) 0x1f0dd2903211 <Odd Oddball: optimized_out>
     44: 29 ; (int) [fp -  48]
  translating interpreted frame M => bytecode_offset=1432, height=296
    0x7ffeefbebc80: [top + 384] <- 0x1f0dd29026f1 <undefined> ;  stack parameter (input #1)
    0x7ffeefbebc78: [top + 376] <- 0x1f0d75813c81 <JSArray[0]> ;  stack parameter (input #2)
    0x7ffeefbebc70: [top + 368] <- 0x1f0d97d37589 <JSArray[1]> ;  stack parameter (input #3)
    0x7ffeefbebc68: [top + 360] <- 0x1f0d97d372c9 <String[30]: margin:8px 0;a{color:#FFFFFF;}> ;  stack parameter (input #4)
    0x7ffeefbebc60: [top + 352] <- 0x000000000000 <Smi 0> ;  stack parameter (input #5)
    0x7ffeefbebc58: [top + 344] <- 0x000000000000 <Smi 0> ;  stack parameter (input #6)
    -------------------------
    0x7ffeefbebc50: [top + 336] <- 0x22472a6918d5 ;  caller's pc
    0x7ffeefbebc48: [top + 328] <- 0x7ffeefbebd18 ;  caller's fp
    0x7ffeefbebc40: [top + 320] <- 0x1f0d75812fb9 <FunctionContext[38]> ;  context
 (input #0)
    0x7ffeefbebc38: [top + 312] <- 0x1f0d97d375b9 <JSFunction M (sfi = 0x1f0daedfc4f1)> ;  function
 (input #0)
    0x7ffeefbebc30: [top + 304] <- 0x1f0daedfdac9 <BytecodeArray[3951]> ;  bytecode array
    0x7ffeefbebc28: [top + 296] <- 0x05d100000000 <Smi 1489> ;  bytecode offset
    -------------------------
    0x7ffeefbebc20: [top + 288] <- 0x000000000000 <Smi 0> ;  stack parameter (input #8)
    0x7ffeefbebc18: [top + 280] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #9)
    0x7ffeefbebc10: [top + 272] <- 0x000000000000 <Smi 0> ;  stack parameter (input #10)
    0x7ffeefbebc08: [top + 264] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #11)
    0x7ffeefbebc00: [top + 256] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #12)
    0x7ffeefbebbf8: [top + 248] <- 0x000000000000 <Smi 0> ;  stack parameter (input #13)
    0x7ffeefbebbf0: [top + 240] <- 0x000000000000 <Smi 0> ;  stack parameter (input #14)
    0x7ffeefbebbe8: [top + 232] <- 0x000000000000 <Smi 0> ;  stack parameter (input #15)
    0x7ffeefbebbe0: [top + 224] <- 0x000000000000 <Smi 0> ;  stack parameter (input #16)
    0x7ffeefbebbd8: [top + 216] <- 0x006100000000 <Smi 97> ;  stack parameter (input #17)
    0x7ffeefbebbd0: [top + 208] <- 0x003000000000 <Smi 48> ;  stack parameter (input #18)
    0x7ffeefbebbc8: [top + 200] <- 0x000000000000 <Smi 0> ;  stack parameter (input #19)
    0x7ffeefbebbc0: [top + 192] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #20)
    0x7ffeefbebbb8: [top + 184] <- 0x000000000000 <Smi 0> ;  stack parameter (input #21)
    0x7ffeefbebbb0: [top + 176] <- 0x000000000000 <Smi 0> ;  stack parameter (input #22)
    0x7ffeefbebba8: [top + 168] <- 0x000f00000000 <Smi 15> ;  stack parameter (input #23)
    0x7ffeefbebba0: [top + 160] <- 0x001e00000000 <Smi 30> ;  stack parameter (input #24)
    0x7ffeefbebb98: [top + 152] <- 0x001d00000000 <Smi 29> ;  stack parameter (input #25)
    0x7ffeefbebb90: [top + 144] <- 0x1f0dd29029f1 <String[0]: > ;  stack parameter (input #26)
    0x7ffeefbebb88: [top + 136] <- 0x1f0d97d37779 <String[13]: margin:8px 0;> ;  stack parameter (input #27)
    0x7ffeefbebb80: [top + 128] <- 0x1f0d97d37b71 <String[30]: .ljvPPQ a{color:#FFFFFF;/*|*/}> ;  stack parameter (input #28)
    0x7ffeefbebb78: [top + 120] <- 0x1f0dd29029f1 <String[0]: > ;  stack parameter (input #29)
    0x7ffeefbebb70: [top + 112] <- 0x1f0d97d375b9 <JSFunction M (sfi = 0x1f0daedfc4f1)> ;  stack parameter (input #30)
    0x7ffeefbebb68: [top + 104] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #31)
    0x7ffeefbebb60: [top +  96] <- 0x1f0d06e90229 <JSFunction charCodeAt (sfi = 0x1f0d548919b1)> ;  stack parameter (input #32)
    0x7ffeefbebb58: [top +  88] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #33)
    0x7ffeefbebb50: [top +  80] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #34)
    0x7ffeefbebb48: [top +  72] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #35)
    0x7ffeefbebb40: [top +  64] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #36)
    0x7ffeefbebb38: [top +  56] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #37)
    0x7ffeefbebb30: [top +  48] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #38)
    0x7ffeefbebb28: [top +  40] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #39)
    0x7ffeefbebb20: [top +  32] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #40)
    0x7ffeefbebb18: [top +  24] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #41)
    0x7ffeefbebb10: [top +  16] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #42)
    0x7ffeefbebb08: [top +   8] <- 0x1f0dd2903211 <Odd Oddball: optimized_out> ;  stack parameter (input #43)
    0x7ffeefbebb00: [top +   0] <- 0x001d00000000 <Smi 29> ;  accumulator (input #0)
[deoptimizing (eager): end 0x1f0d97d375b9 <JSFunction M (sfi = 0x1f0daedfc4f1)> @95 => node=1432, pc=0x22472a691ec0, caller sp=0x7ffeefbebc88, took 15.704 ms]
Feedback updated from deoptimization at </node_modules/@emotion/stylis/dist/stylis.cjs.prod.js:295:58>, out of bounds
[evicting optimizing code marked for deoptimization (unlinking code marked for deopt) for 0x1f0daedfc4f1 <SharedFunctionInfo M>]

[kitten]

It's very interesting that this deopt list includes DefaultGroupedTag#insertRules and that's probably a good place to start looking. However I have a small change that I'm making to it queued up, so we may want to rerun tests after merging that: https://github.com/styled-components/styled-components/pull/2996

[kitten]

@tonycassara Would you be interested in testing this new prerelease as well please? https://github.com/styled-components/styled-components/pull/2996#issuecomment-580361308 It may actually change a couple of things (at least hopefully)

[tonycassara]

@kitten I would love to! Is that just npm i styled-components@test or npm i [email protected]??

[probablyup]

They should be equivalent, but the latter just to be more specific!

On Thu, Jan 30, 2020 at 1:57 PM Tony Cassara [e-mail]
wrote:

@kitten https://github.com/kitten I would love to! Is that just npm i
styled-components@test or npm i [email protected]??

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/styled-components/styled-components/issues/2979?email_source=notifications&email_token=AAELFVXNEGYP5IQA66I3UV3RAMPI5A5CNFSM4KJZAH32YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKMDVKA#issuecomment-580401832,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAELFVVUDGMWEJ26DNCMHVLRAMPI5ANCNFSM4KJZAH3Q
.

[tonycassara]

@probablyup @kitten ohhhhhh yesssssssssss

ServerStyleSheet: 0.173ms
getStyleTags: 1.057ms
ServerStyleSheet: 0.024ms
getStyleTags: 1.021ms
ServerStyleSheet: 0.025ms
getStyleTags: 0.780ms
ServerStyleSheet: 0.025ms
getStyleTags: 1.400ms
ServerStyleSheet: 0.030ms
getStyleTags: 0.286ms

it seems that _definitely_ fixed the issue

[tonycassara]

Wow this is incredible! Could you please help me understand your changes?

It seems you increased the buffer size for the typed array and then increase the size if the total number of tags is greater than that default size? How would that affect performance so much? Because it has to go through potentially another 256 tags before hitting the new size?

Thank you again for finding a solution, really excited to be able to implement this once its released!

[kitten]

@tonycassara If you read the code that grows the groupSizes buffers as needed, it’s hard to spot a small mistake in the formula that calculates the next size, but it is there.

What tipped me off to this mistake was another issue. There the author has a leak and is likely creating new components dynamically. The odd thing was that he got a RangeError from the buffer resizing code around 5,888 groups already.

Turns out my formula to grow the buffers didn’t make much sense when I took another look at them 😅 So buffers that we’re way too large were being allocated when a certain threshold was crossed.

[tonycassara]

Thank you I think I follow now! Did some reading on TypedArrays and bitwise last night.

[tonycassara]

Hey @kitten @probablyup wanted to say thank you again, I've updated to 5.0.1 and we saw a 100ms decrease in time to content loaded and time to interactive on our heavier pages. Incredible!