Home > Developer > Web Develop
With the development of the Internet, the front-end interface of the website will become more and more important, which focuses on the user's direct experience. More and more of the same type of website on the market, a smoother, more elegant interface than other similar sites can allow users to abandon your competitors. Therefore, the front-end of their own website to run faster, more beautiful interface has become an important topic. Thus, the front-end interface optimization technology has become an excellent front-end developers must have skills, which is the core competitiveness.
Today's introduction to some of the optimization techniques in the Popular Front-end JavaScript development framework for jquery requires us to understand JavaScript and the JavaScript engine relationship in the Web browser in depth.
Reduce DOM OperationsDOM, the full name Document Object model, is the standard programming interface for the extensible Identity Language recommended by the Organization. The DOM can access and modify the content and structure of a document in a platform-independent and language-specific way, that is, it can handle XML and HTML documents. The DOM can be used by JavaScript to read, change HTML, XHTML, and XML documents.
So, in JavaScript code, we might often use DOM operations, but this also leads to the need to span from the JavaScript engine to the DOM, which is costly. So if we need to use the DOM in JS, we should try to reduce the DOM operation.
As in the following example:
<! DOCTYPE html><html><head><meta charset="Utf-8" /></head><body><div id="x1"></div><div id="x2"></div><div id="x3"></div></body></html><script>//=========================================//frequent use of DomvarDate =New Date();varStart = Date.gettime (); for(varI=0;i<10000; i++) {date =New Date(); End = Date.gettime (); document.getElementById ("x1"). InnerHTML =""+end-start;}//=========================================//Use variables to get DOM referencesvarx2 = document.getElementById ("X2");d ate =New Date(); start = Date.gettime (); for(varI=0;i<10000; i++) {date =New Date(); End = Date.gettime (); x2.innerhtml =""+end-start;}//==========================================//Last use only once DomDate =New Date(); start = Date.gettime (); for(varI=0;i<10000; i++) {date =New Date(); End = Date.gettime ();} document.getElementById ("X3"). InnerHTML = End-start;</script>
The result of the above code operation is:
187
170
16
As you can see, the last DOM operation is much faster than using the DOM directly over and over again. In jquery, $ (selector) is the DOM operation.
Stripping DOM elements with detachThe method of improving DOM operations can also be done by stripping the elements to be manipulated before inserting the elements into the document again.
Here's an example:
<! DOCTYPE html><html><head><meta charset="Utf-8" /></head><body><div id="x1"></div><div id="x2"></div><div id="x3"></div></body></html><script src=".. /jquery/jquery-1.11.2.min.js "></script><script>//=========================================//Do not peel elementsvarDate =New Date();varStart = Date.gettime (); for(varI=0;i<10000; i++) {date =New Date(); End = Date.gettime ();varstr ="x1:"+New String(End-start); $("#x1"). html (str);}//=========================================//Use detach to peel off elementsvarx2 = $ ("#x2"). Detach ();d ate =New Date(); start = Date.gettime (); for(varI=0;i<10000; i++) {date =New Date(); End = Date.gettime ();varstr ="X2:"+New String(End-start); X2.html (str);}//re-insert the stripped element$("Body"). append (x2);//========================================//Last disposable assignmentDate =New Date(); start = Date.gettime (); for(varI=0;i<10000; i++) {date =New Date(); End = Date.gettime ();}varstr ="X3:"+New String(End-start); $ ("#x3"). html (str);</script>The result of the above example is:
x1:670
X3:13
x2:509
It can be seen that the stripping element is a little faster than the direct use, but when the document is inserted again, the relative position changes, which can be solved by CSS style. In addition, we can see that using document directly is much faster than jquery's $.
Use a For loop whenever possible for a large number of loop operationsThe For loop will be much faster than jquery's $.each and Array.foreach, so in the case of a lot of loops, we should choose the for loop to make the page run faster, and in the small loop times, you can use another two to make programming a little easier.
Using local variables to cache objectsUsing local variables can shorten the time to find objects and the number of jquery lookups based on the selector, and you can precede the variable name with a $ to indicate that this is a jquery object.
Skip the jquery approach when performance requirements are highvar $this = $(this);var $hello = $("#hello");$hello.button();
As you can see from the two examples we've written earlier, using the core JavaScript methods and properties will be faster than jquery. Therefore, if the performance requirements of the site is high, you can consider using JavaScript directly in the method or DOM operation.
DRY, do not write duplicate codeIn jquery, we can use anonymous functions, which gives us great convenience, but also allows us to often write repetitive code that is not conducive to maintenance and updating. Therefore, we should try to integrate the same function or similar code.
As an example:
Selectors use the ID selector and class selector as much as possible//通过选择器来整合功能一样的代码$("#hello,#world").click(function(){ alert("Hello World");});function sayHello(){ alert("Hello World");}//通过注册同一个函数来整合重复代码$("hello").click(sayHello);$("world").click(sayHello);
There is a powerful selector mechanism in jquery, with a variety of available selector rules. But in these rules, the ID selector and the single class selector are the fastest elements to select elements, and if you can use either the ID selector or the class selector, try using both, which will make your page faster.
"Web Front end" jquery interface optimization
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
