Javascript: the background rendering efficiency of CSS style sheets

My mztreeview1.0 tree control has been released so far and has received many feedbacks. Many netizens have given me a lot of pertinent suggestions and pointed out many bugs and shortcomings in the control, so I am going to write a new version of the tree and integrate all your suggestions for implementation. I have been writing new trees over the past few days. The most important thing about tree controls is efficiency. Especially when there are a large number of nodes, a slightly less efficient mode will drag the browser down, therefore, I want to improve the efficiency of the new tree version, such as adding support for asynchronous data loading. I also want to use a style sheet (background image) for the tree structure) to achieve this, the style sheet background image only needs to be loaded once, and now this mode (using multiple ) although the image has a cache mechanism, however, I still can request a server for each small image, so I want to use a style sheet to implement what a good situation is. The code is simplified, the structure is clear, and the effect is cool, however, as a result, I tested it for nearly a week. I completely failed this idea because the rendering efficiency of the style sheet is too low. The new idea failed to be realized, and it was a bit frustrating, but I would like to share with you the test results.

Here I want to explain the vertical lines in the tree. The left side of the tree is the vertical lines. These vertical lines represent the tree layers. In my 1.0 version, they are stacked with small images, the style sheet is implemented using the <Div class = "L2"> </div> code. The style sheet fills 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 section of CSS is a piece of style fragment dynamically generated in the script. I pasted it to help you explain it later. After using the style sheet, it is much simpler and every node can be generated quickly. However, I found that when the number of my tree nodes reaches, for example,-nodes, the efficiency of node generation has no effect, but the expansion/contraction of each node is very slow. It takes several seconds or even 10 seconds, and the CPU usage during this period is 100%. Description: The expansion/contraction of the tree type is achieved by setting style. Display = none | block of the parent node. My computer configuration is: amd2800 + 1gddr400 memory, the configuration is not very bad.

My first response is: Is it because too many <Table> statements affect the efficiency? Because each node uses a <Table> but I replace <Table> with <div> and <span>, the efficiency is not improved, this indicates that the CPU usage of 100% is not an issue with HTML tags, so the remaining problem is that style sheets are used here.

For the amount of 500 nodes, there are about 1.0 small images on the left of 2000. In this case, when the browser side is set to local without caching, there will be a big problem. Loading these small images requires a lot of time and server resources, this is why I have a new idea of using style sheets. Now I want to use style sheets to render the background image in about 2000 places. I tested various situations and compared the code of version 1.0 to conclude that the CPU usage rate is so high, the only reason is that this rendering is time-consuming. Verification is also very simple. I removed the # mtvroot part on the left of the style sheet above, that is, removed the dependency between the style sheet. The test results show that the efficiency has improved a lot, however, it still takes a considerable amount of time, with 3-5 seconds.

In addition, I changed different browsers, and the test results were not the same. I was the most disgusting in IE. For example, if I had 500 sub-nodes on a node, I collapsed it (cpu100 %, wait 3-5 seconds), that is, display = "NONE". At this time, if I collapse the parent node of this node (this node does not have other similar nodes, that is, its parent node only has such a sub-node). It is reasonable to say that there is only one node. It should be a real-time task to collapse, but the result is not, the result is 3-5 seconds cpu100 %, this makes me crazy, that is to say, even if the HTML object is hidden by display = "NONE", but when performing any operations on its parent, IE will re-render these hidden objects with style sheets. I really don't understand What ie developers thought at the beginning.

I went to Firefox to test it again. Display = none was instantaneous when it was collapsed. It is certain that FF will not consume any effort to treat hidden objects. Of course, all browsers are the same during expansion: CPU in 3-5 seconds, but FF is a little faster.

Through the above phenomena, I come to the conclusion that the efficiency of style sheets in dynamic rendering is not high; when the parent container discovers that the state changes, it will cause the style table of its child objects to be re-rendered. Firefox will not re-rendered the objects hidden by display = none, While IE will.

Why is the rendering efficiency of this style sheet not discovered before? Hey hey, it's rare for everyone to do this when making webpages. There are thousands of style sheets in a page that need to render the background image. Usually there are a few or dozens of places, so I don't feel the rendering efficiency or the difference between different browsers. However, when making tree-based controls, you will surely encounter various extreme problems, such as arrays of large data volumes and the number of HTML objects generated, the difference in rendering efficiency is just one of the problems I encountered when writing JS scripts. Today, I shared this test result to encourage you to write programs in the future and consider it in design.

Finally, thank you for your recognition and support for the controls I have written. Thank you!