Improve Documentation for Page Rendering Process

[coramdeo59]

Issue Title: Improve Documentation for Page Rendering Process

Issue Description: The current documentation for the page rendering process can be improved to enhance clarity and provide more detailed steps. This will help developers better understand the intricate steps involved in page rendering and the role of different components.

Proposed Changes:

1. Create a 'Frame Tree' or 'Render Tree':

   • Traverse the DOM nodes.
   • Calculate the CSS style values for each node.

2. Calculate Preferred Width of Nodes:

   • Traverse the 'Frame Tree' bottom-up.
   • Sum the preferred width of the child nodes and the node's horizontal margins, borders, and padding.

3. Calculate Actual Width of Nodes:

   • Traverse top-down.
   • Allocate each node's available width to its children.

4. Calculate Height of Nodes:

   • Apply text wrapping.
   • Sum the child node heights and the node's margins, borders, and padding.

5. Calculate Node Coordinates:

   • Use the previously calculated information.

6. Handle Complex Features:

   • Manage elements that are floated, positioned absolutely or relatively, etc.
   • Refer to detailed specifications: CSS2 and CSS Current Work.

7. Create Layers:

   • Describe parts of the page that can be animated as a group.
   • Assign each frame/render object to a layer.

8. Allocate Textures:

   • Allocate textures for each layer of the page.

9. Traverse and Execute Drawing Commands:

   • Traverse frame/render objects for each layer.
   • Execute drawing commands (rasterized by CPU or drawn on GPU).

10. Reuse Calculated Values:

    • Reuse calculated values from the last webpage render to minimize work for incremental changes.

11. Composite Page Layers:

    • Combine with layers for other visible content like browser chrome, iframes, and addon panels.

12. Compute Final Layer Positions:

    • Compute positions and issue composite commands via Direct3D/OpenGL.
    • Flush GPU command buffer(s) for asynchronous rendering.
    • Send frame to the window server.

Additional Information:

• Ensure to provide clear examples and diagrams where necessary.
• Include references to relevant specifications and standards.

Benefits:

• Improves developer understanding of the rendering process.
• Provides a detailed step-by-step guide.
• Enhances documentation quality.

[coramdeo59]

new issue