How to load web page with javascript quicker?

[aheight]

Hi

I have a web page with a 400-line WebGL 3D-rendering javascript which also loads a 45K data file of vertices and other data. It also has a lot of math code. I notice it takes a while to load on slower machines (about 5-7 seconds) as a message on the lower left of the screen reports the % progression of "loading math". Is there a way to load the page quicker? I suppose if I included the data file (of vertices) in the HTML file, that would help. Is that all I can do to make it load quicker?

Thanks for reading

 

[Borg]

You can set the page to cache the data locally so that it loads faster next time. However, the user can override that in their browser.

 

[Greg Bernhardt]

Besides optimizing your JS code: put the JS file tag at the bottom of the HTML, compress (minify) the JS, file load from a CDN and make sure it is cachable.

 

[aheight]

Besides optimizing your JS code: put the JS file tag at the bottom of the HTML, compress (minify) the JS, file load from a CDN and make sure it is cachable.

Ok. Thanks for that. I'm very new to HTML/Javascript/WebGL so don't quite understand. I can google and research them.

Can I ask though what do you mean "put the JS file tag at the bottom of the HTML" mean? Do you mean the scripts that load the supporting JS files (including the vertex data)? I have four scripts at the top of the HTML file; one to load MathJax, two load some supporting WebGL functions, and the last is the vertex data:

<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
<script type="text/javascript"
src="https://dl.dropboxusercontent.com/s/e38perb64eenm6k/glMatrix.js?dl=0"></script>
<script type="text/javascript"
src="https://dl.dropboxusercontent.com/s/7ypkqxyhok5a6fn/webgl-utils.js?dl=0"></script>
<script type="text/javascript"
src="[PLAIN]https://dl.dropboxusercontent.com/s/7w8epbq582lglms/branch1Data.js?dl=0"></script>

[/PLAIN]

So I assume if I put these at the bottom, the page gets loaded quicker? Does the "async" attribute have any effect on the loading?

 

[Greg Bernhardt]

So I assume if I put these at the bottom, the page gets loaded quicker?

For best practice yes. Your page will load faster, but the JS will render slower. Does that make sense? In the end this will make a small difference. Measurable, but not always perceivable.

 

[aheight]

Ok thanks for that. I have another question if I may ask: the data file "branch1Data.js" is just a large (45k) text file with string data such as:

var branchVertices=[v1,v2,... vn];
var branchNormals=[n1,n2,...nn];
var vertexIndxes=[i1,i2,...in];

but this is all character (ASCII) data which the program has to then convert to floating point numbers. Wouldn't the process be much quicker if I could just convert all of it to binary and load the binary file or is that not doable?

I ask this because for example this one function actually has 3 branches so that's about 150K of string data and other functions would have even more branches.