DEV Community: K.Saravanakumar

Microtasks and (Macro)tasks in Event Loop

K.Saravanakumar — Sun, 15 Aug 2021 02:01:40 +0000

JavaScript has a concurrency model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks.

Here, we will see about microtask and macrotask in event loop and how event loop will handle tasks.

let’s dive in! 🏃‍♂️

Within the Event Loop, there are actually 2 type of queues: the (macro)task queue (or just called the task queue), and the microtask queue. The (macro)task queue is for (macro)tasks and the microtask queue is for microtasks.

Microtask

A microtask is a short function which is executed after the function or program which created it exits and only if the JavaScript execution stack is empty.

Promise callback
queueMicrotask

Macrotask

A macrotask is short function which is executed after JavaScript execution stack and microtask are empty.

setTimeout
setInterval
setImmediate

Explanation

When a Promise resolves and calls its then(), catch() or finally(), method, the callback within the method gets added to the microtask queue! This means that the callback within the then(), catch() or finally() method isn’t executed immediately, essentially adding some async behavior to our JavaScript code!

So when is a then(), catch() or finally() callback executed?🤷‍♂️

Here the event loop gives a different priority to the tasks.

All functions in that are currently in the call stack get executed. When they returned a value, they get popped off the stack.

When the call stack is empty, all queued up microtasks are popped onto the call stack one by one, and get executed! (Microtasks themselves can also return new microtasks, effectively creating an infinite microtask loop).

If both the call stack and microtask queue are empty, the event loop checks if there are tasks left on the (macro)task queue. The tasks get popped onto the call stack, executed, and popped off!

Example

Task1: A function that’s added to the call stack immediately, for example by invoking it instantly in our code.

Task2, Task3, Task4: microtasks, for example a promise then callback, or a task added with queueMicrotask.

Task5, Task6: a (macro)task, for example a setTimeout or setImmediate callback

First, Task1 returned a value and got popped off the call stack. Then, the engine checked for tasks queued in the microtask queue.
Once all the tasks were put on the call stack and eventually popped off, the engine checked for tasks on the (macro)task queue, which got popped onto the call stack, and popped off when they returned a value.

Here’s graphic illustration of the event loop 👇

Conclusion

Congratulations for reading until the end! In this article you’ve learned:

How microtask and macrotask are working in event loop.

I hope you find this article helpful in understanding microtask and macrotask how it works.

Suggestions are highly appreciated ❤️

JavaScript ASYNC & DEFER Attributes

K.Saravanakumar — Sat, 14 Aug 2021 02:53:04 +0000

Rendering DOM or Webpage faster is one of challenging task that every developer face🤯. One of the main factors of the slow rendering of DOM is the strategy with which we load the JavaScript because JS blocks the parsing of HTML and that’s why the DOM performance highly depends on it.

However, few keywords can be used with script tag to boost the performance. The <script> tag has two attributes that do the magic⚡️ for us : async and defer.

Here’s what we’ll cover in this article:

<script> without attributes.
<script> async attributes.
<script> defer attributes.

So let’s dive in!

`<script>` without attributes

As soon as the browser encounters the script tag, the HTML parsing is blocked and will only start up again after the JavaScript is fetched from the server and executed.

While the Javascript is loading, the building up of the DOM is paused and that reduces the performance and increases the loading time of the webpage.

`<script>` async attributes

Using async attribute downloads the script files asynchronously during HTML parsing ( in the background). After it finished downloading, only then it paused the HTML parsing and start executing the script file but before the window’s load event.

The async attribute does not guarantee the order of execution of script files. The script files will be executed asynchronously or in random order.

`<script>` defer attributes

The defer attribute also downloads the script file during HTML parsing( in the background) but will only execute it after the HTML parsing is completed but before DOMContentLoaded event.

Using defer in the script tag also assured that the scripts will be executed in the same order as they appear in the file. This is very much useful in the scenario when one script depends on another script.

This is how it all works: 👇

Similarity

Both defer and async attribute downloads the script in background while the HTML parsing is going on. Downloading of scripts this way does not block the rendering of DOM and as a result, user can see the webpage instead of a white screen.

Difference

defer :- Script execution starts after HTML parsing is finished but before the DOMContentLoaded event.

async :- Scripts execute after they finish downloading but before the window’s load event.

Where async and defer use?

If the script files are dependent on each other, then use defer attribute.
async attribute is useful when we don’t care when the script loads and scripts do not rely on each other.
defer maintains the order of execution of script but async doesn't.

Conclusion

Congratulations for reading until the end! In this article you’ve learned:

Javascript async and defer
Similarity and difference and where to use of async and defer attributes in script tag.

Suggestions are highly appreciated ❤️

Understanding of DOM(Document Object Model), Shadow DOM, Virtual DOM.

K.Saravanakumar — Sat, 14 Aug 2021 02:16:44 +0000

DOM (Document Object Model) is a fundamental concept in front-end, and for sure, everyone who tried to learn programming has heard about it more than once. For beginners, it’s not so easy to understand what it exactly is and how to manipulate it. DOM manipulation is most important and that brings lot of issue with performance.
Nowadays, there are two essential concepts of DOM came with web frameworks like React.js or Vue.js or Angular, such as Shadow DOM and Virtual DOM.

