As a web developer everyday we use browsers to run our developed websites. But have you ever thought about the process the browsers undergo to render your webpage? It’s all because of the rendering engine.
Rendering engine is one of the browser component which interprets HTML and other resources linked to it and present a webpage on the screen.
To render a webpage rendering engine go through a set of steps.
DOM → CSSOM → Render tree → Layout → Paint
We will see each phase in detail with below example.
DOM (Document Object Model):
Let’s understand this with an example. Can you guess what below three console.log prints?
Note: curly braces in console.log print the value with it’s variable name.
Like variable declarations, function declarations also get hoisted. What does that mean? Before execution starts, function declarations get stored in the memory and in execution phase they are accessible before its definition or declaration. Let’s see an example.
Let’s start with an example. What will be the output here?
It print’s undefined. Confused! Instead of throwing an error why the variables a and b prints undefined? How these variables are accessible before it’s declarations?
As per the definitions available over the internet hoisting means variable declarations and function declarations are moved to top…