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>