Question

这种情况从我们的项目开始，该项目不是在PC上的Chrome中启动，而是在我们的客户公司运营的Tv Settop上的视频云流服务上启动。

根据他们的解释，流媒体服务呈现由html / javascript网页（称为应用程序）组成的应用程序，我们已经制作并发送给他们。

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

问题：在15 fps的应用程序显示中没问题，但在30 fps时，应用程序会显示类似墨水传播的内容，当更换页面，在应用程序中打开新渲染或弹出窗口时，他们坚持认为应该以30 fps显示应用程序以启动。

荒谬地，他们说＆＃34;原因在我们的应用程序中，因为大多数html标签引用或加载样式表中的许多（不完全，但可能超过10次）css属性。这导致了传播问题。每个标签上的加载css数应低于10.＆＃34;

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

所以，检查他们的坚持，我已经尝试制作一些多次加载过多css级别（1000次）的html标签。

就像

一样

#include <iostream>
#include <vector>
#include <stdexcept>
#include <iomanip>
#include <cstdlib>
#include <array>
#include "problem2.h"

using namespace std;

int binarySearch(int array[], int input);
void selectSort(int arr[], int n);

int problem2() {
    srand(time(0));         // generate seed based on current system time

    int rand[20];
    int result;
    int input = 1;


    cout << "Enter a number to search for: ";
    cin >> input;

    cout << "testset ";

    for (int z = 0; z < 19; z++) {
        rand[z] = random() % 70;
        cout << rand[15];
    }


    selectSort(rand, 20);


    for (int t = 0; t < 20; t++) {
        //cout << random1D[z];
        }
    result = binarySearch(rand, input);
    //cout << result;

    return 0;
    }

int binarySearch(int arr[], int a) {
    int high = 19;
    int middle =  19/2;
    int low = 0;

    while (arr[middle] != a && low<= high) {
        if (arr[middle] > a) {
            high = middle - 1;
        } else {
            low = middle - 1;
        }

        if (low > high) {

        }
    }
    return middle;
}

void selectSort(int arr[], int n) {
    int min, temp;

    for (int i = 0; i < n-1; i++) {
        min = i;

        for (int j = i + 1; j < n; j++) {
            if (arr[j] < arr[min])
                   min = j;
        }
        if (min != i) {
            temp = arr[i];
            arr[i] = arr[min];
            arr[min] = temp;
        }
    }
}

.css：

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

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

您可以在https://jsfiddle.net/MaggiePhalk/ex30xb6k/7/

上查看我的测试结果

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

谁能让我知道内部算法？
2）如果第一个问题与Chrome之类的常规浏览器无关，那么云流媒体服务是否与此案件有关？

补充：如果有任何研究或推荐相关，请留下他们，以证明我们的客户公司css加载不是问题。 THX。

Answer 1

我是Sciter engine的作者，它是一个可嵌入的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完成时，您会看到减速。如果他们说＆＃34;打印＆＃34;我怀疑这是你的情况。（我怀疑是WM_PRINTCLIENT）。

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

就像这里一样，当Sciter将HTML / CSS直接渲染到DirectX 3D场景时：http://sciter.com/sciter-and-directx/

顺便说一下，另一个截屏视频显示了3D场景中HTML / CSS内的<video>呈现：

https://www.youtube.com/watch?v=6nuDkwJwUuY

Answer 2

至于你的第一个问题，对于任何元素，更具体的css规则将优先于其他generalize css规则。检查一下 -

check here

还要检查这个小提琴＆gt;＆gt;我创建了this fiddle

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

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>

CSS：

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

希望这有助于：）

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

2 个答案: