Check out the changes https://github.com/pearlbea/bloaty-mcbloatface/pull/2
- Clear part 1 changes with
git checkout master
- Launch prod
yarn run prod
- Go to a
/stories/:id page with a lot of comments
- Open Dev Tools to the Performance tab
- Select "screenshots"
- Select "4x slowdown" under CPU
- Click the "start profiling and reload page" icon in the upper left
- How much of that time is spent rendering? How much time scripting?
Trade-offs: Nested HTML vs Bad JS
- Uncomment the body of the init method in
- (Don't forget to restart
yarn run prod)
- Look at the story page to see the changes
- Click the "start profiling and reload" icon again
- How do these changes affect the times?
Set CPU back to "no throttling" before moving on to the next exercise.