Difference between Virtual DOM and Real DOM
প্রিয় ডেভেলপারস, আসসালামু আলাইকুম। আশা করি আপনারা সবাই ভালো আছেন। আজকে React এর গুরুত্বপূর্ণ বিষয় Real DOM
এবং Virtual DOM নিয়ে বিস্তারিত আলোচনা করবো,
তাহলে চলুন শুরু করা যাক।
Real DOM এবং Virtual DOM জানার আগে DOM সম্পর্কে বিস্তারিত জানতে হবে,
তাহলে DOM কি? DOM এর পূর্ণরুপ
হলো Document Object Model (ডকুমেন্ট অবজেক্ট মডেল)। সহজে বলা যায়, DOM হচ্ছে
XML বা HTML Document এর জন্য একটা প্রোগ্রামিং
ইন্টারফেস এবং একটি ডকুমেন্টের
স্ট্রাকচারকে Object Tree হিসেবে উপস্থাপন করে। এই ওয়েব ডকুমেন্টের মধ্যে প্রত্যেকটি
UI Element নোড হিসেবে কাজ করে এবং যা জাভাস্ক্রিপ্টের মাধ্যমে মডিফাই এবং পেজের সঙ্গে
ইন্ট্যার্যাক্ট সহজে করা যায়।
DOM যেহেতু অবজেক্ট কে উপস্থাপন করে এবং সেখানেও জাভাস্ক্রিপ্টের
অন্যান্য অবজেক্টের মতোই বিশেষ কিছু Property ও Method রয়েছে। যেগুলোর সাহায্যে আমরা
আমাদের ওয়েব পেজের এ্যাক্সেস করতে পারি এবং প্রয়োজনুসারে পরিবর্তন বা পরিবর্ধন করতে
পারি।
Real DOM হলো এমন ডকুমেন্ট অবজেক্ট মডেল, যা একটি ওয়েব পেইজের
ব্রাউজ করার সময় তৈরি হয়। এটি দেখতে Hierarchical Tree (হায়ারকাল ট্রি) এর মতো এবং
যা HTML বা XML ডকুমেন্টের স্ট্রাকচার উপস্থাপন করে। প্রত্যেক ডকুমেন্ট এর আপডেট এর
সাথে সাথে ইলিমেন্ট এবং ইলিমেন্টের চিলড্রেন নতুনভাবে রেন্ডার হয় এবং আপডেটেড UI ওয়েব
পেইজে প্রদর্শিত হয়। যা সময়সাপেক্ষ এবং ব্যায়বহুল। নিম্নে Real DOM এর কিছু বৈশিষ্ঠ্য
উল্লেখ করা হলো –
- Real DOM প্রকৃতপক্ষে ওয়েব পেইজের স্ট্রাকচার।
- React এর ডকুমেন্ট আপডেট সরাসরি Real DOM হয়ে থাকে।
- React DOM হলো প্রকৃত ওয়েবপেইজ যা ব্রাউজার রেন্ডার করা যেকোন পরিবর্তন সরাসরি ওয়েবপেইজে প্রতিফলিত হয়।
- DOM ওয়েব পেইজ একটি লজিক্যাল ট্রি এবং এর শাখা – প্রশাখায় অসংখ্য নোড রয়েছে আর এই নোড জাভাস্ক্রিপ্টের মাধ্যমে পরিবর্তন করতে পারি। লজিক্যাল ট্রি এর মতো DOM এর গঠনের কারণে DOM এর পরিবর্তন এবং আপডেট দ্রুত হয় কিন্তু পুরো নোড পুনরায় রেন্ডার করার সময় DOM কে ধীর করে দেয়। প্রতিটি DOM আপডেটের জন্য সমস্ত UI কম্পোনেন্ট পুনরায় রেন্ডার করতে হয়।
Virtual DOM হলো Real DOM এর Lightweight copy। যা সাধারণত
virtually তৈরি হয় একটি DOM। যেখানে Real DOM এর মতো সকল Properties এক্সেস রয়েছে কিন্তু
Virtual DOM সরাসরি ডকুমেন্ট এর লেআউট পরিবর্তন করতে পারে না।
Virtual DOM কীভাবে কাজ করে?
যখন কোড রান হয়, ওয়েব পেইজটি বিভিন্ন মডিউলে ভাগ হয়। এবং Virtual DOM এটিকে DOM এর সাথে তুলনা করে এবং কোন পার্থক্য আছে কিনা তা যাচাই করে। যদি পার্থক্য খুঁজে পায় তাহলে DOM এ নতুন আসা পরিবর্তিত অংশটুকু আপডেট করে এবং বাকি অংশ বা ইলিমেন্ট এর নোড গুলো অপরিবর্তিত থাকে। নিম্নে Virtual DOM এর কিছু বৈশিষ্ঠ্য উল্লেখ করা হলো –
- Virtual DOM, Real DOM এর ভার্চুয়াল উপস্থাপনা মাত্র।
- React স্টেট পরিবর্তনের আপডেট প্রথমত Virtual DOM এ হয়ে থাকে এবং পরবর্তিতে Real DOM এর সাথে sync করে দেয়।
- Virtual DOM হলো একটি প্রোগ্রামিং এর ধারণা যেখানে একটি ওয়েবের ইউআই এর ভার্চুয়াল উপস্থাপনা মেমোরিতে রাখা হয় Real DOM এর সাথে এবং ReactDOM লাইব্রেরি দ্বারা sync হয়। আর এই sync হওয়ার প্রক্রিয়াটিকে reconciliation (পুনর্মিলন / সমন্বয়সাধন) বলে।
Real DOM এবং Virtual DOM এর মধ্যে পার্থক্য:
|
Real DOM |
Virtual DOM |
|
Real DOM প্রকৃতপক্ষে একটি ওয়েব পেইজের
স্ট্রাকচার উপস্থাপন করে। |
অন্যদিকে, Virtual DOM একটি ওয়েব পেইজের
ভার্চুয়াল/মেমরি উপস্থাপন করে। |
|
DOM ম্যানিপুলেশন
খুব ব্যায়বহুল। |
DOM ম্যানিপুলেশন খুব সহজ। |
|
অনেক মেমরি অপচয় হয়। |
কোন মেমরির অপচয় হয় না। |
|
ধীরে ধীরে আপডেট হয়। |
দ্রুত আপডেট হয়। |
|
সরাসরি HTML আপডেট করে। |
সরাসরি HTML আপডেট করে না। |
|
Element আপডেট হলে নতুন DOM তৈরি করে। |
Element আপডেট হলে JSX তৈরি করে। |
|
এটি অ্যাপ্লিকেশনের UI উপস্থাপন
করে। |
এটি DOM এর ভার্চুয়াল উপস্থাপন মাত্র। |
আশা করি আপনি আজকের এই ব্লগটি মনোযোগ সহকারে পড়েছেন। আজকের ব্লগটি আপনার কাছে কেমন লেগেছে অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। পোষ্টে উল্লিখিত কোনো অংশ যদি বুঝতে সমস্যা হয়, তাহলে কমেন্ট বক্সে জানিয়ে দিন। ইনশাআল্লাহ্, সমস্যা সমাধানের চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন ব্লগে। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।
