用javascript写了个俄罗斯方块，速度为啥这么慢呢？

Question

代码在这里：
http://blog.csdn.net/iwantnon/archive/2009/07/23/4374139.aspx
是由于用table来绘图吗？
还是键盘事件处理的不对？
还是其它什么原因？
怎么改进能让速度达到可以接受？
刚接触javascript，对它的特性不是很了解，高手指教。

Answer 1

这个就是关键的问题
document.body.innerHTML += ...每次都拼接html字符串，浏览器每次都要解析大量的html文本，当然会慢应该直接控制Element，你先参考一下快的吧http://topic.csdn.net/u/20090622/09/4bd25aff-91af-4e1b-9d96-625fed3c1898.html

Answer 2

怎么都用JS做这个呢我看到好几个了
http://www.cuixiping.com/jsgame/tetris-cxp/

Answer 3

也可以参考我的：http://blog.csdn.net/sunxing007/archive/2008/11/19/3331396.aspx
我的是操作表格的单元格的颜色。

Answer 4

但是，如果不用document.body.innerHTML="";
的话，如何实现清屏呢？

Answer 5

是的，俄罗斯方块的实现方法很多，
1），每次都全部清屏再重画。
2），每次用背景色擦除方块，然后再在下一个位置重画这个方块。
3），通过移动构成方块的那些talbe来实现动画。
4），删除构成当前方块的那些table然后再从下一个位置重新定义新的table。
5），如5楼所说的，先把table都铺好，然后操作table的颜色。
其中2,3,4方法都利用了table是对象这个特性。
但是用table的初衷只是为了实现绘制矩形，其实本意并不是希望利用它的对象特性。而且，一旦找到了不利用table而直接画图的方法，是必定会马上将其中的drawbrick()函数重构的。所以我不希望使自已的程序依赖于table的对象特性。
另外，由于方法2对背景有限制（背景必须是单色的），所以也不好。
所以我希望用第1种方法来写，各位帮忙看一下如果用第1种方法来写的话，怎么样提高速度？
zswang说症结在于document.body.innerHTML语句，那么如果不用这种语句，如何实现清屏和显示等功能呢？
帮忙呀~

Answer 6

太多的字符串拼接的话，改成数组join的形式速度要快很多。

Answer 7

可以考虑用DOM里的文档碎片，应该比直接innerHTML+要快。好像记得后者每变化一次，页面就得刷新一次，而前者是先把节点写到文档碎片里，然后一次性写入，这样浏览器只需要渲染一次。

Answer 8

为什么不尝试替换class？速度又快，编写也方便。

Answer 9

我写的js漂亮俄罗斯方块：
发布在csdn论坛的：
http://topic.csdn.net/u/20090722/02/69c1ffb6-670f-4ad3-a8f6-baf494979914.html
发布在我博客的：
http://blog.csdn.net/cuixiping/archive/2009/07/22/4369090.aspx差不多是目前js版俄罗斯方块当中最快的，如果去掉背景图和半透明效果，会更快。我没有用表格，全部用的DIV+CSS，切换不同的className就可以改变方块的颜色和位置，消除行就是把一部分方块div用removeChild删掉，新落下方块就是appendChild。兼容IE/Firefox/Opera等多种浏览器。