[Basic learning of jQuery] 11 simple jQuery performance optimization and jquery Performance

[Basic learning of jQuery] 11 simple jQuery performance optimization and jquery Performance

Performance Optimization

• Proper Selector
  • $ ("# Id") directly calls the underlying method, so this is the fastest. If you cannot find it directly, you can use the find method to continue searching.
  • $ ("P") the tag selector also directly calls the underlying method, so it is the second choice.
  • $ (". Class") also directly calls the underlying method. However, IE8 and earlier versions do not support getElementByClassName. It uses DOM search, which affects performance.
  • $ ("[Attribute = value]") uses DOM search. Many modern browsers support the querySelectorALL method, but the performance varies with browsers. In general, DOM elements are not well positioned in this way.
  • $ (": Hidden") is not implemented in the local js method. Same DOM search
  • The performance of the above five methods decreases in turn, so we try to use the ID selector and specify the context for the selector. If you forcibly use a selector in the DOM search mode, we recommend that you use an ID selector to narrow the range and use the find function to further search.
• Cache object
  • Try to use chained operations instead of using the same selector multiple times before performing different operations.
  • If you cannot use chained operations, you can consider placing the jQuery object you need into a global object. In this way, you do not need to search for the DOM every time you use it.
• DOM operation during Loop
  • Do not perform DOM insertion cyclically, that is, $ ("# id"). append and similar operations, which will consume a lot of performance. Therefore, you can consider a large string of such operations first, concatenate an HTMl string as a string, and then insert it.
• Use jQuery objects in array Mode
  • The jQuery selector returns a jQuery object. If you are using a structure that is actually an array, then in terms of performance, you can use for and while to replace $ ("# id "). the format of each.
• Event proxy
  • BIND as few events as possible, otherwise it will also bring negative performance impact. When you bind multiple events, consider whether you can bind only one event through their common parent level.

    // Consider the following situation. If a large table is used, N events are bound. $ ('# MyTable td '). click (function () {comment (this).css ('background', 'red ');}); // use the event bubble mechanism to replace the previous method $ ('# mytable '). click (function (e) {var capture clickdomaindetail (e.tar get); // e.tar get captures the triggered target element javasclick.css ('background', 'red ');}); // Of course, we can also use on to bind simple events $ ('# mytable '). on ('click', 'td ', function () {comment (thisground .css ('background', 'red ');});

• You can use the custom jQuery plug-in to replace your repeated code.
• Use join () to replace + to concatenate strings
• You can consider using native js Code where performance is needed.
• Rational use of HTML5 data attributes

  <div id="d1" data-role="page" data-last-value="43" data-options='{"name":"Troy123"}'></div>$("#d1").data("role");//"page"$("#d1").data("lastValue");//43$("#d1").data("options").name;//"Troy123"

Finally, the author also wrote some jQuery-based techniques, which are actually some solutions.

Well, in more general terms, you can search online and copy and paste the Code directly.

I think this is a secondary issue, so I did not paste it after reading it. After all, when you encounter these problems, Baidu just needs to copy them.