How to improve performance _javascript skills by summarizing JavaScript knowledge points

Source: Internet
Author: User
Tags http request blank page

JavaScript performance problems can not be underestimated, which requires us developers to write JavaScript programs to pay more attention to the details, this article is very detailed introduction of JavaScript performance optimization knowledge points, is definitely dry goods.

First of all, to consolidate the basic JavaScript grammar:

JavaScript basic syntax

Define variable unity with the VAR keyword

Syntax: var variable name = variable Value

Identifier: ①, composed of alphanumeric underline can not start with a number can not be a keyword strictly case-sensitive

Data type:

Numeric type: Number

String: String

Boolean: Boolean

Special data type: undefined null undefined unassigned

Null value: null

Reference type Object function

The data type of the instrumentation parameter: typeof () returns the string corresponding to the data type

Two equals = = and three equals = = = Usage

= =: Comparison value equality is independent of data type

= =: Compare congruent with both numeric and data types

Boolean environment: encountered if automatically converted to Boolean value

Boolean environment in strings string: null is true for false non-null

Boolean environment in numeric number: 0 false non 0 true

The relationship between number and string

①, encounter + do stitching operation

②, need to do operation, to convert the string into a numeric type

Conversion Method 1, String *1 into numeric type

Conversion method 2:number (String) to a numeric type

One: For JS file loading location

The,<script> tag in an HTML file can be added to the

1. If the JS file does not have special requirements to indicate the need to load and compile before the page renders, then choose to place the JS file before the </body> tag (all the pages are rendered behind), or the CSS file to the

2. If these JS files have specified need to execute first, to better display the content of the page, then on the first JS or page first put a load of small animation, you can some interesting or Meng Meng animation scenes. This is also better to avoid the user waiting for boredom, and perhaps others are more interested in this loading animation, so as to enhance the project's user experience.

Final recommendation: Put <script> tags in front of </body> tags as much as possible before loading to enhance the user experience.

Two: for JS file merging

In many team development, we may put different functions of the code blocks in different JS files, so that in the development process of the people to write code will be more convenient, after all, only need to find the corresponding folder or file rather than in a very long file to find a way. This is really going to improve team development efficiency and make it easier to develop and maintain two times after new entrants. So put this problem into page performance? This is the problem, as noted in this book: Each HTTP request brings with it additional performance overhead,so downloading one single KB file wil L be faster than downloading four KB files.

Downloading 1 100KB of files is faster than downloading 4 25KB of files. And the development process of the Central Division of the various documents have great benefits, then the merger of the problem will be put in the development after processing, I believe that this operation is not unfamiliar to everyone, now the front-end tools so rich, You are accustomed to use what compression with what compression it ~

Here simply put forward, in the loading of files can also be used to defer and async properties, for lazy loading and asynchronous loading, in modern browsers, most of them have been supported defer properties, not accustomed to use this amount, do not know what will be the specific problems. Interested friends can Google the knowledge point, here is a simple mention it.

Now the framework is also mostly in conjunction with lazy loading and on-demand loading.

Third: Faster data access

For browsers, the deeper the position of an identifier, the slower it is to read and write to him (this is the case with the prototype chain). This should not be difficult to understand, simple analogy is: grocery store away from your home, you go to soy sauce spent more time. Bear Child, a soy sauce so long, the food early burnt-.-~

If we need to use a variable value more than once in the current function, then we can store it with a local variable, and the case is as follows:

Modify the former
function Showli () {
var i = 0;
for (; I<document.getelementsbytagname ("Li"). length;i++) {//Once access to document
Console.log (i, document.getElementsByTagName ("Li") [i]); Three visits to document
};
Modified
function Showli () {
var li_s = document.getelementsbytagname ("li");//once Access document
var i = 0;
for (; i<li_s.length;i++) {
console.log (i,li_s[i]);//three access local variable li_s
};

Four: Optimization of DOM operations

As we all know, DOM operations are far more performance-intensive than JavaScript, and while we can't avoid manipulating the DOM, we can try to reduce the performance cost of the operation.

Let's use the code to explain the problem:

function innerli_s () {
var i = 0;
for (; i<20;i++) {
document.getElementById ("Num"). Innerhtml= "a";//20 cycles, 2 DOM element accesses at a time: Read the InnerHTML value at a time, Write value at once
};

Make one rewrite for the above methods:

function innerli_s () {
var content = "";
var i = 0;
for (; i<20;i++) {
content + = "A";//here only to the JS variable loop 20 times
};
document.getElementById ("Num"). InnerHTML + = content; This value has a DOM operation and 2 times DOM access: Read the value of the innerHTML one time and write the value once

Five: Reduce the DOM redraw reflow

Changes in element layout or additions or deletions to the browser window will result in rearrangement, and changes in font color or background color will result in redrawing.
For operations like the following, it is said that modern browsers are mostly optimized (optimized for 1-time reflow):

Modified before
var el = document.getElementById ("div");
El.style.borderLeft = "1px"; 1 re-typesetting
el.style.borderRight = "2px";//1 re-typesetting
el.style.padding = "5px";//1 times re-typesetting
//modified
var el = document.getElementById ("div");

For multiple operations, the following three methods can also reduce the number of reflow and redraw:

1.Dom Hide First, then show 2 times rearrangement (temporary Display:none)

2.document.createdocumentfragment () Create document fragment processing, append to page 1 times after operation

3.var Newdom = Olddom.clonenode (True) to create a copy of the DOM, OldDOM.parentNode.replaceChild (Newdom,olddom) overwrites the original Dom 2 times after modifying the replica

Five: The optimization of the cycle

This should be more people know the way of writing, simple with can be (after or with the code + annotation form description) ~

Modified before
var i = 0;
for (; i<arr.lengthli++) {//Each loop needs to get the length
Console.log (arr[i] of the array arr);
Modified
var i = 0;
var len = arr.length; Gets the length for 
(; i<len;i++) {
console.log (Arr[i]) of
the array arr;
or
var i = arr.length;;
for (; i;i--) {
console.log (arr[i]);
}

Six: rational use of binary

For example: to 2 modulo, then even the lowest bit is 0, the odd lowest bit is 0, with 1 bitwise AND operation of the result is 0, odd number of the lowest bit is 1, with 1 of the bit and the result of the operation is 1.

The code is as follows:

. odd{color:red}
. Even{color:yellow} 
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul> 
var i = 0;
var lis = document.getelementsbytagname ("li");
var len = lis.length;
for (; i<len;i++) {
if (i&1) {
lis[i].classname = "even";
} else{
lis[i].classname = "odd";
}

Although modern browsers have done a very good job, but the beast that this is their own code for the quality of a pursuit. And may be a point or two points do not pay attention is not how much performance impact, but from a number of points to optimize, may produce will be qualitative leap ~

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.