Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is DOM?
3.
Understanding Virtual DOM
4.
FAQs
5.
Key Takeaways
Last Updated: Mar 27, 2024

Rendering Mechanisms and Optimizations

Author Parth
0 upvote
gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

As Web Developers, we must understand the internal working of Vue’s rendering engine. This helps identify and understand problems during code development and even comes in handy while solving them. As our understanding of Vue’s rendering process grows, it will help us optimize the performance of an application.
Vue makes coding much more accessible and enjoyable, which is possible due to its smooth rendering. This blog focuses on Dom, Virtual DOM, and its working to understand rendering.

What is DOM?

The DOM or a Document Object Model is an object that represents all the data elements of the web. These elements contain the structure and content-related information and can be manipulated by the programmer. In other words, a DOM is a tree-based representation of an HTML document.

Source: W3Schools

The above image shows what an HTML DOM tree looks like. The document’s root is divided by the head and body elements. The body element contains all the content, whereas the head element contains all the functional behavior information.

Index.html

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
</head>
<body>
  <div id="app"></div>
  <h1>Hello User!</h1>
  <p>This is Paragraph 1</p>
  <div>
    <p>This is Paragraph 2</p>
  </div>
  <p>This is Paragraph 3</p>
  <h1>Welcome to Coding Ninjas</h1>
  <script src="src/index.js">
  </script>
</body>
</html>

Output

Index.js
const paragraphs = document.querySelectorAll("p");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element
// paragraphs[2] is the third <p> element
alert(paragraphs[0].innerHTML);

The index.js code helps us use the HTML DOM and access the index 0 in the paragraph array.

Output

All the properties, methods, and events are available for manipulation, and the changes are updated as a new DOM.
We use DOM to represent a document as nodes and objects. Also, it enables developers to add, delete and modify DOM elements while effortlessly navigating the tree.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Understanding Virtual DOM

While the HTML DOM is beneficial, it comes at a high cost. The re-rendering of the HTML DOM upon updation is costly as it takes a lot of time. Therefore a representation of the HTML DOM is used to perform addition, modification, and deletion operations. This representation of the real DOM is called a Virtual DOM.
The advantage of using a Virtual DOM is that they minimize the updation cost of the real DOM, and it is easy to mount to a traditional HTML DOM.Vue’s Virtual DOM contains Vue components that are extensions of Vue instances.
Let us consider a case where we have a table with data elements and a next button that renders new table data. Therefore, when the next button is pressed, the entire data elements are deleted in the DOM, and the new elements are re-rendered. However, when a Virtual DOM is used, the real DOM is not changed.
In Vue, the Virtual DOM is created by the render function. The render function takes three arguments: the element, an object with data, props, attributes, and more, and an array. The array contains children who have all these arguments, and then they can have children until we build a tree of elements.

export default function render()
return (openBlock(), createBlock(
"div", //element
{}, //state, props, style, attrs
[...] //children
[
createTextVNode( "This is a sample "),
createVNode( "ul", [
createVNode( "li", "Item Number 1" ),
createVNode( "li", "Item Number 2" )
]),
createTextVNode( "This is end of list")
]
))
}

The Virtual DOM offers the ability to control the timing at which the Virtual DOM is rendered. The HTML DOM will completely re-render the same data, while the Virtual DOM will maintain the state of the data without re-rendering the data if you choose not to reload the Virtual DOM. Also, Vue’s Virtual DOM  allows us to optimize a web application’s performance by minimizing the number of times the DOM has to be updated.

Also see,Queryselectorall

FAQs

  1. What is Vue Virtual DOM?
    A Virtual DOM is a lightweight copy of the real DOM with the added benefit of fast rendering processes. Also, the Virtual DOM has extended behavior, meaning that the DOM elements extend from Vue’s instance.
     
  2. How is Virtual DOM faster than traditional DOM?
    Virtual DOM does not change the real DOM. Instead, it re-renders itself and displays to the website.

Key Takeaways

In this article, we learned about Vue’s rendering mechanism using Virtual DOM and how it reduces the costly re-rendering process of the HTML DOM. We also learned how the DOM is used to trigger changes in a document. However, this isn’t enough, as there is always much more to explore and learn about this vast field of Web Development. To know more about Vue and its intricacies, check out the articles on Vue or enroll in our highly curated Web Development course.     

Previous article
Computed Properties in VueJs
Next article
Change Detection Caveats in Vue 2
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass