Replies: 2 comments 2 replies
-
|
I feel like this will become a similar problem/challenge to rendering in video games. I'll be curious to see what the similarities and differences end up being. |
Beta Was this translation helpful? Give feedback.
-
|
when we can calculate css properties per node, creating the render tree is the easiest part. Creating a box layout of the page requires we know things like font-size etc in order to get text wrapping correct, and even may require several passes. Also note that we want to start layout DURING the parsing of the document, and even when we haven't even read the whole page from the network. |
Beta Was this translation helpful? Give feedback.
-
|
Is the render tree recreated from scratch with each reflow, or is an existing tree mutated in place? |
Beta Was this translation helpful? Give feedback.
-
|
Rendering engines for major browsers:
|
Beta Was this translation helpful? Give feedback.
-
A render pipeline consists of 3 different steps:
Render tree step
We have to fetch both the document tree and the CSS tree. We iterate each node in the document tree and decide if the node is visible or not (for instance, script tags are not visible nodes, nodes that have a style "hidden" also aren't visible. These nodes are build into a render-tree.
From this render-tree, we calculate the stylesheets for each node: a node can have a style on the element itself, a style from a class on that element, or css from any node below. Finally, at the bottom, we have a stylesheet from the user-agent.
These all must form a map of styles that are part of the node. At this point, we can detect if nodes are hidden through CSS as well. If so, we can remove them from the render tree.
At this point we have a complete render tree with all calculated CSS attributes per node.
Layout / reflow
From the render tree, we need to figure out the correct positions and dimensions of each node. This is a bit hard to do I think:
text could wrap for instance so calculating text will need the CURRENT font for that node. (note that if fonts are still loading during this phase, we use the default font, when the font is loaded, we reflow again with the new font which will result in layout changes).
I'm not sure how this layout corresponds with the viewport. Of course, the viewport are the only things we need to calculate in the best case, and we can stop layout when we are below the viewport. When scrolling, new layout must be calculated. There needs to be a lot of research on how to do this the most efficient.
Painting / Rendering
When we know the boxes, we can paint those boxes in the styles we need, and with the correct data. Seems easy.. probably is not.
Beta Was this translation helpful? Give feedback.
All reactions