Frontend js optimization scheme (continuous update) and frontend js optimization scheme

Frontend js optimization scheme (continuous update) and frontend js optimization scheme

I recently read "high-performance javascript". Here I will record some of my feelings after reading it. By the way, I will add my own understandings. If you are interested, you can follow my Blog Tips.

I. js optimization Loading

1. Put the script tag at the bottom, not the head tag;

2. Minimize the number of js files

3. Add a defer attribute to the script tag. The defer attribute indicates that the script contained in the tag does not modify the DOM, so the code can be safely delayed.

<Script type = "text/javascript" src = "file. js" defer> </script>

4. Directly embed the loadScript () function into the page to avoid an HTTP request. Once the Code required for page Initialization is downloaded, you can continue to use loadScript () freely (); the script required to load other functions of the page;

5. YUI3 method and LazyLoad class library (you can use this script on your own)

6. LABjs: (this is also a script file. You can search for it by yourself)

$ LAB. script () is used to define the js file to be downloaded. $ LAB. wait () is used to specify the function called after the file is downloaded and executed.

Ii. Data Access Optimization

1. Reading and Writing local variables in a function is always the fastest, and reading and writing global variables is usually the slowest. Remember that global variables always exist at the end of the execution environment scope chain, so they are also the farthest. For all browsers, the general score trend is that the deeper the location of an identifier, the slower its read/write speed.

The best way is to replace a global variable with a local variable. For example:

Var doc = document;

2. Object Member-Prototype

Objects in js are prototype-based. A prototype is a rush of other objects. It defines and implements a list of members required for a new object.

Therefore, there are two types of objects: instance members and prototype members. The instance members exist directly in the object instance, and the prototype members inherit from the object prototype.

3. Object Member-prototype chain

Use the constructor Book to create a new Book instance. The prototype of instance boo1 (_ proto _) is Book. prototype, and the prototype is object.

4. Avoid using the with statement because it will change the execution environment scope chain. Similarly, the catch clause in the try-cath statement has the same effect, so be careful when using it;

5. Generally, you can save common object members, array elements, and cross-domain variables in local variables to improve js performance because local variable access is faster.

3. Optimize DOM Programming

1. var element = document. querySelectorAll ("# menu ");

 

The latest browser provides an acoustic dom method named querySelectorAll;

 

2. Obtain some elements with the class 'waring' and 'notice 'on the page.

 

Var errs = document. querySelectorAll ('div. waring, div. notice ');

 

3. To prevent page rearranging multiple times, you can merge the style modifications and process them once. This will only modify the DOM once.

 

Var el = document. getElementById ('mydiv ');

 

El.style.css Text = "border: 1px solid red; border-right: 2px; padding: 5px ;"

 

This will overwrite the existing style information. If you retain the existing style, you can:

 

El.style.css Text + = '; border-left: 1px ;';

 

Modify the class name;

 

4. One way to reduce the shuffling is to change the display to wake up, temporarily remove the element from the document, and then restore it.

 

5. Another way to reduce the shuffling is to create and update a document segment outside of the document, and then attach it to the original list.

 

Var fragement = document. getElementById ("mylist ");

 

AppendDataToElement (fragement, data );

 

Document. getElementById ('mylist'). appendChild (fragement );

 

6. Another solution is to create a backup for the node to be modified, and then operate the copy. Once the operation is completed, replace the old node with the new one.

 

Var old = document. getElementById ("mylist ");

 

Var clone = old. cloneNode (true );

 

AppendDataToElement (clone, data );

 

Old. parentNode. replaceChild (clone, old );

 

We recommend that you use the document fragment scheme because the generated DOM traversal and replaying times are the least.

(Continuous update ....)