Browser locks while loading Lodash docs

[calvinf]

When I load the Lodash docs, my browser freezes for several seconds.

Repro steps:

• Navigate to docs from Lodash homepage (click Documentation link)
• Browser (Firefox 48.0.1) freezes for a few seconds
• Switch versions (to 3.10.1 or 2.4.2)
• Browser freezes for a few seconds

Something about how the docs are being loaded is slowing things down. I haven't had time to dig in and find out why.

[jdalton]

It looks CSS related but not sure what's causing it (there's plenty of places for it to buckle down on).

[calvinf]

In glancing through the JS, it may be related to initializing React state
by parsing the DOM. The selectors could be more efficient, and some
debouncing may avoid it locking up. Not sure if that's root cause but
something to check.
On Thu, Sep 1, 2016 at 6:09 PM John-David Dalton notifications@github.com
wrote:

It looks CSS related but not sure what's causing it (there's plenty of
places for it to buckle down on).

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#45 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AACdNX-CnTerfVUC2vy7m01bqgIWoVkWks5ql3dIgaJpZM4JzOtZ
.

[jdalton]

If I remove all JS on the page it still locks up. If I remove the CSS the page loads w/o locking up.

[jdalton]

If you come up with anything let me know.
For now it's just one of those things I hope gets better with time.

[ivan-kolmychek]

Just stumbled upon the same issue, disabling the CSS helps.

From quick "performance" run that I was able to do in Firefox, it spends a lot of time in styles.

[ivan-kolmychek]

Here is a screenshot of profile with just single page reload.

I had lodash docs page already opened with CSS enabled, I've started the performance recording and just reloaded the page.

[jdalton]

\cc @bzbarsky

[zackhall]

My initial thought was similar to @calvinf's: maybe initializing the react state by reading, parsing the DOM was locking it up and retriggering layouts.

However, it's heavy layout cycles of 40-80ms causing this that are triggered before the initial render from docs.js.

In screenshot below, initial evaluation of the javascript is the blue bar, and sub-details, on the right. The layouts are the purple blocks.

[bzbarsky]

Filed https://bugzilla.mozilla.org/show_bug.cgi?id=1300939

[bzbarsky]

And in particular, it's something about the combination of flex from main.css and something the fontawesome stylesheet is doing that causes the slowdown in Firefox. Not clear what yet.

[jdalton]

@bzbarsky Thank you so much for digging into this!

[bzbarsky]

@jdalton Thanks for letting me know about it!

[linonetwo]

It's getting slow again! In chrome.

[jdalton]

Nothing has changed on our end. If you think it's a Chrome regression you're better off filing the bug with Chrome since I'm not going to do any work on this.

[bbottema]

@jdalton, It's become completely unusable for me. Locks up for a minute.

[jdalton]

I've got nothing actionable here, sorry. The source hasn't changed so unless you investigate and create a PR the situation will likely not improve for you.

I'm locking the thread since "met too" comments without a patch or further info don't really help. I've visited the docs in Chrome plenty of times and have never had a problem. I checked with Firefox 60.0.2 and it loads quick too.