Ի՞նչ տարբերություն կա 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 կամ մոդուլներ)	Կա
Ստանդարտ	Վեբ-հարթակների մաս	Ֆրեյմվորկների կոնցեպցիա	Վեբ-հարթակների մաս