Performance and architecture optimization in an HTML5-based web game

Abstract: Web applications are becoming more and more complex and bigger and bigger. In the case of a web game, it can be as big as a software. As well, as these applications are run indirectly through a web browser they need to be quite well optimized. For these reasons, performance and architecture are becoming a crucial point in web development. This report covers some method to improve the architecture of a javascript application by using design patterns. It will also present some methods to optimize the performance of javascript code and some way to do some of these changes automatically. Applying these changes allows us to increase the framerate of the web game by 50% and to reduce the loading time of the game by more than 72%. The usage of design patterns such as the observer, the composite and the builder pattern permits to improve the maintainability, extendibility and flexibility of the code but also allows to implement new features.