[{"data":1,"prerenderedAt":468},["ShallowReactive",2],{"article-en-how-does-a-web-interface-work-from-loading-to-final-render":3},{"id":4,"title":5,"body":6,"date":454,"description":455,"extension":456,"meta":457,"navigation":462,"path":463,"published":462,"seo":464,"stem":465,"translationSlug":466,"__hash__":467},"articles_en/en/articles/how-does-a-web-interface-work-from-loading-to-final-render.md","How Does a Web Interface Work? From Loading to Final Render",{"type":7,"value":8,"toc":441},"minimark",[9,13,16,19,24,32,45,51,66,76,78,82,85,88,102,107,121,131,139,147,149,153,156,161,187,192,200,202,206,209,214,225,230,233,238,246,248,252,255,260,268,272,288,290,294,297,302,313,318,321,325,340,342,346,349,354,369,371,375,378,383,391,396,401,406,409,411,415,438],[10,11,12],"p",{},"When you load a web page by typing a URL into your browser, a specific process kicks in to retrieve and display that page. This process involves several steps that progressively render the page, execute JavaScript, and load data via APIs if necessary.",[10,14,15],{},"In this article, we detail each step, highlighting the role of the server and APIs in generating web pages.",[17,18],"hr",{},[20,21,23],"h2",{"id":22},"_1-the-initial-request-contacting-a-server-or-cdn","1. The Initial Request: Contacting a Server or CDN",[10,25,26,27,31],{},"When a user types a URL in their browser (e.g., ",[28,29,30],"code",{},"https://example.com","), the following happens:",[33,34,35,39,42],"ol",{},[36,37,38],"li",{},"The browser parses the URL and finds the corresponding IP address through a DNS server.",[36,40,41],{},"An HTTP request is sent to ask for the web page.",[36,43,44],{},"The server or a CDN (Content Delivery Network) responds with the requested page.",[10,46,47],{},[48,49,50],"strong",{},"Server vs. CDN: What’s the Difference?",[52,53,54,60],"ul",{},[36,55,56,59],{},[48,57,58],{},"Server:"," A remote computer (using Apache, Nginx, Node.js, etc.) that generates and sends pages.",[36,61,62,65],{},[48,63,64],{},"CDN:"," A network of servers distributed around the world that stores copies of static files (HTML, CSS, images, etc.) to deliver them faster to users.",[10,67,68,72,75],{},[69,70,71],"em",{},"Example:",[73,74],"br",{},"\nA site hosted in the United States might serve a European user via a local CDN copy instead of waiting for a response from the American server.",[17,77],{},[20,79,81],{"id":80},"_2-dynamic-page-construction-on-the-server-if-necessary","2. Dynamic Page Construction on the Server (if necessary)",[10,83,84],{},"Before sending the HTML to the browser, the server might need to generate dynamic content.",[10,86,87],{},"There are two types of pages:",[33,89,90,96],{},[36,91,92,95],{},[48,93,94],{},"Static Pages"," → Served directly without processing (e.g., a ready-made HTML file).",[36,97,98,101],{},[48,99,100],{},"Dynamic Pages"," → Generated on demand, often requiring server-side API calls.",[10,103,104],{},[48,105,106],{},"How Does a Dynamic Page Work?",[52,108,109,112,115,118],{},[36,110,111],{},"The server executes a script (PHP, Node.js, Python, etc.).",[36,113,114],{},"It retrieves data from a database or an external API.",[36,116,117],{},"It generates an HTML file with the integrated data.",[36,119,120],{},"The final HTML is then sent to the browser.",[10,122,123,125,127],{},[69,124,71],{},[73,126],{},[128,129,130],"span",{},"PHP Code Block Placeholder",[10,132,133,136,138],{},[48,134,135],{},"Advantage:",[73,137],{},"\nContent is already embedded in the HTML, so no additional client-side API call is needed.",[10,140,141,144,146],{},[48,142,143],{},"Disadvantage:",[73,145],{},"\nIt might be slower because each request must be processed by the server before being sent.",[17,148],{},[20,150,152],{"id":151},"_3-receiving-and-displaying-the-html-file","3. Receiving and Displaying the HTML File",[10,154,155],{},"Once the server response is received, the browser parses the HTML file and starts building the page structure.",[10,157,158],{},[48,159,160],{},"What Does the HTML File Contain?",[52,162,163,174,181],{},[36,164,165,166,169,170,173],{},"The page structure (",[28,167,168],{},"\u003Chead>",", ",[28,171,172],{},"\u003Cbody>",", etc.).",[36,175,176,177,180],{},"Links to CSS files (e.g., ",[28,178,179],{},"\u003Clink rel=\"stylesheet\" href=\"styles.css\">",").",[36,182,183,184,180],{},"References to JavaScript files (e.g., ",[28,185,186],{},"\u003Cscript src=\"app.js\">\u003C/script>",[10,188,189],{},[48,190,191],{},"What Happens at This Stage?",[52,193,194,197],{},[36,195,196],{},"The browser reads the HTML and immediately displays the raw text content.",[36,198,199],{},"CSS and JavaScript are not yet loaded, so the page might appear unstyled and non-interactive.",[17,201],{},[20,203,205],{"id":204},"_4-loading-and-applying-css","4. Loading and Applying CSS",[10,207,208],{},"Next, the browser downloads the CSS files referenced in the HTML to apply visual styling.",[10,210,211],{},[48,212,213],{},"CSS Functions:",[52,215,216,219,222],{},[36,217,218],{},"Define colors, fonts, and spacing.",[36,220,221],{},"Position elements (using flexbox, grid, etc.).",[36,223,224],{},"Manage animations and transitions.",[10,226,227],{},[48,228,229],{},"Why Can CSS Slow Down Loading?",[10,231,232],{},"A large CSS file might block rendering until it is fully loaded.",[10,234,235],{},[48,236,237],{},"Possible Optimizations:",[52,239,240,243],{},[36,241,242],{},"Use Critical CSS to load essential styles first.",[36,244,245],{},"Minify CSS files to reduce their size.",[17,247],{},[20,249,251],{"id":250},"_5-downloading-fonts-and-images","5. Downloading Fonts and Images",[10,253,254],{},"The browser also begins to retrieve images and font files used on the page.",[10,256,257],{},[48,258,259],{},"Why Do Some Fonts Take Time to Appear?",[52,261,262,265],{},[36,263,264],{},"Web fonts (such as Google Fonts) must be downloaded before they can be applied.",[36,266,267],{},"Some browsers hide text until the font is available (leading to a flash of invisible text, or FOIT).",[10,269,270],{},[48,271,237],{},[52,273,274,281],{},[36,275,276,277,280],{},"Use ",[28,278,279],{},"font-display: swap;"," to show a temporary font until the custom font loads.",[36,282,283,284,287],{},"Preload fonts using ",[28,285,286],{},"\u003Clink rel=\"preload\" as=\"font\" href=\"font.woff2\">",".",[17,289],{},[20,291,293],{"id":292},"_6-downloading-and-executing-javascript","6. Downloading and Executing JavaScript",[10,295,296],{},"The browser then retrieves JavaScript files, which add interactivity to the page.",[10,298,299],{},[48,300,301],{},"JavaScript Functions:",[52,303,304,307,310],{},[36,305,306],{},"Handle user events (clicks, form submissions, animations).",[36,308,309],{},"Dynamically update page content.",[36,311,312],{},"Make API requests for real-time data loading.",[10,314,315],{},[48,316,317],{},"Why Can JavaScript Slow Down a Page?",[10,319,320],{},"Blocking JavaScript can delay the rendering of the rest of the site.",[10,322,323],{},[48,324,237],{},[52,326,327,337],{},[36,328,329,330,333,334,180],{},"Load scripts asynchronously (",[28,331,332],{},"async",") or defer their execution (",[28,335,336],{},"defer",[36,338,339],{},"Implement code-splitting to load only what is necessary.",[17,341],{},[20,343,345],{"id":344},"_7-executing-javascript-and-enabling-user-interactions","7. Executing JavaScript and Enabling User Interactions",[10,347,348],{},"After the JavaScript executes, the page becomes fully interactive.",[10,350,351],{},[48,352,353],{},"What Does \"Interactive\" Mean?",[52,355,356,366],{},[36,357,358,359,362,363,180],{},"Buttons respond to clicks (using ",[28,360,361],{},"onclick"," or ",[28,364,365],{},"addEventListener",[36,367,368],{},"Animations and transitions become active.",[17,370],{},[20,372,374],{"id":373},"_8-loading-data-via-api-if-needed-client-side","8. Loading Data via API (if needed, Client-Side)",[10,376,377],{},"If the page requires additional data, client-side API calls are made.",[10,379,380],{},[48,381,382],{},"Examples of API Calls:",[52,384,385,388],{},[36,386,387],{},"Loading products for an e-commerce site.",[36,389,390],{},"Displaying a live-updating news feed.",[10,392,393],{},[48,394,395],{},"How Are These API Calls Made?",[10,397,398],{},[128,399,400],{},"JavaScript Code Block Placeholder",[10,402,403],{},[48,404,405],{},"Impact on User Experience:",[10,407,408],{},"These requests often display a loader while waiting for the server response.",[17,410],{},[20,412,414],{"id":413},"conclusion-the-lifecycle-of-a-web-page","Conclusion: The Lifecycle of a Web Page",[33,416,417,420,423,426,429,432,435],{},[36,418,419],{},"The browser sends a request to the server/CDN.",[36,421,422],{},"The server may dynamically generate HTML via server-side API calls.",[36,424,425],{},"The HTML is downloaded and immediately displayed.",[36,427,428],{},"CSS and fonts are loaded to apply styling.",[36,430,431],{},"Images are downloaded to complete the visual presentation.",[36,433,434],{},"JavaScript is downloaded and executed, making the page interactive.",[36,436,437],{},"Client-side API calls may be made to fetch dynamic data.",[10,439,440],{},"Understanding these steps is key to optimizing both loading times and overall user experience.",{"title":442,"searchDepth":443,"depth":443,"links":444},"",2,[445,446,447,448,449,450,451,452,453],{"id":22,"depth":443,"text":23},{"id":80,"depth":443,"text":81},{"id":151,"depth":443,"text":152},{"id":204,"depth":443,"text":205},{"id":250,"depth":443,"text":251},{"id":292,"depth":443,"text":293},{"id":344,"depth":443,"text":345},{"id":373,"depth":443,"text":374},{"id":413,"depth":443,"text":414},"2025-02-02","From DNS request to JavaScript execution: discover every step of page loading and how to optimize it.","md",{"excerpt":458},{"type":7,"value":459},[460],[10,461,12],{},true,"/en/articles/how-does-a-web-interface-work-from-loading-to-final-render",{"title":5,"description":455},"en/articles/how-does-a-web-interface-work-from-loading-to-final-render","comment-fonctionne-une-interface-web-du-chargement-au-rendu-final","ftIZsx1X_GwGeCq78wtdV34iXsMsX2kBGZyav5Otld8",1765834534790]