SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Improving JS / JQuery performance and getting rid of bas practices

    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    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.

    HTML Code:
    <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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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.
    Wow, I didn't realise that. Thank you. Now, I will save an HTTP Header Request and the page will load faster!

    Quote Originally Posted by paul_wilkins View Post
    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.
    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.

    Quote Originally Posted by paul_wilkins View Post
    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.
    Yes, I am too. I am working on optimising that.

    Quote Originally Posted by paul_wilkins View Post
    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.
    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!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •