რა განსხვავებაა Shadow DOM, Virtual DOM და ჩვეულებრივ DOM-ს შორის?

DOM (Document Object Model) — ეს არის API HTML და XML დოკუმენტებისთვის. წარმოადგენს ნამდვილი ნუსხის ხეს, სადაც თითოეული ნუსხა შესაბამისია ელემენტს, ატრიბუტს ან ტექსტურ ფრაგმენტს დოკუმენტში. გამოიყენება სტრუქტურის, სტილების და შინაარსის წვდომისა და მანიპულირებისთვის. DOM-ის პირდაპირი მანიპულაციები შეიძლება იყოს ნელი, რადგან საჭიროა სტილების, გეგმის და გადახედვის გამოთვლა.

Virtual DOM — ეს კონცეფციაა, რომელიც გამოიყენება React ან Vue ტიპის ფრეიმვორკებში. ეს არის DOM ხის წარმოდგენა, რომელიც ინახება მეხსიერებაში. როდესაც კომპონენტის მონაცემები იცვლება, ფრეიმვორკი ქმნის ახალ ვირტუალურ DOM ხეს. შემდეგ ის შედარებულია წინა ვირტუალურ ხესთან (დისფინგი) და განსაზღვრავს მინიმალურ ცვლილებების რაოდენობას, რომელიც უნდა განხორციელდეს რეალურ DOM-ზე. ეს საშუალებას აძლევს ოპტიმიზიროს გვერდის განახლება, მინიმუმამდე შეამციროს ძვირადღირებული ოპერაციები რეალურ DOM-ზე.

Shadow DOM — ეს ვებ სტანდარტია, რომელიც საშუალებას აძლევს ინკაპსულიროს კომპონენტის სტრუქტურა, სტილები და ქცევა. ქმნის დამალულ "ჩრდილოვან" ხეს DOM-ში, რომელიც მიერთებულია ელემენტთან ჩვეულებრივ DOM-ში (ჰოსთ-ელემენტი). Shadow DOM-ის შინაარსი იზოლირებულია დანარჩენ დოკუმენტთან: მისი შიგნით სტილები არ ზემოქმედებს გარე სამყაროზე, და პირიქით. ეს სასარგებლოა განმეორებადი ინკაპსულირებული კომპონენტების შექმნისთვის, მაგალითად, <video> ან <input type="range">.

ძირითადი განსხვავებები:

მახასიათებელი	ჩვეულებრივი DOM	Virtual DOM	Shadow DOM
წარმოდგენა	რეალური დოკუმენტის ხე API	მსუბუქი წარმოდგენა DOM-ის მეხსიერებაში	ინკაპსულირებული ხე DOM-ში
მიზანი	API წვდომა და ცვლილება დოკუმენტზე	DOM-ის განახლებების ოპტიმიზაცია	კომპონენტების ინკაპსულაცია
მანიპულაცია	პირდაპირი	ირიბი (ვერსიების შედარებით)	პირდაპირი, მაგრამ მხოლოდ "ჩრდილში"
სტილების იზოლაცია	არა	არა (თუ არ გამოიყენება CSS-in-JS ან მოდულები)	არსებობს
სტანდარტი	ვებ-პლატფორმის ნაწილი	ფრეიმვორკების კონცეფცია	ვებ-პლატფორმის ნაწილი