Jquery writes at the fastest speed

1. The latest version of jqueryjquery is updated quickly. You should always use the latest version. Because the new version improves performance and has many new features. Let's take a look at the differences in jquery performance in different versions. Here are the three most common jquery selection statements: $ ('. ELEM ') $ ('. ELEM ', context) context. find ('. ELEM ') Let's test jquery in versions 1.4.2, 1.4.4, and 1.6.2 to see how many times the browser can execute in 1 second. The result is as follows: 1.6.2 runs more than two old versions. In particular, the first statement improves the performance several times. Testing of other statements, such as. ATTR ("value") and. Val (), is also a new version of jquery, which is better than the old version. 2. In jquery, you can use multiple selectors to select the same web page element. The performance of each selector is different. You should understand their performance differences. (1) The fastest selector: Id selector and element tag selector. For example, the following statement has the best performance: $ ('# id') $ ('form ') $ ('input') when these selectors are met, jquery automatically calls the native method of the browser (such as getelementbyid (), so their execution speed is fast. (2) Slow selector: the performance of the class selector $ ('. classname') depends on different browsers. Firefox, Safari, chrome, and operabrowsers all have native Methods getelementbyclassname (), so the speed is not slow. However, the IE5-IE8 does not deploy this method, so this selector will be quite slow in IE. (3) the slowest selector: pseudo-class selector and attribute selector. Let's look at the example. To find out all the hidden elements in a webpage, you must use the pseudo class selector: $ (': Den den'). The example of the attribute selector is: $ ('[attribute = value]'). these two statements are the slowest, because the browser does not have a native Method for them. However, in some new versions of browsers, The queryselector () and queryselectorall () methods are added, which greatly improves the performance of such selectors. Finally, we will compare the performance of different selectors. We can see that the ID selector is far ahead, then the tag selector, and the third is the class selector. Other selectors are very slow. 3. Understand the relationship between child elements and parent elements. The following six selectors select child elements from the parent element. Do you know which is the fastest and which is the slowest? $ ('. Child ', $ parent) $ parent. find ('. child ') $ parent. children ('. child ') $ (' # parent>. child ') $ (' # parent. child ') $ ('. child ', $ (' # parent ') Let's look at the sentence. (1) $ ('. Child', $ parent) indicates that a DOM object is given and a child element is selected from it. Jquery will automatically convert this statement into $. Parent. Find ('child '), which will cause some performance loss. It is 5%-10% slower than the fastest form. (2) $ parent. Find ('. Child') is the fastest statement .. The find () method calls the browser's native method (getelementbyid, getelementbyname, getelementbytagname, and so on), so the speed is faster. (3) The $ parent. Children ('. Child') Statement in jquery uses the $. sibling () and JavaScript nextsibling () Methods to traverse nodes one by one. It is about 50% slower than the fastest form. (4) $ ('# parent>. Child') jquery uses the sizzle engine internally to process various selectors. The sequence of sizzle engine selection is from right to left, so this statement is selected first. child, and then filter out the parent element # parent one by one, which causes it to be about 70% slower than the fastest form. (5) $ ('# parent. Child') this statement is the same as the previous one. However, the previous one only selects direct sub-elements. This one can be used to select multi-level sub-elements, so it is slower, probably 77% slower than the fastest form. (6) $ ('. child ', $ (' # parent ') jquery converts this statement into $ (' # parent '). find ('. child '), which is 23% slower than the fastest form. Therefore, the best choice is $ parent. Find ('. Child '). In addition, because $ parent is often generated in the previous operation, jquery will cache it, which further speeds up the execution. For specific examples and comparison results, see here. 4. Do not use jqueryjquery too quickly or compare it with the native JavaScript method. Therefore, when there are scenarios where native methods can be used, avoid using jquery whenever possible. See the following example to bind a function for processing click events for element A: $ ('A '). click (function () {alert ($ (this ). ATTR ('id') ;}; this Code indicates that the ID attribute of the element is displayed after you click element. To obtain this attribute, jquery must be called twice in a row. The first is $ (this), and the second is ATTR ('id '). In fact, such processing is completely unnecessary. A more correct way is to directly use the Javascript native method to call this. ID: $ ('A '). click (function () {alert (this. ID) ;}); based on the test, this. id speed ratio $ (this ). ATTR ('id') is more than 20 times faster. 5. Selecting a webpage element through caching is a costly step. Therefore, the fewer selector times, the better, and cache the selected results as much as possible to facilitate future use. For example, the following is a bad method: jquery ('# top '). find ('p. classa '); jquery (' # Top '). find ('p. classb '); better Syntax: varcached = jquery (' # Top '); cached. find ('p. classa '); cached. find ('p. classb '); according to the test, the cache is 2-3 times faster than that without caching. 6. One of the major features of jquery's use of chained writing is that it is allowed to use chained writing. When ('div'hangzhou.find('h3'hangzhou.eq(2).html ('hello'); When Using Chained writing, jquery automatically caches the results of each step, so it is faster than non-chained writing. According to tests, chained writing is about 25% faster than non-chained writing (without caching. 7. event Delegate processing (eventdelegation) The javascript event model adopts the bubble mode. That is to say, the subelement event will bubble up step by step to become the parent element event. This can greatly simplify event binding. For example, there is a table (table element), in 7. event Delegate processing (eventdelegation) The javascript event model adopts the "bubble" mode. That is to say, the subelement event is "Bubbling" step by step to become the event of the parent element. This can greatly simplify event binding. For example, there is a table (table element) with 100 grids (TD element). Now we need to bind a click event (click) to each grid ), do I need to execute the following command 100 times? $ ("TD "). BIND ("click", function () {$ (this ). toggleclass ("click") ;}); the answer is no. We only need to bind this event to the table element, because after a click event occurs on the TD element, this event will "bubble" to the parent element table and be listened. Therefore, this event only needs to be bound to the parent element once, instead of 100 times on the child element, which greatly improves the performance. This is called the "delegate processing" of the event, that is, the sub-element "delegate" parent element to process the event. There are two specific writing methods. The first method is to use. delegate () method: $ ("table "). delegate ("TD", "click", function () {$ (this ). toggleclass ("click") ;}); the second is to use. live () method: $ ("table "). each (function () {$ ("TD", this ). live ("click", function () {$ (this ). toggleclass ("click") ;};}); the two statements are basically equivalent. The only difference is that ,. delegate () is triggered when the event bubbles to the specified parent element ,. live () is triggered when the event bubbles to the root element of the document, so. delegate () ratio. live () is a little faster. In addition, these two methods are compared to the traditional one. another benefit of the BIND () method is that it is also effective for the dynamically inserted elements ,. BIND () is valid only for existing DOM elements and does not apply to dynamically inserted elements. According to the test, the delegated processing is dozens of times faster than the non-delegated processing. In the case of delegate processing,. Delegate () is about 26% faster than. Live. 8. the overhead of modifying the DOM structure is large. Therefore, do not frequently use methods such as. append (),. insertbefore (), and. insetafter. If you want to insert multiple elements, merge them and insert them at a time. According to the test, merging inserts is nearly 10 times faster than not merging inserts. (2) If you want to perform a large amount of processing on a DOM element, you should first use the. Detach () method to extract this element from the Dom. After the processing is complete, re-insert it back into the document. According to the test, the. Detach () method is 60% faster than when not in use. (3) If you want to store data on the DOM element, do not write it as follows: var ELEM = $ ('# ELEM'); ELEM. data (key, value); To be written as var elem =$ ('# ELEM'); $. data (ELEM, key, value); according to the test, the last write method is nearly 10 times faster than the previous one. Because ELEM. the data () method is defined on the prototype object of the jquery function, and $. the data () method defines the jquery function above. It is much faster to call without calling complex jquery objects. (For details, refer to the following 10th points .) 9. Correct Processing of cyclic statements is always a time-consuming operation. If you can use a complex selector to directly select elements, do not use loops to identify elements one by one. The native Javascript loop methods for and while are faster than jquery's. Each () method. The native method should be used first. 10. Generate as few jquery objects as possible. Every time you use a selector (for example, $ ('# id'), a jquery object is generated. A jquery object is a very large object with many attributes and methods that occupy a lot of resources. Therefore, generate as few jquery objects as possible. For example, many jquery methods have two versions, one for jquery objects and the other for jquery functions. In the following two examples, both extract the text of an element and use the text () method. You can use the version for jquery objects: var $ text = $ ("# text"); var $ Ts = $ text. text (); you can also use the version for jquery functions: var $ text =$ ("# text"); var $ ts =$. text ($ text); because the last version for jquery functions does not use jquery objects, the relative overhead is relatively small and the speed is relatively high. Original: http://www.dabaii.com /? Action = show & id = 101