Web fundamentals
Zahid Hasan Emran
Frontend Engineer (4+ years) | React.js | Next.js | Javascript | Typescript | GraphQL | TDD
How does HTML render in the browser?
The HTML parser first creates a DOM tree from the HTML, while the CSS parser generates a CSSOM from the CSS. These two are combined to form the render tree. However, the render tree only contains visual elements; tags within the head and elements with a display of hidden are not included. Next, the render tree undergoes layout processing where the width, height, and positioning of elements are determined. Then comes the paint phase, where the visual representation of the render tree, including images, text, and colors, is created. Finally, in the composite phase, layers are separated based on the z-index, and these layers are utilized to produce the final image displayed on the screen, often using the graphic card.
When an HTML document is downloaded, it goes through a parsing process. During this process, the document is read and analyzed line by line. When the parser encounters a <script> tag, it temporarily pauses parsing the HTML and proceeds to download and execute the script. Once the script is executed, the parser resumes parsing the HTML document from where it left off. However, there can be issues when all the scripts are placed in the <head> section of the HTML document. Since the document is parsed sequentially, the parsing process gets delayed at the <head> section while the scripts are being downloaded and executed. As a result, the HTML body content does not become visible, and only a blank page is displayed to the user. This delay is especially noticeable in slower internet connections and can lead to a poor user experience. Furthermore, when scripts are executed, they are unable to add event handlers or manipulate elements in the DOM that have not been parsed yet. This limitation can affect the functionality and interactivity of the web page. In summary, placing scripts in the <head> section of an HTML document can cause delays in rendering the page's content and hinder the user experience. It is generally recommended to place scripts at the end of the <body> section to ensure that the page content is visible and accessible to users before scripts are executed.
Steps of rendering web page.
Users love pixels (frames) delivered on screen as fast as possible; that's what makes a web application feel fast!HTML and CSS are the foundational building blocks web developers use to build visual experiences on the web.
But how does the browser convert HTML and CSS into pixels?
- The journey from raw HTML and CSS text all the way to visual on-screen pixels has many steps and intermediate states along the way. For this beginner-friendly tip, The steps are the following
When a user navigates to a web page, the entry to the application is the HTML document served to the user as a text file. The browser utilizes its?HTML Parser?to convert this HTML text into the?Document Object Model, or?DOM. The DOM is a tree that defines the structure of the document. Each node in the DOM tree is a browser object that maps back to items specified in the HTML text file.
While HTML defines the structure of the document, it may also reference CSS Stylesheets to define the visual presentation of the document. These stylesheets are are typically defined via <link rel="stylesheet" /> tags, but may also be defined through inline <style> nodes. A CSS stylesheet defines rules composed of selectors and declarations. For example, consider styles.css:
The Render Tree
? Once the DOM and CSSOM are constructed, the browser can begin the next phase of the pipeline: Style. This phase is sometimes called Recalculate Style or a Render Tree [1]
? The Render Tree (sometimes called the Layout Tree) is a browser-internal C++ data structure that web developers don't directly modify.
? It is a separate tree from the DOM but often mirrors its structure. Each node typically references a DOM node and a Computed Style.
? Render Tree is collection of Render Object. You can check the img [2] to see what contain a render Object
? The Render Tree is also responsible for other, non-DOM related visual elements, such as scroll bars and text selection.
Note: Notable exclusions from the Render Tree include <head> and its children, anything that is marked as display: none, and <script> elements because they are not presented to the user's screen.
Tree Construction To build the Render Tree, the browser will recursively traverse the DOM, searching for visual elements Construct / update the Render Tree node pointing back to the DOM node Derive ComputedStyles for that DOM node, and associate with the DOM node and Render Tree node In the end, we end up with a styled Render Tree of visual elements to present the user. In the Chromium Profiler, this will appear as a Recalculate Style task:
Layout
Although the Render Tree contains all the CSS declarations for widths, heights, colors, etc. for each visual element on the page, the browser has not assigned any geometry or coordinates to the elements. The Layout process (sometimes called Reflow) recursively traverses the newly constructed / updated Render Tree, and assigns each node precise floating-point positions and geometry. Layout is a very deep and complex topic. For the purposes of this tip, what's important to know is that Layout will create and position boxes for each node in the Render Tree. For example, in our example Render Tree. The browser creates and assigns a box for the body element. Its width is the full width of the screen, because it's a block To get the height, the browser traverses to the body element's children (the three div elements, also block boxes)The height of each of these div blocks is derived from their child, the Text Node. The heights are aggregated recursively up, and precise coordinates and heights are assigned. This very cool video shows the browser assigning geometry recursively through the Layout process: https://lnkd.in/g2PgaMGfOne thing to note here is that the Layout process can be quite expensive, so the browser uses extensive caching to avoid re-computing Layout unnecessarily.
Paint
Once we have a styled, positioned set of Render Tree nodes, the browser utilizes a computational graphics library to draw the Render Tree nodes programmatically as pixels. This process is quite nuanced, but, from a high level, the browser traverses the newly positioned Render Tree recursively, and executes instructions to draw each Render Tree node. This phases is responsible for making sure each visual element is painted in the correct order (i.e., resolving z-index, scroll containers, etc.).Chromium utilizes the Skia library to facilitate drawing, and Skia will interface with the GPU for lower-level OpenGL / DirectX graphics instructions. Once textures are produced from the GPU, the browser aggregates them into a Frame, and the Frame is submitted to the user's display!
A. The render tree does not contain all the elements, just visual elements. so the head and display none elements doesn't go inside the render tree.
B. Composition is not the process of separating layers rather It is just a process of combining ose layers together.
C. Its not the layout process its paint process
D. It's true. Its a separate thread in GPU that browser use to offload the expensive compositing process from main thread.
E. Not part of the render tree
Async defer script loading
Is waterfalls always bad?
A "waterfall" refers to a sequence of network requests that depend on the completion of previous requests. In the case of data fetching, each request can only begin once the previous request has returned data. This pattern is not necessarily bad. There may be cases where you want waterfalls because you want a condition to be satisfied before you make the next request. For example, you might want to fetch a user's ID and profile information first. Once you have the ID, you might then proceed to fetch their list of friends. In this case, each request is contingent on the data returned from the previous request.
Server Actions in Next JS
? With Server action focus on the business logic, getting data from the form and doing database operation. there is no API to create with server action. Next js handle this automatically for us.
? With API, we must make a request from the client, also need to create an API on the server where you listen to this request from the client. That's double work. ? Server action will work even if the "Javascript is disabled"
? Server action supports in both client and server component
? CRUD is possible with Server action.
If you are animating
If you animate left, right, top, bottom, width, height etc then the rendering cost is Layout, Paint, and composite. Property like transform, opacity the rendering cost is only composite. And for background Image rendering cost is paint and composite
Corn jobs
Cron jobs are a way of scheduling specific code to run on a recurring frequency or at specific moments in time. It’s great for automating repetitive tasks that must be done on a particular schedule, like making backups, sending out emails at certain intervals, triggering Slack notifications, updating databases, web scraping, creating time-based reports of data, integrating with third-party APIs — so much more.
What happen after type facebook .com and press enter?
-Browser send request to Recursive DNS Resolver. The resolver queries Root Name Server. The Root Name Server responds with Top Lavel Domain Name Server Ip address. The resolver queries Top Lavel Domain Name Server, Top Lavel Domain Name Server response with Authoritative Name Server IP address. The resolver queries Authoritative Name Server, Authoritative Name Server responds with website's IP Address.
Why is deferred JavaScript faster?
Deferred JavaScript is many times faster because the browser does not have to wait for JavaScript to load and execute while rendering the HTML of the page.Why not everyone uses deferred JavaScript you may be wondering? We agree! Deferred JavaScript actually does not offer many disadvantages but some huge speed advantages.Yet we see that many Webmasters ignore JavaScript while optimizing their page. Often because they don't know how big a difference deferred JavaScript might make. That is because webmasters often already have the scripts available in the memory cache of the browser and therefore get a completely different speed experience than a visitor who visits their page for the first time.
What does the event loop do?
- It continuously checks
-> Is the Call stack empty?
-> Is all the global code executed?
-> Is there anything inside the MicroTask Queue (Job Queue) to be executed?
-> Is there anything inside the Callback Queue to be executed?
When All the global code is executed, the Call stack is empty, and Eventlop starts executing the code inside the MicroTask Queue (Job Task Queue). And later, it starts executing code inside Callback Queue.
HTML ?????? ?????????? ??????? ??? :
html ??????? ?????? html ???? Dom tree ???? ???. ?? ?????? ???? CSSOM ???? ???? ?? ??? ?????? ???????? ???? ??? ??????? ????? ??? Render tree ?? ???? ???????? ???????? ????? ????, head ?? ?????? tags ??? display hidden ????????????? ??????? ???? ?? ??????? ????? Render tree ??? ???? ??? ?? ??? ???????? ???? ??? Layout ???????? ? ??? element ?????? width, height ???? ??? ??? ???????? ??? ?????????? ??? ??? ???? ???? ???? ?? ???? ???? ??? geometry ???????? ???? ?????? ???? ???? ??? Paint phase. ?????? ??? ????? ???????? ?????????????? ?? Render tree. ?? ???? Image, text, color ??? Paint ???? ????? Composite phase ? z-index ?? ??? ?????? ??? ?????? ?????? ????? ??? ??? ??? ?? ?????? ???? ?????? ???? ?????? ??????? ??? ??? ?? Graphic card ?? ??????? ???? ???????? ????? ????