CSS 스타일 시트의 배경 렌더링 효율성_경험 교환

MzTreeView1.0 트리 컨트롤이 출시된 이후로 많은 피드백을 받았고 많은 네티즌들이 이 컨트롤에 대한 많은 관련 제안과 많은 버그와 단점을 지적했기 때문에 새 버전을 작성할 계획입니다. Tree는 모든 사람의 제안을 구현에 통합합니다. 요즘 새 버전의 트리를 작성하고 있는데 트리 제어에서 가장 중요한 것은 효율성입니다. 특히 노드 수가 많은 경우에는 약간 덜 효율적인 모드가 브라우저를 다운시키게 됩니다. 트리에서는 비동기 데이터 로딩에 대한 지원을 추가하는 등 효율성을 높이는 것이 최우선 과제입니다. 또한 트리 구조의 수직선을 스타일 시트(배경 이미지)를 사용하여 구현하는 아이디어도 있습니다. 스타일 시트 배경 이미지는 한 번만 로드하면 되며, 이제 이 모드(여러 사용) 이미지에 캐싱 메커니즘이 있지만 여전히 각 작은 이미지에 대해 한 번씩 서버에 요청할 수 있으므로 얼마나 좋다고 생각했습니다. 이를 달성하기 위해 스타일 시트를 사용하는 것입니다. 코드가 간소화되고 구조가 명확하며 효과가 훌륭하지만 거의 일주일 동안 테스트한 결과 렌더링 효율성이 완전히 실패했습니다. 스타일 시트가 너무 열악합니다. 새로운 아이디어는 실현되지 못했고 약간의 답답함도 느꼈지만 테스트 결과를 모두와 공유해야겠다는 생각이 들었습니다.

여기서는 트리의 왼쪽에 ┌ ├ └ │가 있는 수직선에 대해 설명하겠습니다. 이 수직선은 내 버전 1.0에서는 작은 그림을 쌓아서 사용합니다. , 이러한 유형의 스타일 시트 사용은

을 사용합니다. 这种代码来实现的，样式表负责填充背景图。

    #mtvroot div td{width:20px;height:20px;}
    #mtvroot .l0{배경:url(line0.gif ) 반복 없음 센터}
    #mtvroot .l1{배경:url(line1.gif) 반복 없음 센터}
    #mtvroot .l2{배경:url(line2.gif) 반복 없음 센터}
#mtvroot .l3{배경:url(line3.gif) 반복 없음 센터}
    #mtvroot .l4{배경:url(line4.gif) 반복 없음 센터}
    #mtvroot .ll{배경:url (line5.gif) 반복 없음 센터}
    #mtvroot .pm0{배경:url(plus0.gif) 반복 없음 센터}
    #mtvroot .pm1{배경:url(plus1.gif) 반복 없음 센터}
    #mtvroot .pm2{배경:url(plus2.gif) 반복 없음 센터}
    #mtvroot .pm3{배경:url(plus3.gif) 반복 없음 센터}
    #mtvroot . 확장 .pm0{배경:url(minus0.gif) 반복 없음 센터}
    #mtvroot .expand .pm1{배경:url(minus1.gif) 반복 없음 센터}
    #mtvroot .expand .pm2{ background:url(minus2.gif) 반복 없음 센터}
    #mtvroot .expand .pm3{배경:url(minus3.gif) 반복 없음 센터}

    상면这段CSS是我재脚本里动态生成成一段样式讵, 我把它贴上来, 多助于后side讲解.运用样式表之后, 果真精精简了许多, 每个节点的生也够快，但我发现，当我的树节点weight达到，比如说300-500个节点之后，节点生成成效率没有影响什么，但每个节点的节点的要开/收缩很慢很慢，需要几秒钟以上甚至10秒，且这个期间的CPU·용率是100%。 대단해요.

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

、等

    以一个500节点량来说吧，1.0里左边大概要堆积2000个左右의 작은 사진. 작은 그림은 더 이상 의미가 없습니다. 나는 새로운 앱을 사용하고 있습니다.测试了各种情况，再对比1.0 특별한 혁신적인 유형의 CPU는 CPU의 사용에 있어 매우 높습니다.左边 #mtvroot 这part分去掉，也就是去掉样式表的依托关系，测试的结果发现效率改善了很多，但耗时依然是可观的，多多 .

    다른 사람과 같지 않은 浏览器,测试的结果也不太一样，inIE里最为恶心，比如说我某个节点有500子节点，我将它收起（CPU100%，等待3-5秒），也就是display="none"，这时候若我去收起这个节点的父节点Illuminati에는 个节点,收起应该是即时的事，但结果不然，结果又是3-5秒的 CPU100%，这个让我狂郁闷，也就是说即使HTML对象被display="none"隐藏掉了，但是对它的父级进行任何操작동 时候，IE会对这些被隐藏的对象用样式表 重新渲染一遍，真是搞不懂IE 开发者当初是怎么想的。

    저는 FIREFOX리测试了一下，收起的时候(display= 없음) 是瞬间的, 可以肯定, FF는 对待被隐藏的对象不会再消耗精力.稍微要快些。

    통상적인 화면에서 우리는 더 많은 정보를 얻을 수 있습니다.候会引起它的所以子孙对象 tive 样式表 重 新渲染 ; FireFox 对待被display=none은 새로운 기능을 제공하지 않습니다.

그러면 왜 이 스타일 시트의 렌더링 효율성 문제가 이전에는 발견되지 않았습니까? 헤헤, 웹 페이지를 만들 때 모든 사람이 이렇게 극단적인 경우는 드뭅니다. 배경 이미지를 렌더링하기 위해 스타일 시트가 필요한 페이지에는 수천 개의 배경 이미지가 있습니다. 보통은 몇 군데, 수십 군데밖에 없어서 렌더링의 효율성을 느낄 수 없고, 이런 점에서도 브라우저별 차이를 느낄 수 없습니다. 그러나 트리와 같은 컨트롤을 만들 때 큰 데이터 배열, 생성된 HTML 개체 수 등과 같은 다양한 극단적인 문제에 직면하게 됩니다. 렌더링 효율성의 차이는 JS 스크립트를 작성할 때만 나타나는 문제 중 하나입니다. 마주쳤다. 오늘 이 테스트 결과가 앞으로 모든 분들이 프로그램을 작성하실 때 참고하시고, 디자인하실 때 참고하시길 바라면서 공유합니다.

마지막으로, 제가 작성한 컨트롤에 대한 여러분의 긍정과 지지에 감사드립니다!