JavaScript speed: The rendering efficiency of CSS style sheets

css| style Sheet

My MzTreeView1.0 tree control released so far, has received a lot of feedback, many netizens have given me a lot of pertinent suggestions, but also pointed out that the control of many bugs and deficiencies, so I am ready to write a new version of the tree, the recommendations are integrated into the implementation. I've been writing a new version of the tree these days, the most important thing is the efficiency of the tree control, especially the large nodes, the efficiency of a slightly close mode will wear down the browser, so the new version of the tree I first or increase efficiency, such as increasing the support of asynchronous data loading, in addition, I have a vision, Is that the tree-shaped vertical bar is implemented using style sheets (background images), style sheet background pictures only need to load once, and now this mode (with more than ) picture Although there is a caching mechanism, but still have a small picture can request a server, so I want to use the style sheet to achieve how good it is, The code is streamlined, structurally clear, and cool, but as a result of my nearly one-week test, my vision has completely failed because of the poor rendering efficiency of the stylesheet. The new idea didn't work out, and I felt a little frustrated, but I think I should let you share the test results.

Here I explain the vertical bar in the tree, the left side of the tree has ┌├└│ these vertical lines represent the tree level, my 1.0 version is a small picture of the accumulation, and this use of style sheet is <div class= "L2" ></div> this code to achieve , the style sheet is responsible for populating the background chart.

#mtvroot div td{width:20px;height:20px;}
#mtvroot. L0{background:url (line0.gif) no-repeat Center}
#mtvroot. L1{background:url (line1.gif) no-repeat Center}
#mtvroot. L2{background:url (line2.gif) no-repeat Center}
#mtvroot. L3{background:url (line3.gif) no-repeat Center}
#mtvroot. L4{background:url (line4.gif) no-repeat Center}
#mtvroot. Ll{background:url (line5.gif) no-repeat Center}
#mtvroot. Pm0{background:url (plus0.gif) no-repeat Center}
#mtvroot. Pm1{background:url (plus1.gif) no-repeat Center}
#mtvroot. Pm2{background:url (plus2.gif) no-repeat Center}
#mtvroot. Pm3{background:url (plus3.gif) no-repeat Center}
#mtvroot. Expand. Pm0{background:url (minus0.gif) no-repeat Center}
#mtvroot. Expand. Pm1{background:url (minus1.gif) no-repeat Center}
#mtvroot. Expand. Pm2{background:url (minus2.gif) no-repeat Center}
#mtvroot. Expand. Pm3{background:url (minus3.gif) no-repeat Center}

The above CSS is a section of a pattern that I dynamically generated in my script, and I post it to help explain it later. After using the style sheet, really streamlined a lot, the generation of each node is fast enough, but I found that when my tree nodes reached, such as 300-500 nodes, the efficiency of the node generation does not affect anything, but each node expansion/contraction is very slow, it takes more than a few seconds or even 10 seconds, And the CPU occupancy rate for this period is 100%. To illustrate, the expansion/contraction of a tree is implemented by setting the parent node's style.display = None|block. My Computer Configuration is: amd2800+ 1gddr400 memory, the configuration is not very bad.

My first reaction is: Is it too much <table> that has affected efficiency? Because I have used a <table> for each node, but I replaced <table> with <div>, <span>, and so on, there is no improvement in efficiency, which indicates that the problem of this CPU occupancy rate 100% is not the problem of HTML tag , the remaining problem is that the style sheet is used here.

For a 500-node amount, 1.0-mile left is about to accumulate about 2000 small pictures. This situation can be problematic when the browser-side settings are not cached locally. It takes a lot of time and server resources to load these many small pictures, so I have this new idea of using style sheets, and now it's a stylesheet, which is about 2000 places that need a stylesheet to render the background image. I tested a variety of situations, and then the 1.0 version of the code came to the conclusion that the CPU's point rate is so high, the only reason is that this rendering is time-consuming. Verification is also very simple, I put the top of the style sheet to the left #mtvroot this part, that is, to remove the dependency on the stylesheet, the results of the test found that the efficiency improved a lot, but the time is still considerable, more than 3-5 seconds.

In addition, I changed a different browser, the results of the test is not the same, in IE, the most disgusting, for example, I have 500 children in a node, I put it away (cpu100%, wait 3-5 seconds), that is, display= "None", This time if I go to the parent node of this node (this node has no other sibling nodes, that is, its parent node has only one child node, logically speaking only a node, it should be the immediate thing, but the result is not, the result is 3-5 seconds of cpu100%, this makes me mad depressed, That is, even if the HTML object is display= "None" hidden, but for its parent to do anything, ie will be the hidden objects in the style sheet again, really do not understand what IE developers were thinking.

I went to the Firefox test again, in the back of the time (Display=none) is instantaneous, you can be sure that the FF treatment of hidden objects will not consume energy. Of course all browsers are the same at the start: 3-5 seconds of cpu100%, but FF is a little faster.

Through these phenomena I have come to the conclusion that the stylesheet is not efficient in dynamic rendering, and that the parent container will cause its descendant object's stylesheet to be rendered when the state changes, and that the FireFox treatment of objects hidden by Display=none will not be rendered again and IE will.

So why has the rendering efficiency of this style sheet never been discovered before? Hey, when you do the Web page is rare to do this extreme time, a page has thousands of need style sheet rendering background image. It's usually just a few places or dozens of places, so it doesn't feel like the efficiency of the rendering, and it doesn't feel like the difference between browsers. But when you do the control of the tree will encounter a variety of extreme problems, such as the large number of data arrays, the number of HTML objects generated, and so on, such as the efficiency of the rendering of the difference is only I write JS script encountered one of the problems. Today, I share this test results is the hope for everyone to write a program in the time to borrow a recommendation, in the design of the time to consider.

Finally thank you for the control I wrote the affirmation and support, thank you!