SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question optimize site for best js performance

    Hi guys,

    I am customizing the e-commerce cms Opencart for my site and I have recently tried to do some pretty cool JQuery effects, one in particular Jticker makes it look as though the text is being written by a typewriter.

    However, I am getting poor performance from this effect on Firefox. I want it to type pretty quickly so that the user isn't waiting too long to see the content but firefox is taking ages and I suspect its down to either the performance of my hosting or to javascript. I have set the effect to its maximum speed and Chrome and Opera, Safari, even IE render it out really quickly.

    Could anyone give me tips on optimizing a site for best JS performance.?

    The site does load up a few scripts but not excessive amounts and they are all minified. As you are all aware, firefox is usually one of the best browsers and does not usually have performance issues.

    My hosting is CRAP too which doesn't help. Could I be looking for a js performance issue that really isn't there but is due to the download speed of my hosting?
    "Persistence is the path to perfection"

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    My hosting is CRAP too which doesn't help. Could I be looking for a js performance issue that really isn't there but is due to the download speed of my hosting?
    About the only way to investigate issues such as this is for us to explore the issue from a web page that exhibits the problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    About the only way to investigate issues such as this is for us to explore the issue from a web page that exhibits the problem.
    Here you go, its unfinished from an aesthetic point of view but all of the scripts which need to run are running:


    http://www.wavemobilephones.com/inde...roduct_id=1232

    Some of the js is written by me but lots of it is written by the author of the original template which I am customising so its not all my fault!
    "Persistence is the path to perfection"

  4. #4
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firefox 11.0 in particular is exhibiting this slow performance

    I also noticed that JQuery tools and Jquery are both included and as one contains the other I do not need both but I cannot seem to download the latest JQuery tools because their site is down. Do you know where I can get the latest version from?
    "Persistence is the path to perfection"

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    Firefox 11.0 in particular is exhibiting this slow performance
    Disable or remove other scripts on the page that are unrelated to the jticker. Does the performance then improve?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    Have just done that and it's not improved. Can you see it too? I have 2 laptops with 2 different firefox 11 and it's occuring on both
    "Persistence is the path to perfection"

  7. #7
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firefox 3.6 not great with this either and I also have speed/performance issues with another JQuery plugin, Zoomer gallery. All other browsers execute these effects flawlessly. Even IE7 and 8 keep up ok
    "Persistence is the path to perfection"

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    Have just done that and it's not improved. Can you see it too? I have 2 laptops with 2 different firefox 11 and it's occuring on both
    The purpose of that was to reduce the scripting demands of the page down to only the ticker.

    Does this demo page for the jticker have the same slowdown problem for you?
    http://webdev.stephband.info/jticker/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not at all its rapid. I am very keen to learn this optimizing/fault finding technique and appreciate your help. I have left the page with only JQuery lib and the ticker for now. Currently when I come across such a problem I can get as far as removing different scripts to see which one is causing the problem but after that I don't have the confidence.
    "Persistence is the path to perfection"

  10. #10
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK so the solution to this is that all of my parent elements are floated. There are other documented cases online also with regards to issues with JQuery animations and floated elements. Believe me I have explored every other option, disabled every script on the site, deleted every part of the page except the offending elements and it is not until I changed the positioning on those parent elements, (not just the parent but it's parent too) to absolute or relative that the animation speeds up.

    Then when I replaced all of the original content and enabled all the other scripts it was working fine.

    Very annoying tho as I had worked out a lovely floated positioning for the page and more annoying that all of the other browsers except Firefox are fine. This bug occurs on versions as new as Firefox 11 so anyone else who reads this, just save yourself the headache and develop a workaround using something else other than floats.
    "Persistence is the path to perfection"


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
  •