In this article, We will learn how the browser rendering engine works under the hood and display a webpage on the user screen.

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):

  • When you type…

Scope is one of the fundamental concepts of JavaScript. As a JavaScript developer you must be aware and have deep understanding of this concept. Let’s start.

A scope in JavaScript defines which variables and functions you have access to, It depends on from where you are trying to access.

Let’s understand this with an example. Can you guess what below three console.log prints?


fig1. Example1


fig2. Output of example1

Note: curly braces in console.log print the value with it’s variable name.


JavaScript engine consider the variable athlete at line 1 and line 4 as two different variables because they both are…

In my previous post I gone through variable hoisting in JavaScript. Before continuing this post read variable hoisting for better understanding.

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.


fig1. Function Hoisting

Here we are invoking the function before it’s declaration. This is a valid call in JavaScript and gets executed without any errors. It prints 10 on the console.

In Memory creation phase JavaScript engine go through the code and if…

If you are coding in JavaScript for a while then you must have heard the concept called hoisting. You might have known this concept but did you know what really happening behind the scene. Let’s jump in.

Let’s start with an example. What will be the output here?


Hoisting in JavaScript

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?

This behavior of JavaScript is called hoisting.

As per the definitions available over the internet hoisting means variable declarations and function declarations are moved to top…

Wazeed Mohammad

Web Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store