How Your Website Works behind The Scenes "Front-End Side"

A lot of developer these days totally have no idea how the website works behind the scenes, And only care about code, sure it's not a bad thing but if you know how your code works it 'll give you a good advantage plus its simple, so let's start.

What the Internet is?

Your machine (Your iPhone, or Chrome, etc .. ) is making requests to a server and getting Responses back, the server is another machine connected on the internet, and since it Connected to the internet it gets something called an IP address, so we can call it A Box With IP address.

Why your computer is not a server?

In fact, when you plug-in to the internet your computer gets an IP address and anyone has Your IP address can access your computer, like server but you don't have a server software.

So when you try to open your website

The internet doesn't know your server's IP address, so he 'll take your request to something Called ISP "Standing for internet service provider charter" and do something called DNS "standing for Domain name service" lookup, and it 'll translate your DNS to IP address, So He 'll routes you to your IP Box which he configured.

Now when you send a request to the server you 'll get the response immediately, and every Request to the server you can expect anything from the server like image or stylesheet or Html, but what the browser actually give you is 2 things file and content type like "index.html And text/Html", and now the browser know how to treat the Html file.

How Browser Treat Html File?

Parsing process, for the most part, is line by line from tag start to tag end and it stops every Time you ask for assets like stylesheet or javascript file to make another request to the Server and as we know the server response with 2 things again "file and content-type".

And now let's see how all the parsing process behind the scene in details.

"I'll give a small overview of it"

The start point here when the browser open first thing happens is loading Html

When The Html loaded the browser Parse HTML, and while parsing he 'll create the DOM "Document Object modal" and meet the first asset (style sheet) in the head tag, then he 'll start to load the StyleSheet as the picture explain and parsing it.

And there are two steps to finish the parsing CSS to create CSSOM "cascade StyleSheet Object modal".

1- CASCADE

And this step is the process of combining different stylesheet and resolving the conflicting Between different CSS rules and declaration when more than one rule applies to a certain Element, so it's mean when we have a lot of resources of stylesheet like "bootstrap and your main.css" or you have font-size or colour in serval places, here comes the importance of Cascade step and as we know there are always 3 resources of style

1- Author aka the developer

2- User "who can change from browser"

3- Browser (user agent) and this is the default value like font-size default is 16px

2- PROCESS FINAL VALUE

Here each time you use unit other than pixels like rem or vh you need to know it's Automatically converted to pixels and it happens in 6 steps.

(declared value -> Cascade Value -> Specified Value -> Computed Value -> Used Value -> Actual Value)

After Those Two Steps, The CSSOM Created.

And when the browser meets the second assets JS file

He starts to load It And Parse It.

JS Parsing

To start parsing the js you need a compiler because as we know the js is a compiled language, and our compiler here is the browser, so there is a lot of engine like "Google V8 Engine And SpiderMonkey And Reno".

After the parser start, he knows the rules of javascript like when you have to comma and Semicolons these things, so right he checks for syntax and if he finds mistakes he throws an Error, if he didn't find mistake he 'll start to convert the code to machine code and we can Say the machine code is "Set of instructions" and finally the code run.

And now we have CSSOM AND DOM What the next step, The next Step is RENDER TREE when he merges both And go to the visual formatting modal.

The Visual Formatting modal

In this step, he starts to do some algorithm to calculate a bunch of things like position and Box model and float and in the end, he goes for Final Render when our page opens.

Conclusion

I hope that I explained the summary of behind scene process and sorry for my bad English If You have any queries or any mistakes that you think I have made would be more than happy If you could give suggestions to further improve it And if you have any question pm me

I would like to thank Jonas and his course on Udmey for teaching me so much and I Definitely recommend his courses