Oss sahana

---

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.”