Improving JS / JQuery performance and getting rid of bas practices

JavaScript
1

This is a page I made inspired by two demos. It combines a carousel and a pull-to-refresh feature. The reason I need the pull-to-refresh is because the carousel will later have content added to it dynamically that changes on refresh.

I noticed that the carousel is kind of laggy when the slides are dragged, they work with drag and swipe / touch, and I was wondering if someone could help me optimise the javascript and jQuery that I used in this document.

So that the carousel works better or to remove any bad practices and anything that could be hindering performance.

I would greatly appreciate any help in optimising any part or all of this.’

What I have done below is the max of my knowledge and I am asking for those with more knowledge and talent help me learn to better my js / jQuery coding.

Here is the page: http://pastebin.com/ZP4kdmmm

Thanks in Advance!

2

From what I can see at the moment, you are loading hammer twice. Once as a stand-alone version, and again as a jQuery version.
Things are likely to perform a bit better if you remove the stand-alone version of hammer.

Also, some of your files are being requested from domains outside of your control. That can slow down the loading of the page too, such as with the bootstrap file.

With the request animation polyfill, I am left with several questions - but don’t worry. I then realised that it’s been obtained from a separate external source.

Also, I would move the different parts of your scripts out to separate non-minified files, which makes development easier to achieve.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/jquery.hammer.js"></script>
<script src="js/carousel.js"></script>
<script src="js/animationFramePolyfill.js"></script>
<script src="js/pullToRefresh.js"></script>

Then - when you’re ready to move from development to production, you can combine them all in to one minified script.

I’m running your scripts through jslint - and am finding some interesting issues there. I also notice that there are some conventions from other programming languages (such as underscore prefixing to designate private variables) , which aren’t necessarily as effective as when using other techniques.

It has also helped to highlight too that you have several global variables that the pullToRefresh script relies on, which really should be resolved in some way before further optimisations are looked in to.

3

Wow, I didn’t realise that. Thank you. Now, I will save an HTTP Header Request and the page will load faster! :slight_smile:

Ah, I was only using part of the CSS from bootstap, I’ll try to copy that CSS over into this document. I didn’t know that requesting files from other domains can slow down the loading of a page, thank you for teaching me that. I thought a file request was a file request and the only thing that made it slower was the size.

Yes, I am too. :lol: I am working on optimising that.

Yes, I have been learning other, non-web, programming languages recently and some conventions from those languages may have translated into my web programming.
I’ll pass it through jslint and change those. Apologies.

Thank you very much for your help!