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.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.
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_frameworksAs 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!
Here are a couple tricks I have used in the past:
- Minimize/Concat all of your JS files (both in your case) to 1 file.
- Use CDN to store and serve your js/css files.
Besides that there are some coding preferences to make things faster (assuming you are actually using jQuery):
http://code.tutsplus.com/tutorials/10-ways-to-instantly-increase-your-jquery-performance–net-5551
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.
No comments:
Post a Comment