js optimization works for IE6.0 (detailed arrangement)_javascript skills

js optimization works for IE6.0. Let’s summarize the following points:

1. String splicing: Use array splicing

1. String splicing

String splicing is often encountered in our development, so I put it first. We are often accustomed to directly splicing strings using =. In fact, this splicing method is very inefficient. We A clever way to concatenate strings is to use the join method of arrays.

We will find that the difference is quite obvious under IE6. In fact, this situation is also very obvious in higher versions of IE, but there is not much difference under Firefox. On the contrary, the relative efficiency of the second type is It's even lower, but the difference is only about 2ms, and Chrome is similar to Firefox. In addition, by the way, when we add elements to the array, many people like to use the native method of push. In fact, it is faster to directly use arr[i] or arr[arr.length], which is about 10000. In the case of multiple loops, there will be a difference of more than ten milliseconds under IE browser.

2. for loop

The for loop is a situation we often encounter. Let’s take a look at the following example:

As can be seen from the above table, the difference is very obvious under IE6.0, while there is almost no difference under Firefox and Chrome. The reason why this happens under IE6.0 is mainly because of the for loop During execution, the first case will calculate the length every time, while the second case will calculate the length at the beginning and save it to a variable, so its execution efficiency is higher, so in our When using a for loop, especially if we need to calculate the length, we should start saving it into a variable. But there is not such an obvious difference as long as the length is obtained. If we only operate an array and obtain the length of an array, then the two ways of writing are actually similar. Let’s look at the following example:

As can be seen from the above table, if it is just an array, we can see that the two writing methods are almost the same. In fact, if we increase the loop to 100,000 times, the difference is only a few milliseconds, so In the case of arrays, I think it's all the same. Regarding the optimization of the for loop, some people have also put forward many points. Some people think that using -=1, or looping from large to small, etc., I think it is completely unnecessary. These optimizations are often not reflected at all in actual situations. In a word, it is only a small change at the computer level, but what it brings us is that the readability of the code is greatly reduced, so it is really not worth the loss.

3. Reduce page redrawing

Although reducing page redrawing is not essentially an optimization of JS itself, it is often caused by JS, and redrawing often seriously affects page performance, so it is completely necessary to take it out. Let’s look at the following example:

var str = "

This is a test string

This is a test string

This is a test string

This is a test String

This is a test string

This is a test string

This is a test string

This is a test string

This is a test string

This is a test string

This is a test string

";
//Inefficient
function func1(){
var obj = document.getElementById("demo");
var start = new Date().getTime();
for(var i = 0; i < 100; i ){
obj.innerHTML = str i;
}
var end = new Date().getTime();
alert("Time" (end - start) "milliseconds");
}
//efficiency High
function func2(){
var obj = document.getElementById("demo");
var start = new Date().getTime();
var arr = [];
for(var i = 0; i < 100; i ){
arr[i] = str i;
}
obj.innerHTML = arr.join("");
var end = new Date().getTime();
alert("Time taken" (end - start) " milliseconds");
}

In the example, I just use A loop of 100 times is used, because if a loop of 10,000 times is used, the browser will basically freeze. But even if it is a loop of 100 times, let's take a look at the execution results below.

As you can see, this is an amazing result. After only 100 cycles, no matter what browser it is under, there is such a big difference. In addition, we also found that here, IE6 The execution efficiency is actually much better than that of Firefox. It can be seen that Firefox has not done any optimization in page redrawing. It should also be noted here that it is not just innerHTML that generally affects page redrawing. Changing the style, position, etc. of elements will trigger page redrawing, so you must pay attention to this in normal times.

4. Reduce the number of lookups in the scope chain

We know that when js code is executed, if it needs to access a variable or a function, it needs to traverse the scope chain of the current execution environment, and the traversal starts from the front end of this scope chain level by level. Traverse backward until the global execution environment, so there is often a situation here, that is, if we need to frequently access the variable objects of the global environment, we must traverse level by level in the current scope chain every time. This is obviously time-consuming. Let’s look at the following example:

Copy the code The code is as follows:

function func1(){
var start = new Date().getTime();
for(var i = 0; i < 10000; i ){
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
}
var end = new Date().getTime();
alert("用时 " (end - start) " 毫秒");
}
function func2(){
var start = new Date().getTime();
var doc = document;
for(var i = 0; i < 10000; i ){
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
}
var end = new Date().getTime();
alert("用时 " (end - start) " 毫秒");
}

上面代码中，第二种情况是先把全局对象的变量放到函数里面先保存下来，然后直接访问这个变量，而第一种情况是每次都遍历作用域链，直到全局环境，我们看到第二种情况实际上只遍历了一次，而第一种情况却是每次都遍历了，所以我们看看其执行结果：

从上表中可以看出，其在IE6下差别还是非常明显的，而且这种差别在多级作用域链和多个全局变量的情况下还会表现的非常明显。

5、避免双重解释

双重解释的情况也是我们经常会碰到的，有的时候我们没怎么考虑到这种情况会影响到效率，双重解释一般在我们使用eval、new Function和setTimeout等情况下会遇到，我们看看下面的例子：

复制代码 代码如下:

var sum, num1 = 1, num2 = 2;
function func1(){
var start = new Date().getTime();
for(var i = 0; i < 10000; i ){
var func = new Function(" sum =num1;num1 =num2;num2 ;");
func();
}
var end = new Date().getTime();
alert("time" (end - start) " milliseconds");
}

function func2(){
var start = new Date().getTime();
for(var i = 0; i < 10000; i ){
sum =num1;
num1 =num2;
num2 ;
}
var end = new Date().getTime();
alert("Time " (end - start) " milliseconds");
}

In the first case we use new Function for double interpretation, and in the second case we avoid double interpretation. Take a look at the performance under different browsers:

As you can see, in all browsers, double interpretation has a lot of overhead, so in practice, double interpretation should be avoided as much as possible.

Thanks to "SeaSunK" for correcting the error in the fourth point of the test report. It has now been corrected. As for the last point, func1 is initialized every time, which is not comparable, so I changed it to eval, and found that it still has an impact under IE6.0, and under Firefox, the impact of using eval on efficiency is even greater. Under Firefox, if you loop 10,000 times, it will take more than ten seconds, so I changed the loop to 1,000 times. Look at the code and reports.

Copy code The code is as follows:

var sum, num1 = 1, num2 = 2;
function func1(){
var start = new Date().getTime();
for(var i = 0; i < 1000; i ){
eval("sum =num1; num1 =num2;num2 ;");
}
var end = new Date().getTime();
alert("Time" (end - start) " milliseconds");
}
function func2(){
var start = new Date().getTime();
for(var i = 0; i < 1000; i ){
sum =num1;
num1 =num2;
num2 ;
}
var end = new Date().getTime();
alert("Time" (end - start) "milliseconds");
}