Browser Workflow in Bangla

React JS এর ক্ষেত্রে আমরা বারবারই একটা fancy word শুনে থাকি, সেটা হলো Virtual DOM! যে myth টা মানুষের মধ্যে ঢুকে আছে সেটা হলো - Virtual DOM, আমাদের চির পরিচিত browser DOM এর থেকে অনেক fast এবং একারণে vanilla DOM এর থেকে React অনেক fast User Interface Render করে! আসলেই কি তাই? React কি শুধুই Performance achieve করার জন্যই Virtual DOM use করে?

আমরা শুনে থাকি DOM(document object model) টা slow and inefficient । কিন্তু এটা টিক না ।

react এর dom এর ক্ষেত্রে বলা হয় এটা dom(document object model ) এর চেয়ে বেশি efficient and fast way তে view render করতে পারে ।

*we will discuss here why reactDOM faster and efficent.
what is vartual dom
why we will choose react *

DOM কি আসলেই slow ?

truth is DOM আসলে যতয়েষ্ট fast । dom theke কোন element add or রিমুভ করা simple একটা জাভাস্ক্রীপ্ট object এ property set করার মতো ।

যে process টা slow তা হল dom change হওয়ার পরে আমাদের চোখের সামনে সেটাকে দেখানোর জন্যে browser কে যে কাজটা করতে হয় সেই
process টা slow

সেটা বুজতে হলে আমাদের ব্রাউজার এর workflow টা বুজতে হবে

browser workflow

browser যখন html file receive করে ব্রাউজার এর render enginee সেটাকে parse করে (html parse ) এবং একটা dom tree বানাই । dom tree তে সব html এলিমেন্ট এক এক টা node হিসাবে থাকে
একই সাথে html এর সাথে যে css style গুলো এসেছিল সেগুলো আবার css parser এর কাছে যায় এবং সেটাকে parse করে document object (dom) এর মতো আর একটা model বানাই তাকে cssom বলে

তাহলে dom হল html এর object model আর ccsom হল style এর অবজেক্ট মডেল

এই parse css আর parse html মিলে আর একটা render tree নামে tree বানাই
এই render tree কে layout নামের একটা prase এর মদ্যে দিয়ে যেতে হয় এই layout prase এ প্রতিটা render tree র element এর coordinate হিসেব করে element গুলোর সাথে attatch হয়ে যায় যেন screen এর কোন জায়গায় actually সেটা print হবে সেটা সে বুজতে পারে ।
যেহেতু এখন render tree এর কাছে element আছে সেগুলোর style আছে এবং কোন জায়গায় print করতে হবে সেগুলোর coordinate আছে তাই এবার last prase painting এ paint বা print করে দেয় যাতে আমরা দেখতে পরি বা display করতে পরি!