Background rendering efficiency of CSS style sheets_Experience exchange

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 ) 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. There are ┌ ├ └ │ on the left side of the tree. These vertical lines represent the tree levels. In my version 1.0, I use small pictures stacked up one by one. , and this type of use of style sheets uses

 这种代码来实现的，样式表负责填充背景图。

    #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}

    上面这段CSS是我在脚本里动态生成的一段样式的片段，我把它贴上来，有助于后面的讲解。运用样式表之后，果真精简了许多，每个节点的生成也够快，但我发现，当我的树节点量达到，比如说300-500个节点之后，节点生成的效率没有影响什么，但每个节点的展开/收缩很慢很慢，需要几秒钟以上甚至10秒，且这个期间的CPU占用率是100％。说明一下，树型的展开/收缩是设置父节点的 style.display = none|block 来实现的。我的电脑配置是：AMD2800+ 1GDDR400内存，配置不太差的。

    我首先的反应是：是不是用了太多的影响了效率？因为我每一个节点都用了一个，但是我把换成了