background preloader

Blog Archive » jQuery Performance Rules

Blog Archive » jQuery Performance Rules
Once upon a time, all we needed to worry about was reducing Bytes and Requests and playing around with load order to make things faster. Nowadays, we are increasingly impacting one more major component in performance – CPU utilization. Using jQuery and other frameworks that make selecting nodes and DOM manipulation easy can have adverse affects if you’re not careful and follow some simple practices for reducing the work the browser has to do. 1. Always Descend From an #id The fastest selector in jQuery is the ID selector ($('#someid')). Selecting Single Elements <div id="content"><form method="post" action="/"><h2>Traffic Light</h2><ul id="traffic_light"><li><input type="radio" class="on" name="light" value="red" /> Red</li><li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li><li><input type="radio" class="off" name="light" value="green" /> Green</li></ul><input class="button" id="traffic_button" type="submit" value="Go" /></form></div> Selecting Multiple Elements

10 Ways to Instantly Increase Your jQuery Performance This article will present ten easy steps that will instantly improve your script's performance. Don't worry; there isn't anything too difficult here. Everyone can apply these methods! jQuery is in constant development and improvement. If you want to stay up to date without having to download the library a thousand times, GIYF (Google Is Your Friend), in this situation too. * Editor's Note: Perhaps, the quicker and easier method is to simply link to the script directly. The majority of browsers are not able to process more than one script concurrently so they queue them up -- and load times increase. The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing its overall byte footprint (both in raw terms and after gzipping, as most JavaScript and CSS served from production web servers is gzipped as part of the HTTP protocol). -- From YUI compressor, an excellent tool jQuery officially reccomends to minify scripts. Instead of

15 Super-Simple jQuery Menu and Navigation Plugins | Speckyboy Design Magazine There are lots of jQuery menu and navigation plugins freely available that can do anything you could possibly imagine. We love those innovative and ground-breaking plugins we really do. But, as we are sure you will agree, the most of the time, all we basically need is a lightweight, functional and easy to style solution. Something that we can easily slot into our templates and themes and will work without any major code tinkering and requires only minor CSS tweaks. And that is what we have for you today – 15 Super Simple jQuery Menu and Navigation solutions that should make your work that little bit easier. Smooth Navigational Menu Smooth Navigation Menus contents can either be from direct markup on the page, or via an external file and fetched via Ajax. jQuery Simple Drop Down Menu This tiny (1kb) and versatile menu has been compiled with only 20 lines of code, achieved by removing various cumbersome mouse events from within the html code making it simpler and lighter. jQuery Basic Menu

The Basics of jQuery ↩ Andrée So, a while back I had an internal presentation at work about this topic. A few good friends in the community took a look at my slides, and they thought it would make a nice blog post because “there can’t be too many good posts about jQuery introduction and best-practices.” Whether this post is going to be good or not, is up to you but I’ll try to outline what jQuery is, and how you can start working with it. For most of you, this will just be a re-cap and probably not provide much new information but can perhaps serve as a reference post if you ever need one. What is jQuery? jQuery is a client-side JavaScript library that abstracts away browsers’ different implementations into an easy-to-use API. Recently, it also set a new usage record with being used on 54 per cent of Alexa’s top 17,000 most visited websites, while Flash was “only” at 47 per cent. How do I use jQuery? First off, you should learn some basics. jQuery, like many other libraries, uses the global $ variable as a shortcut.

Getting Started With jQuery QUnit for Client-Side Javascript Tes First of all, I’m assuming you’re already using jQuery. If not, you should be :) QUnit may help you for non-jQuery testing, but it’ll work better with jQuery. Second, you should start by downloading and setting up QUnit (from this link). QUnit consists of a single JS file (testrunner.js) and a CSS file (testsuite.css). Third, I recommend grabbing a patched testrunner.js from here (Ticket 3215). To start testing, you’ll need to start by creating an HTML page (MyFooTests.htm, for example). If you save that HTML and open it in a browser, you should see something to the effect of: Modules and Tests QUnit has the concept of “modules” and “tests.” Let’s create our first module and first test case. First, near the bottom of the HTML, before the closing </body> tag, add a div with an id “testDiv”: Then, up higher, where the “TODO” is in our JavaScript, add a new test, like so: Which should yield two successes: For me, QUnit opened up the possibility for serious TDD with client-side JavaScript.

jTemplates - template engine in JavaScript Articles: JQuery: Collapsible Menu It’s quite simple to create a collapsible and expandable menu, all you need is some basic experience with C-SS. The result of the next steps will be a User control accessible to keyboard and mouse inputs. At the beginning use your H-TML file, which also includes the JQery library. These little changes will make it possible to tab through the links later. The CSS code is not that difficult if you keep it to a minimum. Comments: Noel Hurtley↯ Written on 2007-01-20 at 21:15 Thanks for the great tutorial. Paul Written on 2007-01-23 at 00:35 Great tutorial. Ty Written on 2007-01-24 at 09:12 Sweet, it resizes great I made it as big as a bus, and it still looked fine in firefox, by clicking control + about a zillion times. Klaus Albert Written on 2007-01-26 at 01:49 great solution! My additional request: “open a predefined submenue” My solution: 1. define the predefined with ‘…href=”##’…’ 2. search the initial with ‘$(”#Menu > li > a[@href=#] “).find(”+ ul”).slideUp(1);’ the complete new example:

