1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Slow loading Jquery scripts

Discussion in 'Programming' started by Vadadosa, Jan 29, 2016.

  1. #1
    This is a programming question and experienced script programmers can answer this. Html page has script tags linked to 'jquery.min.js' and 'jquery-ui.js' and custom script. Custom script begins with '$(document).ready(function() {' block that attaches events to the html form elements.
    SEMrush
    During page load performance test of the website www.ashiro.ca, page took approximately 1.5 sec. 70% of time is consumed on running both jQuery scripts. There are maximum 10 form elements on a html page and the code in '$(document).ready(function(){' block attaches events to these form elements.

    Both JQuery scripts are minified. I am looking for techniques to reduce the jQuery scripts run time.
     
    Last edited: Jan 29, 2016
    Vadadosa, Jan 29, 2016 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,539
    Likes Received:
    1,934
    Best Answers:
    247
    Trophy Points:
    515
    #2
    jQuery is a fat bloated mess, and the methodology it uses for doing things is broken, slow, and generally speaking reeks of the people who use it -- much less those who created it -- not knowing enough about HTML, CSS, or JavaScript to be writing even a single line of code. Only people who don't know enough about HTML, CSS or JavaScript to even be making websites in the first place could be IGNORANT ENOUGH to try and deploy the idiotic mouth-breathing dumbass disaster known as jQuery.

    Frameworks in general are a train wreck of developer ineptitude which is why I do NOT advocate their use; hence my article on the subject:
    http://www.cutcodedown.com/article/HTML_CSS_and_JS_frameworks

    As I said in your "what's wrong with this website" thread, you've got a LOT of broken methodology that layered atop each-other just makes it worse. Extra DOM elements for example like your "tables for layout" can actually make the jquery slower. It uses querySelector or it's own internal equivalent for EVERY operation, and this can be painfully slow... on top of the already painfully bloated code the parser has to sit through on every page load.

    Simply put, the more tags you use on the page, particularly unneccessary tags like tables for layout -- the more work the browser has to do every time JavaScript features like Element.getElementById, Element.getElementsByTagName or Element.querySelector are called. You figure in that jQuery is a bloated abstraction and polyfill for the last of those EVERY blasted time you try to do ANYTHING -- it's hardly a shock that pages people sleaze together any-old-way in complete ignorance of how to use ANY of the web technologies properly are slow to load, spin up laptop fans on page-load, and drain mobile batteries dry prematurely.

    Then site owners wonder why people are downloading browser extensions like noScript or just flat out blocking JavaScript on mobile.

    Of course it looks like you've got ASP building things for you there, which likely explains the outdated, outmoded, "HTML, what's that?" codebase.

    Hence why I suggested pitching that mess in the trash and making it work WITHOUT JavaScript FIRST -- then enhancing it with JS as appropriate/desired. The over-reliance on scripting, scripting only elements in the markup, tables for layout, excessively bloated markup, and other woes are major contributors to why despite the visual simplicity of the page, it's a slow, bloated, inaccessible mess; much less a complete laundry list of how NOT to build a website!

    Hell, I wouldn't be surprised if you could make it faster, use less bandwidth, AND load results faster and smoother by getting rid of the scripttardery altogether and going back to good old-fashioned pageloads. You've dived for the scripttardery before you even had basic functionality!
     
    Last edited: Jan 29, 2016
    deathshadow, Jan 29, 2016 IP
  3. ThePHPMaster

    ThePHPMaster Well-Known Member

    Messages:
    737
    Likes Received:
    52
    Best Answers:
    33
    Trophy Points:
    150
    #3
    ThePHPMaster, Jan 30, 2016 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    Just as a starting point:
    Make sure your jquery-ui-file is actually needed, and ONLY contain the elements from jQuery UI that you actually use. Every single functionality that you don't use just bloats the javascript-file, and is not needed for anything. Also, depending on what exactly you use UI for, you might be better off just creating CSS and/or javascript functions for what you need.
     
    PoPSiCLe, Feb 1, 2016 IP