browser freezes because of (too heavy?) JavaScript, canvas rendering

I have a draft website with canvas perspective grid rendered by Javascript (window.onload event), but while loading the site on any newest browser - browser freezes at least for a few seconds, even user interface not responsive. The script consists of 6 loops, totally over 200 iterations each drawi开发者_开发知识库ng a line. How can I avoid the freezing? Set timeout after each iteration or after each loop? Could it be canvas issue?

www.modwebsolutions.com/test (Will lock browser during rendering)

---

For me it worked quite well.

A thing you could do is, delegating the rendering to a web worker, so your "Main Thread" is free for user interactions

---

Well, yeah, canvas is pretty unoptimized. Your canvas is also quite big ;)

Yes, you can delay further drawing, so the cpu can take care of browser input, thus reducing the freeze ;)

See: http://pastehtml.com/view/1e7dan3.html (it's not drawing everything, but you can get the point ;) )

---

JS runs in the same thread as the browser. So it's probably because the drawing is too cpu intensive. Yes, use timeouts/intervals to let the browser do some other stuff in between drawing.

---

You need to use setTimeout() or setInterval() for drawing slow and to avoid browser freeze :)