Scribd Logo
Upload

Welcome to Scribd!

  • DOMS Presentation WEB

    Uploaded by

    Nitesh Yadav
    5 views19 pages
    The document discusses DOM rendering, which refers to how a web browser takes a document's DOM tree and displays it on screen. It involves parsing HTML/CSS to create DOM and CSSOM trees, combining them into a render tree, calculating layout, painting pixels, and compositing layers. The process is complex and iterative, involving multiple stages to optimize page display performance.

    Original Description:

    Original Title

    DOMS presentation WEB

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses DOM rendering, which refers to how a web browser takes a document's DOM tree and displays it on screen. It involves parsing HTML/CSS to create DOM and CSSOM trees, combining them into a render tree, calculating layout, painting pixels, and compositing layers. The process is complex and iterative, involving multiple stages to optimize page display performance.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views19 pages

    DOMS Presentation WEB

    Uploaded by

    Nitesh Yadav
    The document discusses DOM rendering, which refers to how a web browser takes a document's DOM tree and displays it on screen. It involves parsing HTML/CSS to create DOM and CSSOM trees, combining them into a render tree, calculating layout, painting pixels, and compositing layers. The process is complex and iterative, involving multiple stages to optimize page display performance.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 19

    LOVELY PROFESSIONAL UNIVERSITY

    SCHOOL OF COMPUTER APPLICATION


    DOMS RENDERING
    PRESENTED BY :

    ZARREEN NIHAL
    (Reg No: 12209631)

    KARAN BHAGAT
    (Reg No: 12220536)

    VIMALJIT KAUR
    (Reg No: 12218506)
    Understanding DOM

    DOM stands for Document Object Model, which is a programming interface for web documents.

    It represents the page so that programs can change the document structure, style, and content. In other words, it is
    a hierarchical tree-like structure that represents the structure of an HTML or XML document.

    The DOM provides a way for programs to access and manipulate the content and structure of a web page
    dynamically.

    It enables developers to write scripts that can modify the content and attributes of elements on a web page in
    response to user interaction, data input, or other events.
    Transformation of HTML code into DOM
    Tree
    <!DOCTYPE html> Document
    └── html
    <html>
    |-── head
    <head> When a web browser loads this | └── title
    HTML code, it parses it and
    creates a DOM tree, which
    │ └── "Example"
    <title>Example</title>
    represents the structure of the web └── body
    </head> page. The resulting DOM tree for
    this HTML code would look like
    ├── h1
    <body>
    this | └── "Hello World!"
    └── p
    <h1>Hello World!</h1> └── "This is an example of a web
    <p>This is an example of a web page.</p>
    page."

    </body>

    </html>

    Here, ‘Document’ is a
    root node whereas
    ‘html’ and ‘head’ are
    its child node
    What is DOM Rendering?
    DOMS Rendering refers to the process by which a web browser takes the Document Object Model (DOM) tree of a
    web page and renders it on the screen. When a web page loads, the browser first parses the HTML code and creates a
    DOM tree, which is a hierarchical representation of the web page's structure.

    The DOM is a hierarchical tree-like structure, where each element in the HTML document is represented as a node in the
    tree or, simply it represents structure and content of the page. The browser then applies CSS styles to the DOM nodes and
    performs a layout to determine the position of each element on the page. Finally, the browser paints the page and displays
    it to the user. In this way HTML, CSS, and Java Script are converted into a visible user interface on a web page.

    During the DOMS Rendering process, the browser also performs various optimizations to ensure that the page is
    displayed as quickly and smoothly as possible. For example, the browser may delay the rendering of non-critical
    elements until after the page has finished loading or use a technique called lazy loading to only load images as they
    become visible on the screen.
    Understanding DOM Rendering

    The Document Object Model (DOM) is  a


    programming interface for HTML and XML
    documents.
    It defines the logical structure of documents and the
    way a document is accessed and manipulated
    JavaScript
    manipulates the
    data
    • Read page as
    text
    • Create a DOM
    Tree
    • Create a
    Render Tree
    • Paint

    The Cascading Style Sheet language


    describes the look and formatting of a
    document written in markup language.
    The Rendering Process
    Here's how DOM rendering works:

    1. Parsing: When a web page is loaded, the browser starts by parsing the HTML code and creating a DOM tree. The
    parser reads the HTML markup and creates a tree of objects that represent the structure of the page.

    2. Creating the Render Tree: After the DOM tree is constructed, the browser creates another tree called the Render Tree.
    The Render Tree is a subset of the DOM tree that includes only the elements that need to be displayed on the page.

    3. Layout: Once the Render Tree is created, the browser calculates the position and size of each element based on the
    styles defined in the CSS files. This process is called layout.

    4. Painting: Finally, the browser paints the pixels on the screen according to the calculated layout and renders the web
    page.
     (e.g., <html>, <p>) and

    Step 1: HTML & CSS PARSING

    First, the raw bytes of data are converted into characters and characters into tokens. Essentially,
    an HTML file is broken down into small units of parsing called tokens and this process is
    called as Tokenization.

    When we save the file with the .html extension, we signal the browser engine to interpret the
    file as an HTML document. The way the browser interprets this file is by first parsing it.

    In the parsing process, and particularly during tokenization, every start and end HTML tag in
    the file is accounted for.The parser understands each string in angle brackets (e.g. <html>,
    <p>) and understands the set of rules that apply to each of them. After the tokenization is
    done, the tokens are then converted into nodes.  A node is nothing but a distinct object with
    specific properties.

    Upon creating these nodes, the nodes are then linked in a tree data structure known as
    the DOM. The DOM establishes the parent-child relationships, adjacent sibling relationships,
    etc.  The DOM establishes the parent-child relationships, adjacent sibling relationships, etc. 
     (e.g., <html>, <p>) and

    Step 1: PARSING

    Nodes are also formed, and, finally, a tree structure is formed. CSS has something called the cascade. The cascade is how the browser determines what styles are applied to an
    element. Because styles affecting an element may come from a parent element (i.e., via inheritance) or have been set on the element themselves, the CSSOM tree structure
    becomes important.

    This is because the browser has to recursively go through the CSS tree structure and determine the styles that affect a particular element.

    Now, the browser has the DOM and CSSOM objects.


     (e.g., <html>, <p>) and

    Step 2: CREATING A RENDER TREE

    The DOM and CSSOM tree structures are two independent structures.

    The DOM contains all the information about the page’s HTML element’s relationships, while the CSSOM contains information on how the elements are styled.

    The browser now combines the DOM and CSSOM trees into something called a render tree.

    The render tree contains information on all visible DOM content on the page and all the required CSSOM information for the different nodes
    Step 3: LAYING OUT THE RENDER TREE

    With the render tree constructed, the next step is to perform the
    layout. This involves determining the size and position of each
    element in relation to the other elements on the page, taking into
    account factors such as box model, margins, padding, and floats.

    This layout step takes into consideration the content and style
    received from the DOM and CSSOM and does all the necessary
    layout computing.

    A decent web application will definitely use some JavaScript. With


    JavaScript we can modify the content and styling of a page using
    JavaScript. JavaScript can alter both the DOM and CSSOM
    Step 4: PAINTING

    After the layout is calculated, the browser generates a series of paint commands that instruct the graphics engine to paint the pixels on the screen.

    This involves rendering the visual elements of the page, including text, images, and backgrounds, according to the layout and styles calculated in the

    previous steps.
    Step 5: COMPOSTING

    Finally, the browser composites the painted layers to create the final output on the screen. This involves combining the individual paint layers into a
    single image, taking into account the z-index of each element, opacity, and other visual effects.

    The rendering process in the DOM is a complex and iterative process that involves multiple stages of parsing, layout, painting, and compositing.
    Modern web browsers optimize this process using various techniques, such as incremental rendering, caching, and hardware acceleration, to achieve
    fast and smooth performance.
    How Browsers Work?
    PERFORMANCE OF DOM RENDERING
    The performance of DOM rendering can have a significant impact on the overall performance of a web page. Slow rendering can lead to a poor user experience, including slow page
    load times, unresponsive user interfaces, and poor scrolling performance. Therefore, it's important to optimize the rendering process to improve the performance of the web page.

    Here are some factors that can affect the performance of DOM rendering:

    • Number of DOM nodes: The more DOM nodes a web page has, the longer it will take to render. This is because each node must be parsed, styled, laid out, and painted. To
    improve performance, it's important to minimize the number of DOM nodes as much as possible, for example by using CSS grid or flexbox instead of nested tables.

    • CSS complexity: The complexity of CSS styles can also affect rendering performance. Complex selectors or large numbers of styles can slow down rendering by requiring more
    processing power to calculate the layout and paint the page. To improve performance, it's important to simplify CSS styles as much as possible and avoid using too many styles.

    • JavaScript: JavaScript can also affect rendering performance, as it can manipulate the DOM and trigger reflows and repaints. Large or complex JavaScript code can slow down
    rendering by delaying the initial page load or causing layout thrashing. To improve performance, it's important to optimize JavaScript code, for example by minimizing the use of
    global variables, avoiding excessive DOM manipulation, and using debouncing or throttling to reduce the frequency of updates.
    PERFORMANCE OF DOM RENDERING

    • Browser rendering engine: The performance of the browser rendering engine can also affect the rendering performance. Different
    browsers may have different rendering engines with varying levels of performance. To improve performance, it's important to test web
    pages on different browsers and optimize them for each one.

    • Hardware acceleration: Finally, hardware acceleration can significantly improve rendering performance by offloading the rendering
    tasks to the graphics card or other hardware components. To take advantage of hardware acceleration, it's important to use CSS styles
    that are hardware-accelerated, such as transform and opacity, and avoid using styles that are not hardware-accelerated, such as box-
    shadow and border-radius.

    Overall, optimizing the performance of DOM rendering requires a combination of techniques, including optimizing the number of DOM
    nodes, simplifying CSS styles, optimizing JavaScript code, testing on different browsers, and using hardware acceleration where possible.
    CONCLUSION
    DOM (Document Object Model) rendering is a critical part of web development that involves converting HTML, CSS, and
    JavaScript code into a visual display that users can interact with. The process of DOM rendering involves several steps, including
    parsing, layout, painting, and compositing, and can have a significant impact on the performance and user experience of a website.

    To optimize DOM rendering, developers can follow best practices such as minimizing the use of complex CSS and JavaScript,
    reducing the number of DOM nodes, using efficient selectors, and optimizing images and other media. Additionally, modern web
    development frameworks and libraries, such as React and Vue.js, offer tools and techniques for optimizing DOM rendering and
    improving website performance.

    Overall, understanding the basics of DOM rendering and implementing best practices for optimization can help developers create
    fast, responsive, and user-friendly web experiences.
    Thank You!

    You might also like