preactjs / preactjs/preact

Main thread is locked up during bootup

Open
#407 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

discussion performance
Dominant language
JavaScript
Stars
38.9k
Forks
2.3k
Avg merge
20h 18m
Merged PRs (30d)
35

Description

Heya!

So I've got a sample app which sort of resembles a news article with user comments. When I have -- say -- 500 comments (<Comment/>), each with up-vote and down-vote buttons (<VoteButtons/>) I see the boot up on a Nexus 5X take somewhere in the region of 500ms:

screen shot 2016-11-17 at 12 17 23 pm

What I'd like to do instead is make use of requestIdleCallback to spread the load out a bit. I'm fine with the SSR code making the buttons and so on inert (as in, I can handle that separately) but I'm mostly concerned that there doesn't seem to be any way to spread out the initial diff and so on into smaller chunks. On an older phone that's likely to be a few seconds of main thread lock-out where someone wouldn't be able to scroll or interact in any way.

I had a quick look over the source, and I see there's an ASYNC_RENDER flag (which looks stellar because I can hook in rIC there via options.debounceRendering), but it seems like that only applies for updates rather than the initial create-this-from-the-DOM boot that I get with SSR.... well, I imagine it applies to all initial renders it's just that the diff'ing done from the SSR'd version looks to be causing some slowdown.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing the initial SSR boot and DOM diff path, then compare it with the ASYNC_RENDER and options.debounceRendering paths mentioned in the issue. Determine whether initial hydration can be split into smaller scheduled units, and verify the result with the 500-comment sample while preserving the existing SSR behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, performance
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.