DHTML performance optimization to improve custom drop-down box controls

Click here to download the source code

Author: Truly

First, we will introduceCodeTo implement a custom style drop-down box in my project, use the custom drop-down arrow and custom color border to replace the system default select. To implement this function, you must use table simulation. Then I use a js method to implement this simulation process and encapsulate it as the initselect (ID, width, height) method.

It also provides setselect (ID, index) for selecting an option and other methods. All functions are at least compatible with IE and Firefox.

Because the original write is relatively casual, after all the code is completed, it is found that the performance is quite low. The three drop-down boxes like the date of birth take several hundred millimeters.

I will perform the whole optimization process three times.

Step 1

One of the optimization skills is to optimize the loop body first. I optimized the bad practices in the loop body, for example

For (VAR I = 0; I <SEL. Options. length; I ++)

--"

For (VAR I = 0, j = A. length; I <j; I ++)

Sel. Options [I]. value;

--"

A [I]. value;

This step generates code INitselect2See S. js in the package.

Step 2

Through a small change above, we can save some time, but there will be no major changes, which is far from what we want to achieve. Now, let's calm down and think about how to modify the logic.

Since we use the initselect method to create tr through createelement and add it to the table's rows collection, the efficiency is poor because it takes time to create and parse HTML. Below we will improve the efficiency to the array method.

VaR arr = new array (A. Length );
For (VAR I = 0, j = A. length; I <j; I ++)
{
Arr [I] = "<tr> <TD Title = '" + A [I]. text + "'value = '" + A [I]. value + "'>" + A [I]. text + "</TD> </tr> ";
}
Ocell. innerhtml = "<Div id = \" O "+ ID +" \ "class = \" select \ "onselectstart = \" Return false \ "onmouseover = \" hoveroptions (Event); \ "onmouseout = \" outoptions (event); \ "onclick = \" clickoptions (event, 'o "+ ID +" '); \ "> \
<Table cellsapcing = \ "0 \" cellspadding = \ "3 \" border = \ "0 \" width = 100%> \
<Tbody> "+ arr. Join () +" </tbody> \
</Table> \
</Div> ";

In this way, Dom only needs to parse the HTML once and achieves good results. The speed is improved by three times, from MS to dozens of milliseconds.

Code generated in this stepInitselect3

Step 3

So can we further optimize it? The answer is yes. The focus of the previous two steps is the loop body. Now we should focus on the overall situation. Because innerhtml is still used many times in the whole method, this is a very slow operation, microsoft strongly recommends innertext to replace innerhtml as much as possible, but it is obviously not suitable here. It must be noted that innertext is not supported by Firefox because it does not belong to W3C standards.

Some of the preceding DHTML techniques have pointed out that insertadjacentelement is better than insertadjacenthtml, but this time we decided to abandon insertadjacentelement and use insertadjacenthtml, in this way, we can reduce the HTML resolution to one time, so we use one insertadjacenthtml for multiple nodes, instead of adding insertadjacentelement with multiple innerhtml values. After these adjustments, our code was accelerated again. Although the effect was not very obvious, it still improved by more than 10%.

Code generated in this stepInitselect4

Reference time:
Initselecte 313
Initselect2297
Initselect3 140
Initselect4 94

Postscript

In fact, this method was available at the initial stage of project development.
For (VAR I = 0; I <SEL. Options. length; I ++)
{
TD. innerhtml + = "<tr> <TD>" + SEL. Options [I]. Text + "</TD> </tr> ";
}
As a result, at that time, a 50-item select would require a loading time of more than Ms on my 3g cpu. In this optimization, I overwrote this method and optimized it step by step, hope to give DHTML developers some inspiration.

If zstack uses this custom drop-down box, only select.jsand s.css are required. For the optimization demonstration, see the files in demo1 (the code is incomplete and only the demo is used)

Full text