Here’s what we’ll cover in this article:

what is the Document Object Model?
what is Shadow DOM?
what is Virtual DOM?

So let’s dive in!

what is the Document Object Model?

Beginners often mislead DOM with what they create as an HTML structure of their website or application. But HTML becomes the DOM after the browser parses it, then it becomes the DOM.

The definition says that DOM is an API for HTML or XML documents and it creates a logical structure which can be accessed and manipulated. In other words, Javascript can access and do changes in the Document Object Model.

The reason to implement the Document Object Model was to provide a standard programming interface, which could be used with any programming language in different environments. By DOM modification, we can understand adding, delete, or modify the elements of the website, assigning them different behavior, etc.

Every browser has its global object, called window. Inside the window, there are different properties and methods. One of the properties in the window object is a document where we may find lots of properties and methods which can be used to access the DOM elements to interact with them.

The graphic representation of the DOM looks like below:👇

As you can see, it’s created as a tree. It starts from the main document object, then the html object is created, and html element leads to head and body, and so on. Each of the objects represents an HTML element from the website as an object, with properties, attributes, and methods which allows to modify it.

what is Shadow DOM?

Shadow DOM is a tool used to build component-based apps and websites. Shadow DOM comes in small pieces, and it doesn’t represent the whole Document Object Model. We can see it as a subtree or as a separate DOM for an element. Shadow DOM can be imaged like bricks from which the DOM is created.

The main difference between DOM and Shadow DOM is how it’s created and how it behaves. Normally DOM nodes which we create are placed inside other elements, like in the tree we saw before. In the case of Shadow DOM, we create a scoped tree, which is connected to the element but separated from the children elements. It’s called shadow tree and the element it’s attached to is called shadow host.

Let look at example : 👇

Here we come to a great advantage of the Shadow DOM, everything which we will add to Shadow DOM is local, even styles. Let’s explain why Shadow DOM is so useful and what issues it solves. First of all, it isolates the DOM, so the DOM of the component is a separate element which won’t appear in a global DOM.

☞ It helps with is scoping of the CSS, which means styles created inside the single Shadow DOM element are isolated and stays in the scope of that Shadow DOM. It simplifies styling a lot as we don’t have to worry a lot about naming space and we can use simple selectors and class names.

☞ Shadow DOM can affect the performance of the application. As said at the beginning of the article, there are a lot of performance issues while we want to manipulate the DOM, because every change will make a re-rendering of the whole object. In the case of Shadow DOM browser knows which part should be updated.

Take a break

So far so good — take a break!

what is Virtual DOM?

Virtual DOM is a concept of DOM used by React.js and Vue.js. In Virtual DOM concept copy of DOM is saved in the memory and while any change is done in the DOM, it’s compared to find differences. Then browser knows which elements were changed and can update only those part of the application to avoid re-rendering all the DOM. It’s done to improve the performance of the UI libraries.

Let look at example : 👇

Let look at how it work : 👇

As we know, form the above in DOM, every element is re-rendered, no matter if it was changed or not. Let’s check in depth how Virtual DOM works step by step. So first, the change is done, and it’s done to the Virtual DOM, not to the original DOM, then the Virtual DOM is compared with the Document Object Model, and this process is called “diffing”. While the differences are found then browser know which elements in the original DOM should be updated and the update is done.

In the Virtual DOM concept, it’s possible to apply more than one change at once, to avoid re-rendering for every single element change. The biggest issue that Virtual DOM solves is the performance improvement on DOM manipulation.

Differences between Shadow DOM and Virtual DOM

The only thing which is common for both is that they help with performance issues.

Both create a separate instance of the Document Object Model; besides this, both concepts are different. Virtual DOM is creating a copy of the whole DOM object, and Shadow DOM creates small pieces of the DOM object which has their own, isolated scope for the element they represent.

Conclusion

Congratulations for reading until the end! In this article you’ve learned:

➣ What is DOM
➣ What is shadow DOM and virtual DOM
➣ Difference between Shadow DOM and virtual DOM

I hope you find this article helpful in understanding what the DOM is and how Virtual and Shadow DOM concepts work.

DEV Community: K.Saravanakumar

Microtasks and (Macro)tasks in Event Loop

Microtask

Macrotask

Explanation

Example

Conclusion

JavaScript ASYNC & DEFER Attributes

Here’s what we’ll cover in this article:

<script> without attributes

<script> async attributes

<script> defer attributes

Similarity

Difference

Where async and defer use?

Conclusion

Suggestions are highly appreciated ❤️

Understanding of DOM(Document Object Model), Shadow DOM, Virtual DOM.

Here’s what we’ll cover in this article:

what is the Document Object Model?

what is Shadow DOM?

Take a break

what is Virtual DOM?

Differences between Shadow DOM and Virtual DOM

Conclusion

Suggestions and criticisms are highly appreciated ❤️

`<script>` without attributes

`<script>` async attributes

`<script>` defer attributes