[{"data":1,"prerenderedAt":400},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Fhow-do-browsers-work":286,"\u002Fblog\u002Fhow-do-browsers-work-surround":393},[4],{"title":5,"path":6,"stem":7,"children":8,"page":285},"Blog","\u002Fblog","blog",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281],{"title":10,"path":11,"stem":12},"2020 - The best Javascript Frameworks","\u002Fblog\u002F2020-the-best-javascript-frameworks","blog\u002F2020 - The best Javascript Frameworks",{"title":14,"path":15,"stem":16},"5 Essential Reasons for E2E Testing","\u002Fblog\u002F5-essential-reasons-for-e2e-testing","blog\u002F5 Essential Reasons for E2E Testing",{"title":18,"path":19,"stem":20},"5 Mistakes Front-end Developers should Avoid","\u002Fblog\u002F5-mistakes-front-end-developers-should-avoid","blog\u002F5 Mistakes Front-end Developers should Avoid",{"title":22,"path":23,"stem":24},"5 Things to motivate you to perform Unit Testing","\u002Fblog\u002F5-things-to-motivate-you-to-perform-unit-testing","blog\u002F5 Things to motivate you to perform Unit Testing",{"title":26,"path":27,"stem":28},"52 Articles, 7 Books and a Pandemic","\u002Fblog\u002F52-articles-7-books-and-a-pandemic","blog\u002F52 Articles, 7 Books and a Pandemic",{"title":30,"path":31,"stem":32},"6 Levels of Autonomous Vehicles","\u002Fblog\u002F6-levels-of-autonomous-vehicles","blog\u002F6 Levels of Autonomous Vehicles",{"title":34,"path":35,"stem":36},"ADAS","\u002Fblog\u002Fadas","blog\u002FADAS",{"title":38,"path":39,"stem":40},"Ambient Intelligence","\u002Fblog\u002Fambient-intelligence","blog\u002FAmbient Intelligence",{"title":42,"path":43,"stem":44},"Best 5 Hybrid Mobile App Development Frameworks","\u002Fblog\u002Fbest-5-hybrid-mobile-app-development-frameworks","blog\u002FBest 5 Hybrid Mobile App Development Frameworks",{"title":46,"path":47,"stem":48},"Best Practices for Code Testing","\u002Fblog\u002Fbest-practices-for-code-testing","blog\u002FBest Practices for Code Testing",{"title":50,"path":51,"stem":52},"Blockchains - How and Why?","\u002Fblog\u002Fblockchains-how-and-why","blog\u002FBlockchains - How and Why",{"title":54,"path":55,"stem":56},"Brain Computer Interfaces","\u002Fblog\u002Fbrain-computer-interfaces","blog\u002FBrain Computer Interfaces",{"title":58,"path":59,"stem":60},"Computational Fluid Dynamics","\u002Fblog\u002Fcomputational-fluid-dynamics","blog\u002FComputational Fluid Dynamics",{"title":62,"path":63,"stem":64},"Computer Vision","\u002Fblog\u002Fcomputer-vision","blog\u002FComputer Vision",{"title":66,"path":67,"stem":68},"Cryptography","\u002Fblog\u002Fcryptography","blog\u002FCryptography",{"title":70,"path":71,"stem":72},"Cyber-Physical Systems: Where Digital Meets Reality","\u002Fblog\u002Fcyber-physical-systems","blog\u002FCyber-Physical Systems",{"title":74,"path":75,"stem":76},"Design Patterns - Why and How?","\u002Fblog\u002Fdesign-patterns-why-and-how","blog\u002FDesign Patterns - Why and How",{"title":78,"path":79,"stem":80},"Edge AI: Revolutionizing Intelligence at the Edge","\u002Fblog\u002Fedge-ai","blog\u002FEdge AI",{"title":82,"path":83,"stem":84},"Edge Computing","\u002Fblog\u002Fedge-computing","blog\u002FEdge Computing",{"title":86,"path":87,"stem":88},"Embracing Decentralized Development","\u002Fblog\u002Fembracing-decentralized-development","blog\u002FEmbracing Decentralized Development",{"title":90,"path":91,"stem":92},"Extended Reality Simplified","\u002Fblog\u002Fextended-reality-simplified","blog\u002FExtended Reality Simplified",{"title":94,"path":95,"stem":96},"Good practices for Git","\u002Fblog\u002Fgood-practices-for-git","blog\u002FGood practices for Git",{"title":98,"path":99,"stem":100},"How do browsers work","\u002Fblog\u002Fhow-do-browsers-work","blog\u002FHow do browsers work",{"title":102,"path":103,"stem":104},"How to be a Full Stack Engineer","\u002Fblog\u002Fhow-to-be-a-full-stack-engineer","blog\u002FHow to be a Full Stack Engineer",{"title":106,"path":107,"stem":108},"How to be an effective Engineer?","\u002Fblog\u002Fhow-to-be-an-effective-engineer","blog\u002FHow to be an effective Engineer",{"title":110,"path":111,"stem":112},"How to choose components for a desktop PC on your own","\u002Fblog\u002Fhow-to-choose-components-for-a-desktop-pc-on-your-own","blog\u002FHow to choose components for a desktop PC on your own",{"title":114,"path":115,"stem":116},"Industry 4.0","\u002Fblog\u002Findustry-4","blog\u002FIndustry 4",{"title":118,"path":119,"stem":120},"Industry 4.0 & Mixed Reality","\u002Fblog\u002Findustry-4-and-mixed-reality","blog\u002FIndustry 4 & Mixed Reality",{"title":122,"path":123,"stem":124},"Internet of Behaviours","\u002Fblog\u002Finternet-of-behaviours","blog\u002FInternet of Behaviours",{"title":126,"path":127,"stem":128},"Internet of Things","\u002Fblog\u002Finternet-of-things","blog\u002FInternet of Things",{"title":130,"path":131,"stem":132},"Let's talk about SOLID Principles","\u002Fblog\u002Flets-talk-about-solid-principles","blog\u002FLets talk about SOLID Principles",{"title":134,"path":135,"stem":136},"LiDAR","\u002Fblog\u002Flidar","blog\u002FLiDAR",{"title":138,"path":139,"stem":140},"Machine Vision -Transforming Industries AI","\u002Fblog\u002Fmachine-vision-transforming-industries-ai","blog\u002FMachine Vision -Transforming Industries AI",{"title":142,"path":143,"stem":144},"Mathematics in Software Engineering","\u002Fblog\u002Fmathematics-in-software-engineering","blog\u002FMathematics in Software Engineering",{"title":146,"path":147,"stem":148},"Micro Frontends - A Modern Approach to Front-End Development","\u002Fblog\u002Fmicro-frontends-a-modern-approach-to-front-end-development","blog\u002FMicro Frontends - A Modern Approach to Front-End Development",{"title":150,"path":151,"stem":152},"Natural Language Processing","\u002Fblog\u002Fnatural-language-processing","blog\u002FNatural Language Processing",{"title":154,"path":155,"stem":156},"Optimizing for Search Engines","\u002Fblog\u002Foptimizing-for-search-engines","blog\u002FOptimizing for Search Engines",{"title":158,"path":159,"stem":160},"Physics Engine","\u002Fblog\u002Fphysics-engine","blog\u002FPhysics Engine",{"title":162,"path":163,"stem":164},"Point cloud","\u002Fblog\u002Fpoint-cloud","blog\u002FPoint cloud",{"title":166,"path":167,"stem":168},"Processes for Better Software Volume 1","\u002Fblog\u002Fprocesses-for-better-software-volume-1","blog\u002FProcesses for Better Software Volume 1",{"title":170,"path":171,"stem":172},"Processes for Better Software Volume 2","\u002Fblog\u002Fprocesses-for-better-software-volume-2","blog\u002FProcesses for Better Software Volume 2",{"title":174,"path":175,"stem":176},"Processes for Better Software Volume 3","\u002Fblog\u002Fprocesses-for-better-software-volume-3","blog\u002FProcesses for Better Software Volume 3",{"title":178,"path":179,"stem":180},"Quantum Computers","\u002Fblog\u002Fquantum-computers","blog\u002FQuantum Computers",{"title":182,"path":183,"stem":184},"Quantum Computing and its Potential Impact on Software Development","\u002Fblog\u002Fquantum-computing-and-its-potential-impact-on-software-development","blog\u002FQuantum Computing and its Potential Impact on Software Development",{"title":186,"path":187,"stem":188},"Quantum Cryptography","\u002Fblog\u002Fquantum-cryptography","blog\u002FQuantum Cryptography",{"title":190,"path":191,"stem":192},"Ray tracing - What you need to know","\u002Fblog\u002Fray-tracing-what-you-need-to-know","blog\u002FRay tracing - What you need to know",{"title":194,"path":195,"stem":196},"Reflections on how we code","\u002Fblog\u002Freflections-on-how-we-code","blog\u002FReflections on how we code",{"title":198,"path":199,"stem":200},"Robotic Process Automation","\u002Fblog\u002Frobotic-process-automation","blog\u002FRobotic Process Automation",{"title":202,"path":203,"stem":204},"Self Driving Cars - A Better Tomorrow","\u002Fblog\u002Fself-driving-cars-a-better-tomorrow","blog\u002FSelf Driving Cars - A Better Tomorrow",{"title":206,"path":207,"stem":208},"Semantic Web - A Smarter Future","\u002Fblog\u002Fsemantic-web-a-smarter-future","blog\u002FSemantic Web A Smarter Future",{"title":210,"path":211,"stem":212},"Sensor Fusion","\u002Fblog\u002Fsensor-fusion","blog\u002FSensor Fusion",{"title":214,"path":215,"stem":216},"Serverless Computing and the Future","\u002Fblog\u002Fserverless-computing-and-the-future","blog\u002FServerless Computing and the Future",{"title":218,"path":219,"stem":220},"Shaders","\u002Fblog\u002Fshaders","blog\u002FShaders",{"title":222,"path":223,"stem":224},"Smart Home Automation","\u002Fblog\u002Fsmart-home-automation","blog\u002FSmart Home Automation",{"title":226,"path":227,"stem":228},"The Horizon of Cybersecurity","\u002Fblog\u002Fthe-horizon-of-cybersecurity","blog\u002FThe Horizon of Cybersecurity",{"title":230,"path":231,"stem":232},"The Perils of Ray-Tracing","\u002Fblog\u002Fthe-perils-of-ray-tracing","blog\u002FThe Perils of Ray-Tracing",{"title":234,"path":235,"stem":236},"The Psychology of Software Bugs Understanding and Preventing Common Mistakes","\u002Fblog\u002Fthe-psychology-of-software-bugs-understanding-and-preventing-common-mistakes","blog\u002FThe Psychology of Software Bugs - Understanding and Preventing Common Mistakes",{"title":238,"path":239,"stem":240},"Top 5 Advantages of MongoDB","\u002Fblog\u002Ftop-5-advantages-of-mongodb","blog\u002FTop 5 Advantages of MongoDB",{"title":242,"path":243,"stem":244},"Top Trends in Augmented Reality","\u002Fblog\u002Ftop-trends-in-augmented-reality","blog\u002FTop Trends in Augmented Reality",{"title":246,"path":247,"stem":248},"Top features of Unreal Engine","\u002Fblog\u002Ftop-features-of-unreal-engine","blog\u002FTop features of Unreal Engine",{"title":250,"path":251,"stem":252},"Unity 3D - Why to go with it?","\u002Fblog\u002Funity-3d-why-to-go-with-it","blog\u002FUnity 3D - Why to go with it",{"title":254,"path":255,"stem":256},"Virtual Reality Advantages","\u002Fblog\u002Fvirtual-reality-advantages","blog\u002FVirtual Reality Advantages",{"title":258,"path":259,"stem":260},"Virtual Test Drive & Autonomous Driving","\u002Fblog\u002Fvirtual-test-drive-and-autonomous-driving","blog\u002FVirtual Test Drive & Autonomous Driving",{"title":262,"path":263,"stem":264},"WebAssembly and Progressive Web Apps","\u002Fblog\u002Fwebassembly-and-progressive-web-apps","blog\u002FWebAssembly and Progressive Web Apps",{"title":266,"path":267,"stem":268},"What are Best Practices?","\u002Fblog\u002Fwhat-are-best-practices","blog\u002FWhat are Best Practices",{"title":270,"path":271,"stem":272},"What are Digital Twins?","\u002Fblog\u002Fwhat-are-digital-twins","blog\u002FWhat are Digital Twins",{"title":274,"path":275,"stem":276},"What makes Mixed Reality the next big thing?","\u002Fblog\u002Fwhat-makes-mixed-reality-the-next-big-thing","blog\u002FWhat makes Mixed Reality the next big thing",{"title":278,"path":279,"stem":280},"Why Game Engines?","\u002Fblog\u002Fwhy-game-engines","blog\u002FWhy Game Engines",{"title":282,"path":283,"stem":284},"Why we need User Experience Design?","\u002Fblog\u002Fwhy-we-need-user-experience-design","blog\u002FWhy we need User Experience Design",false,{"id":287,"title":98,"author":288,"body":292,"date":384,"description":385,"extension":386,"image":387,"meta":388,"minRead":389,"navigation":390,"path":99,"seo":391,"stem":100,"__hash__":392},"blog\u002Fblog\u002FHow do browsers work.md",{"name":289,"avatar":290},"Aghil Jose",{"src":291,"alt":289},"\u002Fassets\u002Fimages\u002Fabout.jpg",{"type":293,"value":294,"toc":375},"minimark",[295,299,302,307,314,317,321,327,330,334,340,343,347,353,356,360,366,369,372],[296,297,298],"p",{},"Without the modern browsers, the internet will be pretty much a boring place.\nYou just enter an address and the browser will take care of everything. Ever\nwondered what is going on behind the scene?",[296,300,301],{},"**Here is a high-level view of what happens.",[303,304,306],"h2",{"id":305},"_1-resource-gathering","1. Resource Gathering.",[296,308,309],{},[310,311],"img",{"alt":312,"src":313},"resources","\u002Fassets\u002Fimages\u002Fblog\u002F121020\u002Fresources.jpg",[296,315,316],{},"When you provide an address to the browser, provided you have the access\nrights to the said address, the browser will start resource gathering. The\nresources will include everything from HTML, CSS, JS, images, etc. Simply put,\nthe browser will gather everything that needs to be displayed.",[303,318,320],{"id":319},"_2-parse-html-and-create-dom-tree","2. Parse HTML and create DOM tree.",[296,322,323],{},[310,324],{"alt":325,"src":326},"domTree","\u002Fassets\u002Fimages\u002Fblog\u002F121020\u002FdomTree.jpg",[296,328,329],{},"As you know, HTML works in the DOM (Document Object Model). As you can see in\nthe image above, there is a root html element. Then, head and body. Then there\nare more and more nested tags inside both and it goes on and on. The browser\nwill create this DOM from the html resource that was gathered in step 1. DOM\nis regulated by W3 and well documented. Even if the one(s) who wrote the code\nfor got to close some tags, the browser will still go ahead with rectifying\nthose small mistakes and displaying the page.",[303,331,333],{"id":332},"_3-create-render-tree-from-dom-tree","3. Create Render Tree from DOM tree.",[296,335,336],{},[310,337],{"alt":338,"src":339},"renderTree","\u002Fassets\u002Fimages\u002Fblog\u002F121020\u002FrenderTree.jpg",[296,341,342],{},"In this step, the browser applies styles to the objects in the DOM tree and\ncreates a render tree. The CSS files gathered will be made use of to do this\naction. The CSS file(s) will contain the styling for all the elements in the\nDOM tree. One major difference between the DOM tree and render tree would be,\nthe render tree would only contain the elements that are to be displayed in\nthe browser. So, if a DOM object has its styling as “display:none;”, it will\nnot be present in the render tree.",[303,344,346],{"id":345},"_4-layout","4. Layout.",[296,348,349],{},[310,350],{"alt":351,"src":352},"layout","\u002Fassets\u002Fimages\u002Fblog\u002F121020\u002Flayout.jpg",[296,354,355],{},"All the HTML elements can be considered as boxes. The CSS box model is\nessentially a box that wraps around every HTML element consisting of margins,\nborders, padding and the actual content. All of these will be applied to the\nelements in the previous step. But even after that, the browser needs to\n“size” and “position” these elements. In this step the browser does that and\nforces the DOM and render tree to be rebuilt.",[303,357,359],{"id":358},"_5-painting","5. Painting.",[296,361,362],{},[310,363],{"alt":364,"src":365},"painting","\u002Fassets\u002Fimages\u002Fblog\u002F121020\u002Fpainting.jpg",[296,367,368],{},"Now, the browser knows which elements are to be displayed and their computed\nstyles and geometry. In this final step, this information is then converted to\nactual pixels on the screen with the help of the operating system and graphics\nengine of the device. The z-coordinate or z-index in CSS terms are also\nfinalized in this step. The previous step will determine the position I the\nx-y plane. This step is also called rasterization.",[296,370,371],{},"These are just the steps involved in loading and showing the page for the\nfirst time. These steps are undergone every time you load a new page. There is\nobviously a lot more. The JS files are responsible for adding interactivity\nand behavior to the page.",[296,373,374],{},"Disclaimer : The views and opinions expressed in the article belong solely to the\nauthor, and not necessarily to the author's employer, organisation, committee\nor other group or individual.",{"title":376,"searchDepth":377,"depth":377,"links":378},"",2,[379,380,381,382,383],{"id":305,"depth":377,"text":306},{"id":319,"depth":377,"text":320},{"id":332,"depth":377,"text":333},{"id":345,"depth":377,"text":346},{"id":358,"depth":377,"text":359},"2020-10-11","How does a typical browser loads and displays a webpage.","md","\u002Fassets\u002Fimages\u002Fblog\u002F121020\u002Ftitle.jpg",{},4,true,{"title":98,"description":385},"FzDf41up2edZrv4JWDoTJ2GAvhzPnB5sH1Hlpdst9rU",[394,397],{"path":95,"title":94,"description":395,"date":396},"What are the good practices to make git work in our favor.","2020-10-18",{"path":195,"title":194,"description":398,"date":399},"What are some of the factors that help the way we evolve as an engineer.","2020-10-04",1790439209542]