How is multiple-level css rendered for html pages?

Question

This situation starts from our project which is launching not in Chrome on PC, but on Video cloud streaming service on Tv Settop operated by our customer company.

Following their explanation, the streaming service renders an application made of html/javascript web pages(called an app) which we've made and sent to them.

They said their streaming service displays the application by printing the result screens of our web application by 15 or 30 fps.

Issue: In 15 fps the app displaying are okay, but in 30 fps, the app shows something like ink-spreading when pages are replaced, newly rendered or popups are opened in the app, and they insist they should displays the app by 30 fps for launching.

Absurdly, they say "the cause is in our app because most of the html tags refer or load many(not quite, but maybe over 10 times) css properties from stylesheet. This causes the spreading issue. the number of loading css on each tag should be lower than 10."

We guess they think the algorithm of loading css is run by loading and printing(rendering) multiple level of css properties at each level for any tag.

So, Checking into their insists, I've tried making some html tags of multiple loading too much css level (1000 times).

Just like

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

.css :

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

Of course, and as all could expect, No any re-loading and spreading phenomenon is found when loading the html app.

You can check the result of my test above at https://jsfiddle.net/MaggiePhalk/ex30xb6k/7/

In this case,
1) How is css rendered for html tags when tags refer to multiple css properties caused by css-inheritance or multiple pointing of css rules? Is the each tag rendering each of css properties for its own? Or, Is this rendering the final css property decided by a system in css rules?

Can anyone let me know the internal algorithm?
2) If the first question is no matter in general browsers like Chrome, Does the cloud streaming service matter on this case?

Added: If is there any research or referrence related, please leave them, to prove our customer company that the css loading is not a problem. Thx.

first link i have provided is of w3.org, u can use this as reference for your customer company :) — Vivek Solanki
– Vivek Solanki, Commented Feb 19, 2016 at 4:28
@c-smile I intended that means multiple css properties directed by lots of its parent tags. My explanation would not well match exact programmers-used words, sorry for it. Hope to be understanded... — EvenBoy
– EvenBoy, Commented Feb 19, 2016 at 4:46
"properties directed by parent tags" is also not clear. Do you mean "inherited properties" ? If "yes" then inheritance by itself does not create too much payload. Depth of DOM tree, indeed, may cause problems if it is too deep. — c-smile
– c-smile, Commented Feb 19, 2016 at 4:51
@c-smile 'Yes'. This writing means multiple inherited css properties. So, What if the case starts with multiple css-direction caused not by the inheritance, but by directly referring just like '.sub1000 { width: 20px; } .sub1000 { width: 50px; } .sub1000 { width: 100px; } ...... x 1000 times? Thx. — EvenBoy
– EvenBoy, Commented Feb 19, 2016 at 4:57

c-smile · Accepted Answer · 2016-02-19 04:28:36Z

1

I am an author of Sciter engine that is an embeddable HTML/CSS rendering engine. So have inside information of how it gets rendered.

Considering your markup and styles:

That text will be drawn only once.

These CSS rules:

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

will not have any effect on rendering as they applied to elements having no direct text nodes. Only this

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

will affect rendering as it defines color and sizes of only glyphs you see in your document.

But! If you will define backgrounds on all those 1000 elements:

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

then all of them will be drawn under the hood. As topmost element has (here) white background that covers the whole stack of elements you will not see that rainbow underneath. Thus use that responsibly.

With solid background colors you probably will not notice too much slowdown but many semitransparent layers may create some noticeable delays.

Even that could be OK if the rendering engine uses GPU rendering (as Sciter does). But in some cases, when rendering is done by CPU, you will see slowdown. I suspect that this is your case if they say about "printing" (WM_PRINTCLIENT I suspect).

The best results can be achieved if those two layers use the same GPU backend.

Like here for example, when Sciter renders HTML/CSS directly into DirectX 3D scene: http://sciter.com/sciter-and-directx/

And by the way here is another screencast that shows rendering of <video> inside HTML/CSS that is inside 3D scene:

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

edited Feb 19, 2016 at 4:28

answered Feb 19, 2016 at 4:18

c-smile

27.6k8 gold badges66 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

EvenBoy Over a year ago

Thx for your suggestion, Well, I don't think the ink-spreading issue does not relate our multiple css properties for tags on which Chrome Developer tool shows more than 10 css rules are related for most of tags at least in PC browsers. Unfortunately, there is no opportunity to know about their cloud streaming engine to check if the rendering is done by CPU as you mentioned. But one thing we heard clearly is that they use "printing".

Vivek Solanki · Accepted Answer · 2016-02-19 04:27:02Z

0

as for your first question, for any element, more specific css rule for it will have the highest priority over other generalize css rules. check this --

check here

also check this fiddle >> i have created this fiddle

as per your requirement , just for demo it is working as per your needs i hope,

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}

hope this helps :)

answered Feb 19, 2016 at 4:27

Vivek Solanki

4621 gold badge7 silver badges10 bronze badges

2 Comments

c-smile Over a year ago

All rules in TS example (an in yours) have the same specificity. So there are no "more specific css rules" there. It is just a stack of elements - layers.

Vivek Solanki Over a year ago

oh yeah, but i was just stating that css works in this hierarchy, sorry for my bad :)

Collectives™ on Stack Overflow

How is multiple-level css rendered for html pages?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related