My MzTreeView1.0 tree control published so far, got a lot of feedback, a lot of netizens gave me a lot of pertinent suggestions, also pointed out that the control of many bugs and shortcomings, so I am ready to write a new version of the tree, will everyone's suggestions are integrated into the realization. These days I have been writing a new version of the tree, the most important thing is the efficiency of the tree control, especially when the large node volume, the efficiency of a slightly less than the model will drag the browser, so the new tree I first or improve the efficiency, such as the increase of asynchronous data loading support, and I have another idea, is the tree tree structure vertical line with the style sheet (background map) to achieve, style sheet background image only need to load once, and now this mode (with multiple) picture Although there is a caching mechanism, but still have every small picture to request a server, so I want to use style sheet to achieve how good ah, the code is streamlined, structure and clear , the effect is cool, but the result of my nearly one weeks of testing, my assumption is completely unsuccessful, because the stylesheet rendering efficiency is too poor. The new idea didn't work out and the mood was a little frustrated, but I think we should share the test results.
Here I explain the vertical line in the tree, there are ┌├└│ on the left side of the tree. These vertical bars represent the tree level, and my 1.0 version is stacked with a small picture of a sheet, which is implemented using the style sheet, which is responsible for populating the background map.
#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 piece of style that I generated dynamically in my script, and I post it to help explain later. After using the stylesheet, it was really streamlined, and the generation of each node was fast enough, but I found that when my tree node volume reached, say, 300-500 nodes, the efficiency of node generation did not affect what, but the expansion/contraction of each node is very slow, it takes a few seconds or even 10 seconds, And the CPU occupancy rate for this period is 100%. To illustrate, the expansion/contraction of the tree is achieved by setting the parent node's style.display = None|block. My Computer Configuration is: amd2800+ 1gddr400 memory, configuration is not bad.
My first reaction was: Was it used too much
affect the efficiency? Because I used a single node for each of them.
And so, the efficiency is not improved, the CPU occupancy rate of 100% is not the problem of HTML tags, then the remaining problem is that the style sheet is used here.
In terms of the amount of a 500-node, the left side of 1.0 will probably accumulate 2000 or so small pictures. This situation in the browser-side settings are not cached at the time there will be a big problem, to load these small pictures need to consume a lot of time and server resources, so I will have this new style sheet to solve the idea, now replaced by the style sheet method, that is, about 2000 places need to use a stylesheet to render the background map. I tested the situation, and then the 1.0 version of the code came to the conclusion that the CPU point rate is so high, the only reason for this is only the time-consuming rendering. Validation is also very simple, I put the above style sheet on the left #mtvroot this part of the removal, that is, to remove the dependency of the style sheet, the results of the test found that the efficiency improved a lot, but the time is still considerable, there are more than 3-5 seconds.
In addition I changed a different browser, the results of the test is not the same, the most disgusting in IE, for example, I have 500 nodes in a node, I put it (cpu100%, wait 3-5 seconds), that is display= "none", At this time if I go to the node of the parent node (the node has no other sibling node, that is, its parent node only such a child node), it is supposed to be only one node, the end should be instantaneous, but the result is not, the result is 3-5 seconds of cpu100%, this makes me mad depressed, That is to say, even if the HTML object is display= "None" hidden, but to its parent to do anything, ie will be hidden objects with the stylesheet re-rendered again, really do not understand what the developers of IE originally thought.
I went to the Firefox test again, at the time of the collection (Display=none) is instantaneous, to be sure, FF treats the object that is hidden no longer consumes energy. Of course all browsers are the same when unfolded: 3-5 seconds of cpu100%, but FF is a little faster.
Through these phenomena, I conclude that the stylesheet is not efficient when it is dynamically rendered, that it will cause it when the parent container discovers the change of state, so that the style sheet of the descendant object is re-rendered; FireFox treats objects hidden by display=none from being re-rendered and IE will.
So why has this stylesheet's rendering efficiency problem not been discovered before? Hey, when we do the Web page rare will do this extreme time, a page there are thousands of need to render the background map style sheet. Usually there are a few places or dozens of places, so I can not feel the efficiency of rendering, also do not feel the difference between different browsers. But in the tree of these controls must encounter a variety of extreme problems, such as large data array, the number of HTML objects generated, and so on, like the efficiency of this rendering is only one of the problems I encountered when writing JS script. Today I share this test results are hoping to write the program when you have 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!
