Since the release of my MzTreeView1.0 tree control, I have received a lot of feedback. Many netizens have given me a lot of pertinent suggestions and pointed out many bugs and shortcomings in this control, so I am planning to write a new version. Tree, integrating everyone’s suggestions into implementation. I have been writing a new version of the tree these days. The most important thing about the tree control is efficiency. Especially when the number of nodes is large, a slightly less efficient mode will bring down the browser. So for the new version of the tree, my first priority is to improve efficiency. , such as adding support for asynchronous data loading, etc. In addition, I also have an idea that the vertical lines of the tree structure are implemented using a style sheet (background image). The style sheet background image only needs to be loaded once, and now this mode (using Although multiple <img>) images have a caching mechanism, it is still possible to request the server once for each small image, so I thought how good it would be to use a style sheet to achieve this. The code is streamlined, the structure is clear, and the effect is great. Cool, but after nearly a week of testing, my idea failed completely. The reason is that the rendering efficiency of the style sheet is too poor. The new idea could not be realized, and I felt a little frustrated, but I thought I should share the test results with everyone.
Here I will explain the vertical lines in the tree shape. There are ┌ ├ └ │ on the left side of the tree. These vertical lines represent the tree levels. In my version 1.0, I used small pictures piled up one by one. This kind of use The style sheet is implemented using code like <div class="l2"></div>, and the style sheet is responsible for filling in the background image.
#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 fragment of the style that I dynamically generated in the script. I posted it to help with the explanation later. After using the style sheet, it was really streamlined and the generation of each node was fast enough. However, I found that when the number of my tree nodes reached, for example, 300-500 nodes, the efficiency of node generation had no impact, but every time The expansion/shrinking of a node is very slow, taking more than a few seconds or even 10 seconds, and the CPU usage during this period is 100%. To explain, the expansion/contraction of the tree is achieved by setting style.display = none|block of the parent node. My computer configuration is: AMD2800+ 1GDDR400 memory, the configuration is not bad.
My first reaction was: Did using too many <table>s affect efficiency? Because I use a <table> for each node, but I replaced the <table> with <div>, <span>, etc., but there is no improvement in efficiency, which means that the problem of 100% CPU usage is not a problem of HTML tags. , then the remaining problem is the use of style sheets here.
Taking the amount of 500 nodes as an example, there will be about 2,000 small pictures piled up on the left side in 1.0. In this case, there will be a big problem when the browser is set to not cache locally. It takes a lot of time and server resources to load these many small pictures, so I have this new style sheet. The solution is now to use the style sheet method, which means there are about 2,000 places where style sheets are needed to render background images. I tested various situations and compared it with the code of version 1.0 and came to the conclusion that the CPU usage rate is so high. The only reason is the time-consuming rendering. The verification is also very simple. I removed the #mtvroot part on the left side of the style sheet above, which means removing the dependency relationship of the style sheet. The test results found that the efficiency has improved a lot, but the time consumption is still considerable, 3-5 seconds. So much.
In addition, I changed to different browsers, and the test results are also different. The most disgusting one is in IE. For example, if I have 500 child nodes on a certain node, I will close it (CPU 100%, wait 3-5 seconds) , that is, display="none". At this time, if I collapse the parent node of this node (this node has no other sibling nodes, that is, its parent node only has one child node like it), it stands to reason that there is only one node, Collapse should be an immediate thing, but the result is not. The result is CPU 100% for 3-5 seconds. This makes me crazy and depressed. In other words, even if the HTML object is hidden by display="none", its parent When any operation is performed at the level, IE will re-render these hidden objects using style sheets. I really don’t understand what the developers of IE were thinking.
I went to FIREFOX to test it again. When it is folded (display=none), it is instantaneous. I can be sure that FF will no longer consume energy when dealing with hidden objects. Of course, all browsers are the same when expanding: 3-5 seconds of CPU 100%, but FF is slightly faster.
Through the above phenomena, I came to the conclusion: style sheets are not efficient when rendering dynamically; when the parent container detects a state change, it will cause the style sheets of all its descendant objects to be re-rendered; FireFox treats display= noneHidden objects will not re-render but IE will.
So why has this style sheet rendering efficiency problem not been discovered before? Hehe, when you are making web pages, you rarely go to such extremes. There are thousands of background images in a page that require style sheets to render background images. Usually there are only a few places or dozens of places, so you can't feel the efficiency of rendering, nor can you feel the difference between different browsers in this regard. However, when making controls such as trees, you will definitely encounter various extreme problems, such as large data arrays, the number of generated HTML objects, etc. The difference in rendering efficiency is only when I write JS scripts. Just one of the problems encountered. Today I am sharing this test result in the hope that it will be helpful to everyone when writing programs in the future and to consider it when doing design.
Finally, thank you all for your affirmation and support for the control I wrote, thank you!