search

nchnsn / othello

0 stars 1 forks source link

Crashes in Chrome #9

Open jfsiii opened 7 years ago

jfsiii commented 7 years ago

The page crashes after only a few moves in Chrome stable (58.0.3029.110) on Mac.

See attached gif for example othello crash

nchnsn commented 7 years ago

Yikes! Taking a look at what's going on.

jfsiii commented 7 years ago

I recorded a timeline while using it. Take a look I did the same counter-clockwise pattern for 8 clicks, then clicked "reset game" when it got slow.

The timeline records all the functions which are called while it's recording. I zoomed into one "round" of clicks. Then clicked the "Bottom Up" tab at the bottom of the page. This lists the functions which take the most amount of time.

screen shot 2017-06-14 at 5 18 00 pm

log and renderView take the most amount of time.

Looking back at the timeline view I noticed something else. renderView seemed to take longer each time:

screen shot 2017-06-14 at 5 16 26 pm screen shot 2017-06-14 at 5 16 34 pm screen shot 2017-06-14 at 5 16 41 pm

Looking a little deeper, it looked like renderViews time was really spent in log screen shot 2017-06-14 at 5 16 54 pm screen shot 2017-06-14 at 5 17 00 pm screen shot 2017-06-14 at 5 17 05 pm

So log dominates your time and gets twice as slow each time it's called. That's a red flag. That's where I'd start.

nchnsn commented 7 years ago

Nice, thanks for grabbing that. I'll dig into those. Also good to learn how the Chrome dev tools work for debugging memory. This will be a good chance to dig into those. Thanks John!

jfsiii commented 7 years ago

You can also:

  1. download the timeline to your computer
  2. Go to the Performance Pane in Chrome's Developer Tools
  3. Load it screen shot 2017-06-15 at 3 52 03 pm

I think the experience is better locally. You can also click the "Screenshots" box and you'll see the state of the UI every few ms screen shot 2017-06-15 at 3 54 53 pm