Performance Evaluation of JavaScript Rendering Frameworks

Abstract: When developing interactive web applications a number of different technologies and frameworks could be used. This thesis is set to evaluate a number of popular frameworks that are using different native web rendering techniques. More specifically, the goal of this study is to find what JavaScript visualization framework is best suited for developing a visualization module capable of handling up to 1000 continuously moving nodes with retained frame rate. In this case, retained frame rate refers to keeping the average frame rate above 20 FPS. The frameworks investigated in this study are D3.js using SVG and Canvas, and PixiJS using WebGL 2D rendering. The evaluation was conducted by first developing a visualization module containing a force-directed graph. This was done three times over, once with each rendering technique. Next, the average frame rate was measured during the first 10 seconds of loading a fixed size data set. Data sets of increasing volume were then loaded to examine how the different modules handle data sets of various sizes. The results showed that the SVG module was far behind the other two in terms of retained FPS on larger data sets. The Canvas and WebGL modules were closer in the level of performance, where WebGL outperformed the Canvas implementation in the base case. However, when a Gaussian blur filter was activated in both modules, the Canvas module prevailed. This blur filter was a requested feature for the final product, which led to the choice of using D3.js with Canvas rendering for further development.