Search code examples
javascriptgoogle-chromecanvasweb-worker

JavaScript freezing/crashing in Chrome

This is the fiddle: http://jsfiddle.net/36mdt/

After about 10-20 seconds, the display starts to freeze randomly and shortly after crashes. I cannot reproduce this in Firefox.

Profiling reveals nothing unusual.

http://jsfiddle.net/3pbdQ/ shows there is definitely a memory leak. Even a 1 FPS, the memory usage climes 5 megabytes a frame.

On a side note, this example really shows how Math.random() is really not so random.

Solution

  • I've done only 2 performance improvements and it doesn't crash after 5 mins (also seems to be not leaking memory). Checkout http://jsfiddle.net/3pbdQ/3/

    1. Don't calculate the size inside each iteration
    2. Use timeouts instead of freezing interval.
    3. Use bitwise operator for flooring a number

    Profiling reveals nothing unusual.

    Chrome Profiler doesn't work with WebWorkers, AFAIK. As per conversation with Paul Irish:

    "Check about:inspect for shared workers, also you can do console.profile() within the worker code (I THINK) and capture those bits. The "cleans up" is the garbage collector: if after the cleanup there is still a growing line of excess memory, then thats a leak."

    And

    On a side note, this example really shows how Math.random() is really not so random.

    It is well known there are no perfect random algorithms, but anyway the bunch of grouped colors you see is because you're not setting canvas.height and canvas.width, and it differs from CSS values.

    EDIT: Still leaking memory, I don't know why, about after 10 secs it 'cleans up'. Exceeds my knowledge, but works smoothly at 60 FPS (var TIME = 16)