51+ Best of jQuery Tutorials and Examples Apr 24 2008 There’s stuff all over the Web about jQuery, but finding the best tutorials to get you started can be tough. Here are Examples and tutorials from jQuery masters to keep you on the right track. We will start with jQuery masters and feature some of their best tutorials, then we will move on to more categorized tutorials, cheat sheets and hacks. You can also take a look at other 3 articles in this series : So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post in this series. John Resig John Resig, creator of the JQuery JavaScript library and author of Pro JavaScript Techniques, is a Mozilla technologist focused on the relationship between Mozilla and the world of JavaScript libraries. Featured Tutorials of John Resig 15 Days Of jQuery 15 Days Of jQuery – Fantastic tutorials and example code that takes you from zero to hero in no time flat. Featured Tutorials of 15 Days Of jQuery Learning jQuery Featured Tutorials on Bassistance

jQuery Form Serialization without ASP.NET ViewState If you're doing AJAX callbacks to the server with POST data from ASP.NET pages you might be inclined to do something like this: var post = $("#form1").serialize(); $.post("MethodCallback.aspx?Callback=ListPanel", post, function(result) { alert(result) }); This works fine, but it will pick up all of your ViewState and EventValidation making the post back to the server a heck of a lot bigger than it should be especially if you have a page where ViewState is heavily used. Fortunately it's quite easy to exclude ViewState et al. with code like this: var res = $("#form1") .find("input,textarea,select,hidden") .not("#__VIEWSTATE,#__EVENTVALIDATION") .serialize(); $.post("MethodCallback.aspx? This is a little more verbose, but necessary in order to be able to individually reference each of the child input elements. The .not() function basically filters the result set of input elements and so doesn't send up ViewState and Event validation. which then allows you to do: var poststring = $.param(post);

5 Ways to Make Ajax Calls with jQuery There are at least five ways to make AJAX calls with the jQuery library. For beginners, however, the differences between each can be a bit confusing. In this tutorial, we'll line them up and make a comparison. Additionally. we'll review how to inspect these AJAX calls with Firebug as well. This section is for those who have no idea what AJAX is. If you don't fall into this category, feel free to skip to the next section. In Gmail, switch from inbox to draft. The key to AJAX's concept is "asynchronous". Now we should know what AJAX actually is. For static content, we may want the response cached. The most common use of AJAX is for loading HTML from a remote location and injecting it into the DOM. Click on the first button named "load()." Below is the JavaScript code for this effect: $.ajaxSetup forces the browser NOT to cache AJAX calls.After the button is clicked, it takes a little while before the new HTML is loaded. Now, let's explore more details of the request with Firebug:

25+ jQuery Plugins that enhance and beautify HTML form elements Introduction This article will cover the following elements: Advertisement Form Skinning Frustrated with the form elements inconsistency among different browsers? With these jQuery plugins, you can unified the look and feel of all your form elements. Form Validation It's always good to have client side form validation. Masking Masking can help to avoid human mistake. File Uploader These file uploader transform the orginal input file element into a more robust file uploader that able to upload multiple files and having a progress bar to indicate the upload progress. Checkbox & Radio Button Spice it up your checkbox and radio button with these jQuery plugins! Spin Button & Slider Spin button can be useful sometimes. Auto Complete You must have seen the auto complete functionality from, and all the major websites. Calendar & Time picker The old school method to let user select date and time are using drop down lists (day, month and year). Drop Down Menu (Select Element) Color Picker

CoDe Magazine - Article: jQuery Puts the Fun Back into Browser S Ok, I admit it. For many, many years I hated JavaScript. I hated writing JavaScript code, and even more I hated the pain that goes along with dealing with different browsers using reams of script code. Today I still hate the same JavaScript problems as they haven’t gone away, but thanks to a recently gained better understanding of JavaScript and a small JavaScript client library called jQuery, I no longer dread the days when I have to write client-centric AJAX or UI script code. Looking back, it was not until the AJAX wave started forming a few years back that I even considered getting more seriously interested in JavaScript. But even knowing JavaScript reasonably well is still not enough-these days it’d be silly to work with raw JavaScript for DOM programming and not use some sort of library to help bridge the browser-specific quirks and provide utility functionality to make it easier to work in a browser-agnostic environment. Key Features of jQuery Why jQuery? The jQuery API

3 mistakes to avoid when using jQuery with ASP.NET AJAX - Encosia Note: This post is part of a long-running series of posts covering the union of jQuery and ASP.NET: jQuery for the ASP.NET Developer. Topics in this series range all the way from using jQuery to enhance UpdatePanels to using jQuery up to completely manage rendering and interaction in the browser with ASP.NET only acting as a backend API. If the post you're viewing now is something that interests you, be sure to check out the rest of the posts in this series. Over the past few weeks, I think I have definitely embodied Jeff Atwood‘s claim that we’re all amateurs, learning together. On the bright side, your great feedback in both posts’ comments has reinforced the fact that some of the best content on my blog is the part that you write. In this post, I’m going to detail three of the problems that were discovered as a result of those previous two posts: Finally, I’ll suggest what I now believe to be a best practice usage, taking all of these issues into account. Length Required End result?