google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank
Guest, register






10 jQuery and JavaScript Tips and Tricks to Improve Your Code Optimizing the application's source code is a pretty important job to big applications. With the JavaScript programming language, then this issue becomes more important; by JavaScript applications and web applications, especially Web 2.0 applications are always limited by the performance, ability of processors and browsers.

With optimized JavaScript codes, your JavaScript applications, web applications make the browsers take less than resources to process, make the speed of response to user's action faster. But this JavaScript article tutorial comes around the JavaScript tips and tricks for jQuery's codes.


Label: 10, Tips, Tricks, Improve, JavaScript application, JavaScript source code, Web 2.0, performance, processor, resource

Free iPage Web Hosting for First Year NOW



If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage.
Try iPage for FREE First Year NOW

#6 – Use ID as Selector whenever possible

Selecting DOM elements using the class attribute is simpler than ever using jQuery. Even though it is simple it should be avoided whenever possible as as selecting using ID is much faster (In IE the class selector seams to loop through the entire DOM why generally it should be avoided). Selecting elements using IDs is fast because the browsers have the native getElementByID method that jQuery will use for IDs. Selecting classes still requires the DOM to be traversed behind the scene and if it is a large DOM and you make several lookups the performance impact can be significant. Let take a look at this simple html code:

<div id="main">

<form method="post" action="/">
  <h2>Selectors in jQuery</h2>

  ...
  ...
  <input class="button" id="main_button" type="submit" value="Submit" />

</form>
</div>
 
...
//Selecting the submit button using the class attribute
//like this is much slower than...
var main_button = $('#main .button');

 
//Selecting the submit button directly using the id like this
var main_button = $('#main_button');

#7 – Use Tags Before Classes

When you are selecting through tags jQuery will use the native browser JavaScript method, getElementsByTagName(). ID is still faster but this is still much faster than selecting with a class name.

<ul id="shopping_cart_items">
  <li><input class="in_stock" name="item" type="radio" value="Item-X" /> Item X</li>

  <li><input class="3-5_days" name="item" type="radio" value="Item-Y" /> Item Y</li>

  <li><input class="unknown" name="item" type="radio" value="Item-Z" /> Item Z</li>

</ul>

It is important to prefix a class with a tag name (here this is “input”) and then it is important to descend from an ID to limit the scope of the selection:

var in_stock = $('#shopping_cart_items input.in_stock');

#8 – Cache jQuery Objects

Caching an object before working with it is essential for performance. You should neverdo like this:

<li>Description: <input type="text" name="description" value="" /></li>

...
$('#shopping_cart_items input.text').css('border', '3px dashed yellow');
$('#shopping_cart_items input.text').css('background-color', 'red');

$('#shopping_cart_items input.text').val("text updated");

In stead cache the object and work on it. The example below should really use chaining but it is just for illustration.

var input_text = $('#shopping_cart_items input.text');

input_text.css('border', '3px dashed yellow');
input_text.css('background-color', 'red');
input_text.val("text updated");

 
//same with chaining:
var input_text = $('#shopping_cart_items input.text');
input_text
 .css('border', '3px dashed yellow')

 .css('background-color', 'red')
 .val("text updated");

#9 – Bind certain jQuery functions to $(window).load event

Most jQuery code examples and tutorials instruct us to bind our jQuery code to the $(document).ready event. In many cases this is OK but since $(document).ready occurs during page render while objects are still downloading it may cause problems for some types of scripts. Functionality such as binding visual effects and animations, drag and drop, pre-fetching hidden images etc. could benefit from being bound to the $(window).load as it will ensure that all dependant elements are ready for use.

$(window).load(function(){
 // Put your jQuery functions that should only initialize after the page has loaded.
});

#10 – Use Chaining to limit selectors, make the code more simple and elegant

Because JavaScript supports chaining and because it works across line breaks you can structure your code like this. This example first removes a class on an element and then adds another to the same element.

$('#shopping_cart_items input.in_stock')
    .removeClass('in_stock')
    .addClass('3-5_days');

If needed it is really simple and useful as well to create a jQuery function that support chaining.

$.fn.makeNotInStock = function() {
    return $(this).removeClass('in_stock').addClass('3-5_days');

}
 
$('#shopping_cart_items input.in_stock').makeNotInStock().log();
iPhoneKer.com
Save up to 630$ when buy new iPhone 15

GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language

Dall-E-OpenAI.com
Generate creative images automatically with AI

AIVideo-App.com
Render creative video automatically with AI

JavaScript by day


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web