Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Documentation for Page Rendering Process #2440

Open
coramdeo59 opened this issue Jul 23, 2024 · 1 comment
Open

Improve Documentation for Page Rendering Process #2440

coramdeo59 opened this issue Jul 23, 2024 · 1 comment

Comments

@coramdeo59
Copy link

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
Copy link
Author

new issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant