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内存，配置不太差的。

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

、等，效率没有什么改善，说明这个CPU占用率100％的问题不是HTML标签的问题，那么剩下来的问题就是这里使用了样式表。

    以一个500节点的量来说吧，1.0里左边大概要堆积2000个左右的小图片。这种情况在浏览器端设置本地不缓存的时候会存在很大的问题，要加载这些多的小图片需要消耗不少的时间和服务器资源，所以我才会有这种新的用样式表来解决的想法，现在换成样式表法，也就是大概有2000个地方需要用样式表来渲染出背景图。我测试了各种情况，再对比1.0版的代码得出的结论是：CPU的点用率如此之高，唯一的原因也就只有这种渲染的耗时了。验证也非常简单，我把上面的样式表的左边 #mtvroot 这部分去掉，也就是去掉样式表的依托关系，测试的结果发现效率改善了很多，但耗时依然是可观的，有3-5秒之多。

    另外我换了不同的浏览器，测试的结果也不太一样，在IE里最为恶心，比如说我在某个节点有500子节点，我将它收起（CPU100％，等待3-5秒），也就是display="none"，这时候若我去收起这个节点的父节点（这个节点没有其它的同级节点，即它的父节点只有它这么一个子节点），照理说只有一个节点，收起应该是即时的事，但结果不然，结果又是3-5秒的CPU100％，这个让我狂郁闷，也就是说即使HTML对象被display="none"隐藏掉了，但是对它的父级进行任何操作的时候，IE会对这些被隐藏的对象用样式表重新渲染一遍，真是搞不懂IE的开发者当初是怎么想的。

    我又到FIREFOX里测试了一下，在收起的时候(display=none)是瞬间的，可以肯定，FF对待被隐藏的对象不会再消耗精力。当然展开的时候所有的浏览器都一样：3-5秒的CPU100％，不过FF稍微要快些。

    通过上面的这些现象我得出这么一个结论：样式表在动态渲染的时候效率并不高；在父容器发现状态变化的时候会引起它的所以子孙对象的样式表重新渲染；FireFox 对待被display=none隐藏的对象不会重新渲染而IE会。

So why has the rendering efficiency problem of this style sheet never been discovered before? Hehe, it is rare for everyone to go to such an extreme when making web pages. 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 the efficiency of rendering cannot be felt, and the difference between different browsers in this regard cannot be felt. 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!