Discuss jQuery and javascript Performance articles are not uncommon . However , In this article, I plan to summarize some speed skills and my own suggestions , To improve your jQuery and javascript Code . Good code will bring speed up . Fast rendering and response means a better user experience .
First , Keep in mind that jQuery Namely javascript. This means that we should adopt the same coding conventions , Style guides and best practices .
 
First , If you are one javascript Novice , I suggest you read 《 to JavaScript For beginners 24 Best practices 》 , This is a high quality article javascript course , Contact jQuery It's better to read before .
 
When you are ready to use jQuery, I strongly recommend that you follow these guidelines :
 
Cache variables
DOM Traversal is expensive , So try to reuse the element cache .
// too bad
 
h = $('#element').height();
$('#element').css('height',h-20);
 
// Suggest
 
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
 
 
Avoid global variables
jQuery And javascript equally , Generally speaking , It's best to make sure your variables are in the scope of the function .
// too bad
 
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
 
// Suggest
 
var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);
 
 
Use Hungarian nomenclature
Add... Before the variable $ Prefix , Easy to identify jQuery object .
// too bad
 
var first = $('#first');
var second = $('#second');
var value = $first.val();
 
// Suggest - stay jQuery Add... Before the object $ Prefix
 
var $first = $('#first');
var $second = $('#second'),
var value = $first.val();
 
 
Use Var chain ( single Var Pattern )
There will be more than one var Statements are combined into one statement , I suggest putting unassigned variables behind .
var 
  $first = $('#first'),
  $second = $('#second'),
  value = $first.val(),
  k = 3,
  cookiestring = 'SOMECOOKIESPLEASE',
  i,
  j,
  myArray = {};
 
 
Please use ’On’
In the new jQuery in , shorter on(“click”) Used to replace similar click() A function like this . In the previous version on() Namely bind(). since jQuery 1.7 After version ,on() The preferred way to attach event handlers . However , For consistency , You can simply use all of on() Method .
 
Reprinted from : Ace resources - focus WEB The front-end development  
Link to the original text : http://www.aseoe.com/show-13-384-1.html
 

Explore efficiency jQuery More related articles on the mystery of

  1. Efficient jQuery The secret of

    Discuss jQuery and javascript Performance articles are not uncommon . However , In this article, I plan to summarize some speed skills and my own suggestions , To improve your jQuery and javascript Code . Good code will bring speed up . Quick Render ...

  2. Efficient jquery The secret of

    When you are ready to use jQuery, I strongly recommend that you follow these guidelines : 1. Cache variables DOM Traversal is expensive , So try to reuse the element cache . // too bad h = $('#element').height(); $( ...

  3. jQuery The secret of

    Yan Haijing Efficient jQuery The secret of Discuss jQuery and javascript Performance articles are not uncommon . However , In this article, I plan to summarize some speed skills and my own suggestions , To improve your jQuery and javascript Code . good ...

  4. Efficient jQuery

    1. Cache variables DOM Traversal is expensive , So try to reuse the element cache . // too bad h = $('#element').height(); $('#element').css('height',h-20); ...

  5. Efficient JQuery code

    Cache variables DOM Traversal is expensive , So try to reuse the element cache . //  too bad   h = $('#element').height(); $('#element').css('height',h-20); ...

  6. Explore in depth efficient Java Exception handling framework

    Reprinted from :http://www.sunwei.org/archives/196 Abstract : This paper starts from Java The basic concept of exception . Grammar begins with Java Basic knowledge of exception handling , Analysis of the Java Exception Architecture , contrast Sprin ...

  7. Write high performance javascript Code ( Continuous updating )

    Reference material : Vanilla JS—— The lightest in the world JavaScript frame ( Not one of them. ) http://segmentfault.com/a/1190000000355277 Explore efficiency jQuery The secret of ...

  8. to JavaScript For beginners 24 Best practices ( turn :http://www.cnblogs.com/yanhaijing/p/3465237.html)

    As “30 HTML and CSS Best practices ” Subsequent to , This week, , We will review JavaScript Knowledge ! If you've read the following , Be sure to let us know your little skills ! 1. Use === Instead of == JavaScript ...

  9. javascript A little trick

    JS Some of the tips , I mainly do backstage work (.NET), I don't know much about the front end , Experience is very limited , But I often write JS Code , Have a strong interest in the front end , I really like js This language , Although a lot of people spray it , But I still like Js. Let's talk about my experience in the project ...

Random recommendation

  1. jenkins Integrate Automated Deployment plug-ins ( One ) deploy-plugin

    In reality, the project is successfully built , especially web To build a successful project is to build war Put it on the corresponding service , Run ( The testing phase may be publishing to the test server ) In this way, you only need to specify the trigger policy of the build to automatically build and deploy , Save a lot of labor ...

  2. Linux shell Script strategy to generate files of any size

    Excerpt from :<Linux shell Script introduction >

  3. struts2 Action Three ways to receive parameters

    Just learned Struts2 when You may have encountered many problems , Here I'll talk about Action Three ways to receive parameters , I once fell on it . So be aware of yourself ..... The first one is :Action Declare properties in , Examples :account ...

  4. git Branch renaming

    Give me a git The way to rename a branch is simple If it's not the current branch for the branch , You can use the following code : git branch -m Original name new If it's current , Then you can use it with a new name git branch -m Original name See : ht ...

  5. UVA10838 The Pawn Chess

    UVA No one wrote a series of good questions , Feel like you can practice the form of object-oriented programming a little bit ( The fog ) The question is very simple , There are some soldiers on the chess board , Going to the other side's bottom line is victory , Who can win the best decision . And output the minimum number of steps . First of all, all the chessboards here are \(4\ ...

  6. A1107. Social Clusters

    When register on a social network, you are always asked to specify your hobbies in order to find som ...

  7. Java in CAS Detailed explanation

    stay JDK 5 Before Java Language depends on synchronized Key words guarantee synchronization , This can lead to locks The lock mechanism has the following problems : (1) In multithreading competition , Lock . Releasing lock will lead to more context switching and scheduling delay , Cause performance problems . (2 ...

  8. angularJS $watch $apply $digest

    see O'Reilly My book $watch This part , But I didn't understand , A lot of information on the Internet is also ambiguous , But I found some good ones , Take a brief note of . In a word ,$watch It's used to monitor variables , All right, go straight to the code <html&g ...

  9. JEECG Diagram configuration description

    What chart configuration can do ? Chart configuration can be done online , No need to write code to generate graphic report page . Use highcharts.js Realization , Can run in any modern browser , Including mobile terminals and IE6. At present, curve graph is supported . Bar chart and other basic reports . ...

  10. python3 Crawler national address information

    PHP The way it was written was a mess, so I used python3 Rewrite it , So because the second time I wrote , It's a little clearer . remind : There may be a 502 Error of , So we did exception and database transaction processing , I haven't thought of a better optimization method for the moment , So let's do it first . stay ...