Oss sahana

SAHANA EDEN PROJECT: INVESTIGATE USING LABJS TO SPEED UP JAVASCRIPT LOADS

You can find more information about this project here: "Sahana Eden ticket"

Introduction

We are investigating the performance of different script loaders to help the Sahana Eden group achieve some enhancements on their website, for instance to make it either faster or use less bandwidth. Under the current course project for csc517, we will investigate the possibility of loading large page dependencies with different script loaders and see if there is any improvement in the loading time. Yepnope is currently used in the sahana eden project, and there are some alternatives that are available and will be tested under this project.

Script Loader Instances

The current instances of script loaders are found in “to be implemented” code blocks, visible within eden/views/pr/index.html and eden/views/dvi/index.html

Conditions

• Checks if the user is client is operating in s3.debug and if so link:
  • jqplot.css
  • query.jqplot.js
  • jqplot_plugins/jqplot.pieRenderer.js
  • excanvas.js if the browser is IE
• Otherwise
  • jqplot.min.css
  • query.min.jqplot.js
  • jqplot_plugins/jqplot.pieRenderer.min.js
  • excanvas.min.js if the browser is IE

Essentially this conditional formatting allows the production code to utilize scripts and style sheets on their minimized versions. Not only does this remove bloat from page loads, inherently the speed of page loads is quicker with smaller files to reference. Using a script loader with this conditional ability as well as asynchronous loading will greatly reduce the time in a page load.

The section indicated to include a script loader has the following implementation:

<script language="javascript" type="text/javascript" src="/{{=appname}}/static/scripts/jquery.jqplot.js">
</script>

<script language="javascript" type="text/javascript" src="/{{=appname}}/static/scripts/jqplot_plugins/jqplot.pieRenderer.js">
</script>

Without a script loader, the average loading time is 159.18 milliseconds.

Script Loading Comparison

To use the each library, we have downloaded the respective javascript file and put it in the eden/static/script folder. After that, we replaced the script loading code in the pr/index.html file replacement code found in each section below, and measured the page loading time for our testing.

HeadJS:

Pros: Can label the script and run code once certain ones have been loaded and includes CSS polyfills for older browsers

Cons: Scope issues

Implementation Code:

<script src="/{{=appname}}/static/scripts/head.js"></script>
<script>
     head.load("/{{=appname}}/static/scripts/jquery.jqplot.js",
     "/{{=appname}}/static/scripts/jqplot_plugins/jqplot.pieRenderer.js");
</script>

The average loading time with HeadJs library is 392.18 ms.

The loading time is actually worse than when HeadJs was not being used. The reason for that might be that it would take some time to load the script loader files when we are using the Headjs library.

LabJS:

Pros: load scripts quickly and efficiently

Cons: no new development

Implementation Code:

<script>
$LAB
.script("/{{=appname}}/static/scripts/jquery.jqplot.js")
.scirpt("/{{=appname}}/static/scripts/jqplot_plugins/jqplot.pieRender.js")
{
  initMyPage()
};
</script>

The average loading time with LABjs library is 383.24 milliseconds.

The loading time is actually worse than when the LABjs was not being used. The reason for that might be that it would take some time to load the script loader files when we are using the LABjs library. Similar result has been observed for Headjs.

RequireJS:

Pros: handles dependencies well, more complex setup (include the RequireJS source, but also set the data-main attribute on the <script> tag which tells RequireJS the path to your main JavaScript file.)

Cons: scope issues

RequireJS is a module and file loader. It is used to separate code into modules which handle different tasks. With requireJS we don't need to load all the script files needed for the website to load at the start rather we can load them as and when required which speeds up the loading of the web page. And, also helps in improving the quality of the code.

In our implementation we tried using requireJS on the “views/pr/index.html” page. We removed all the script files from the page and used requireJS implementation to load those scripts but it didn't work the way we wanted to. Instead of loading the scripts it threw an error “Mismatched anonymous define() module.”

Expounding Remarks

From our research into the various script loaders available, as well as developer insight from performance metrics we decided to to test HeadJS, RequireJS, and LabJS for compatibility with the Eden codebase. We ran multiple instances of eden on our local machines that will emulate a normal user browsing session. Then we gathered performance measurements from that system as in page load time, and collected any session errors in a detailed report. RequireJS was proven incompatible with the eden’s resources. According to the documentation provided on the requireJS website, the error that we receive is thrown when we implement script loading with requireJS and at the same time manually load some other JS file having a define() method. This means that we will have to remove each occurrence of script tags from each HTML file and then load them using requireJS. Since every script doesn’t need to loaded in this manner, this procedure will be too intensive for the minimal usage.

Our results from the two compatible libraries show that average loading time with HeadJs library is 392.18 ms and the average loading time with LABjs library is 383.24 ms. Both of these script loaders performed significantly slower than the synchronous loading, which reported at 159.18 milliseconds. Since our results show that loading the script loaders have added tremendous bloat to the page, we believe that utilizing a script loader on a page that includes few libraries, ultimately yields an unwanted and unnecessary load time.