如何为html页面呈现多级css？

这种情况始于我们的项目，该项目不是在PC上的Chrome上启动，而是在我们的客户公司运营的电视机顶盒上的视频云流媒体服务上启动

按照他们的解释，流媒体服务呈现了一个由我们制作并发送给他们的html/javascript网页（称为应用程序）组成的应用程序

他们说他们的流媒体服务通过以15或30 fps的速度打印web应用程序的结果屏幕来显示应用程序

问题：在15 fps内，应用程序显示正常，但在30 fps内，当页面被替换、新渲染或弹出窗口在应用程序中打开时，应用程序显示墨水扩散，他们坚持应用程序应以30 fps的速度显示以启动。

荒谬的是，他们说“原因在于我们的应用程序，因为大多数html标记引用或加载了样式表中的许多（不完全是，但可能超过10倍）css属性。这导致了传播问题。每个标记上加载css的数量应该少于10。”

我们猜想，他们认为加载css的算法是通过加载和打印（呈现）任何标记的每个级别的多级css属性来运行的

所以，检查他们的网站，我试着制作一些html标签，多次加载css级别太高（1000次）

就像

<div class="sub1">
 <div class="sub2"> 
  ......
   <div class="sub1000"> Is This Text Changing at lest once?
   </div> 
  ......
</div>

当然，正如大家所料，在加载html应用程序时，没有发现任何重新加载和传播现象

你可以在上面的网站查看我的测试结果

在这种情况下，
1） 当标记引用由css继承或css规则的多点指向引起的多个css属性时，如何为html标记呈现css？ 每个标记是否为自己的css属性呈现每个css属性？ 或者，这是由css规则中的系统决定的最终css属性吗？

有人能告诉我内部算法吗？
2） 如果第一个问题在像Chrome这样的普通浏览器中无关紧要，那么云流媒体服务在这种情况下重要吗？

---

补充：如果有任何相关的研究或参考，请留下它们，以证明我们的客户公司css加载不是问题。Thx.

我是可嵌入HTML/CSS呈现引擎的作者。因此，我们有关于它是如何呈现的内部信息

考虑到您的标记和样式：

该文本将只绘制一次

这些CSS规则：

.sub1 { font-size: 20px; color: blue; }
.sub2 { font-size: 50px; color: green; }

不会对渲染产生任何影响，因为它们应用于没有直接文本节点的元素。只有这个

.sub1000 { font-size: 100px; color: brown; }

将影响渲染，因为它仅定义您在文档中看到的图示符的颜色和大小

但是！如果要在所有1000个元素上定义背景：

.sub1 { font-size: 20px; background-color: blue; }
.sub2 { font-size: 50px; background-color: green; }
...
.sub1000 { font-size: 100px; background-color: white; }

然后它们都会被拉到引擎盖下。因为最上面的元素（这里）有白色背景，覆盖了整个元素堆，所以你不会看到下面的彩虹。因此，负责任地使用它

对于纯色背景色，您可能不会注意到太多的减速，但许多半透明层可能会造成一些明显的延迟

如果渲染引擎使用GPU渲染（就像Sciter那样），即使这样也可以。但在某些情况下，当渲染由CPU完成时，您会看到速度减慢。 如果他们说“打印”（我怀疑是WM_PRINTCLIENT），我怀疑这就是你的情况

如果这两层使用相同的GPU后端，则可以获得最佳结果

例如，当Sciter将HTML/CSS直接渲染到DirectX 3D场景中时：

顺便说一句，这里是另一个屏幕广播，显示了3D场景中HTML/CSS内部的

渲染：

---

至于你的第一个问题，对于任何元素，更具体的css规则将比其他通用css规则具有最高优先级。 检查这个--

同时检查我创建的小提琴>>

根据您的要求，只是为了演示，我希望它能按照您的需要工作

HTML:

 <div class="sub1">yeah
 <div class="sub2"> cool
   <div class="sub1000"> Is This Text Changing at lest once?
   <div class="sub1001">
   helo world
   </div>
     </div>
</div>
</div>

---

希望这有帮助：）

我提供的第一个链接是w3.org，您可以将其作为您的客户公司的参考：）这些“多级css属性”到底是什么？@c-smile我的意思是指由许多父标记引导的多个css属性。我的解释与程序员使用的字眼不符，对此表示抱歉。希望被理解……”“由父标签指示的属性”也不清楚。你是说“继承的财产”吗？如果“是”，则继承本身不会创建太多的负载。如果DOM树的深度太深，确实可能会导致问题。@c-smile“是”。这种写入意味着多个继承的css属性。那么，如果这个案例不是由继承引起的，而是直接引用“.sub1000{width:20px；}.sub1000{width:50px；}.sub1000{width:100px；}”之类的内容，以多个css方向开始，该怎么办呢。。。。。。1000倍？TS示例（您的示例中的an）中的所有规则都具有相同的特殊性。所以这里没有“更具体的css规则”。这只是一堆元素-层。哦，是的，但我只是说css在这个层次结构中工作，对不起我的不好：）谢谢你的建议，我不认为墨水扩散问题与我们的标签的多个css属性无关，Chrome Developer工具显示，至少在PC浏览器中，大多数标签都有10多个css规则。不幸的是，没有机会了解他们的云流引擎，以检查渲染是否如您所述由CPU完成。但有一件事我们听得很清楚，那就是他们使用“印刷术”。

 <div class="sub1">yeah
 <div class="sub2"> cool
   <div class="sub1000"> Is This Text Changing at lest once?
   <div class="sub1001">
   helo world
   </div>
     </div>
</div>
</div>

.sub1 { font-size: 20px; color: blue; background-color:black}
.sub2 { font-size: 50px; color: green; background-color:white}

.sub1000{ font-size: 100px; color: black;background-color:red}
.sub1001{font-size: 10px; color:red}