I've just discovered that if you use CSS Border property on HTML5 Canvas, there will be a very severe performance hit! I realized this strange (or maybe not so strange for someone who knows the implementation details/documentations or related standards) behavior when I wrote the last game, Deterra. At first I have a very slow rendering of the quadtree, at that time I thought my implementation might have been not efficient in some ways. But once I removed the border lines (unintentionally, that time I was just thinking of making the game page looks better), the game suddenly became very smooth and fluid! (thats why I spammed lots of red block afterwards haha)
To confirm my suspicion, I rechecked BOOM, a game I previously written. It was so edgy and blocky like my unshaven face, that I thought ray casting might be too heavy for the machine. But once I removed the border lines, the game is smoother than Korean skin (haha if I offended anyone, I don't intend to and I apologize).
I am not that motivated to find out what are the reasons behind this, and I expect there will be more quirky stuffs lurking out when doing development on top of high level abstraction such as the HTML/CSS/JS development stack.
Take away point: If one day you think that an implementation of some data structure that you think should be efficient has performed badly, and you are pretty sure that you have implemented it pretty damn well, then you might want to check other factors regarding the abstraction layers you are working on to learn whether there are things that can be optimized.
Fun stuff.
No comments:
Post a Comment