How web works and browser works ? (behind the scenes)
0 likes242 views
The document outlines key factors affecting web performance, emphasizing the importance of latency and fast load times for optimal user experience. It details the processes involved in page loading, including DNS lookup, TCP handshake, and how the browser parses and renders HTML, CSS, and JavaScript. Additionally, it discusses performance concerns related to rendering and reflows, suggesting best practices for optimizing web applications.
How web works and browser works ? (behind the scenes)
- 1. L E T S S E E W H A T S B E H I N D T H E S C E N E S PROGRAMMING | JAVASCRIPT Follow on Instagram js.helpful Follow on dev.to vibhorme
- 2. Users want web experiences with content that is fast to load and smooth to interact with. Therefore, a developer should strive to achieve these two goals Overview latency browsers are single threaded Two major issues in web performance having to do with 1. 2. Web performance is what we have to do to make the page load happen as quickly as possible Follow on Instagram js.helpful
- 3. Latency is our main threat to overcome to ensure a fast load. To be fast to load, the developers’ goals include sending requested information as fast as possible Whats Latency ? **Network latency is the time it takes to transmit bytes over-the- air to computers Follow on Instagram js.helpful
- 4. most browsers are single threaded cross platform browsers responds differently 1. 2. Browser Issues For smooth interactions, the our goal is to ensure performant site interactions, from smooth scrolling to being responsive to touch Follow on Instagram js.helpful
- 5. Web performance can be improved by understanding the single-threaded nature of the browser minimising the main thread's responsibilities, where possible and appropriate, to ensure rendering is smooth and responses to interactions are immediate Follow on Instagram js.helpful
- 6. Lets Understand How the Browser Works and how we can optimise our applications Follow on Instagram js.helpful
- 7. If you navigate to https://example.com, the HTML page is located on the server with IP address of 93.184.216.34. If you’ve never visited this site, a DNS lookup must happen Lets understand what happens when you enter a URL in the browser The first step of navigating to a web page is finding where the assets for that page are located. If your fonts, images, scripts, ads, and metrics all have different hostnames, a DNS lookup will have to be made for each one (Performance concern)
- 8. TCP Handshake (how the browser communicates with the server) Once the IP address is known, the browser sets up a connection to the server via a TCP three-way handshake For secure connections established over HTTPS, another "handshake" is required. This handshake, or rather the TLS negotiation, creates a secures the connection **While making the connection secure adds time to the page load, a secure connection is worth the latency expense, as the data transmitted between the browser and the web server cannot be decrypted by a third party (performance concern)
- 9. Response Once we have an established connection to a web server, the browser sends an initial HTTP GET request on behalf of the user Once the server receives the request, it will reply with relevant response headers and the contents of the HTML. Follow on Instagram js.helpful
- 10. The first response packet will be 14Kb. This is part of TCP slow start, an algorithm which balances the speed of a network connection. Slow start gradually increases the amount of data transmitted until the network's maximum bandwidth can be determined Response Time to First Byte (TTFB) is the time between when the user made the request—say by clicking on a link—and the receipt of this first packet of HTML. The first chunk of content is usually 14kb of data If you’ve ever heard of the 14Kb rule for initial page load, TCP slow start is the reason why the initial response is 14Kb, and why web performance optimization calls for focusing optimizations with this initial 14Kb response in mind
- 11. But before anything is rendered to the screen, the HTML, CSS, and JavaScript have to be parsed Parsing the Response Parsing is the step the browser takes to turn the data it receives over the network into the DOM and CSSOM, which is used by the renderer to paint a page to the screen How Javscript is parsed by the browser ? Follow on Instagram js.helpful
- 12. Building the DOM tree The first step is processing the HTML markup and building the DOM tree The parser parses tokenized input into the document, building up the document tree When the parser finds non-blocking resources, such as an image, the browser will request those resources and continue parsing. Parsing can continue when a CSS file is encountered, but <script> tags—particularly those without an async or defer attribute—block rendering, and pause the parsing of HTML. (Performance concern) While Parsing ...
- 13. Building the Accessibility Tree Other Processes JavaScript Compilation The browser also builds an accessibility tree that assistive devices use to parse and interpret content Follow on Instagram js.helpful
- 14. Render Style Layout Paint Compositing Rendering steps include The CSSOM and DOM trees created in the parsing step are combined into a render tree which is then used to compute the layout of every visible element, which is then painted to the screen Follow on Instagram js.helpful
- 15. Render Style Tags that aren't going to be displayed, like the <head> and its children and any nodes with display: none, such as the script { display: none; } you will find in user agent stylesheets, are not included in the render tree as they will not appear in the rendered output. Nodes with visibility: hidden applied are included in the render tree, as they do take up space (Performance concern) Follow on Instagram js.helpful
- 16. Render Layout is the process by which the width, height, and location of all the nodes in the render tree are determined, plus the determination of the size and position of each object on the page Layout and Reflow On the web page, most everything is a box In this phase, taking the viewport size into consideration, the browser determines what the dimensions of all the different boxes are going to be on the screen. for example, we have a image in a webpage, while rendering, suppose the initial layout occurs before the image is returned. Since we didn't declare the size of our image, there will be a reflow once the image size is known. (Performance concern as reflow causes rerendering) whereas, Reflow is any subsequent size and position determination of any part of the page or the entire document.
- 17. Render painting the individual nodes to the screen, the first occurence of which is called the first meaningful paint Paint In the painting or rasterization phase, the browser converts each box calculated in the layout phase to actual pixels on the screen Painting can break the elements in the layout tree into layers. Promoting content into layers on the GPU (instead of the main thread on the CPU) improves paint and repaint performance. There are specific properties and elements that instantiate a layer, including <video> and <canvas>, and any element which has the CSS properties of opacity, a 3D transform, will-change, and a few others (performance concern)
- 18. Render sections of the document are drawn in different layers, overlapping each other, compositing is necessary to ensure they are drawn to the screen in the right order and the content is rendered correctly Compositing As the page continues to load assets, reflows can happen (recall our example image that arrived late). A reflow sparks a repaint and a re-composite. Had we defined the size of our image, no reflow would have been necessary, and only the layer that needed to be repainted would be repainted, and composited if necessary Follow on Instagram js.helpful
- 19. If we take care of the base elements and the structuring of our applications, webpages. It can really help us in creating optimised solutions Conclusion Thank you VIBHOR GROVER Follow on Instagram js.helpful Follow on dev.to vibhorme