Sanal DOM Nedir?

Geçenlerde DOM ve shadow DOM‘nin ne olduğu ve nasıl farklı oldukları hakkında yazmıştım. Özetlemek için DOM (Belge Nesne Modeli), bir HTML belgesinin nesne temelli bir temsilidir ve bu nesneyi işlemek için bir arabirimdir. Shadow DOM, DOM’un “alt” versiyonu olarak düşünülebilir. Aynı zamanda, HTML öğelerinin nesne temelli bir temsilidir, ancak tam bağımsız bir değildir. Bunun yerine, shadow DOM, DOM’umuzu HTML belgelerinde kullanılabilecek daha küçük, kapsüllenmiş bölümlere ayırmamızı sağlar.

Karşılaştığınız diğer benzer terim “sanal DOM” dur. Konsept birkaç yıldan beri var olmasına rağmen, React frameworkünde kullanımıyla daha popüler hale getirildi. Bu makalede, tam olarak sanal DOM’un ne olduğunu, orijinal DOM’dan nasıl farklı olduğunu ve nasıl kullanıldığını ele alacağım.

İçindekiler

Neden sanal bir DOM’a ihtiyacımız var?

Sanal DOM kavramının neden ortaya çıktığını anlamak için, orijinal DOM’u tekrar gözden geçirelim. Bahsettiğim gibi, DOM’un iki bölümü vardır – HTML belgesinin nesne tabanlı temsili ve bu nesneyi işlemek için API.

Örneğin, bu basit HTML belgesini sırasız liste ve bir liste öğesi ile birlikte alalım.


<!doctype html>
<html lang="tr">
 <head></head>
 <body>
    <ul class="list">
        <li class="list__item">Liste Öğresi</li>
    </ul>
  </body>
</html>

<!doctype html>

<body>

<li class="list__item">Liste Öğresi</li>

</ul>

</body>

</html>

Bu belge aşağıdaki DOM ağacı olarak gösterilebilir:

virtual dom nedir

Diyelim ki ilk liste öğesinin içeriğini “Liste öğesi bir” olarak değiştirmek ve ikinci bir liste öğesi eklemek istiyoruz. Bunu yapmak için, güncellemek istediğimiz öğeleri bulmak, yeni öğeler oluşturmak, nitelikler ve içerik eklemek ve sonunda DOM öğelerini kendileri güncellemek için DOM API’lerini kullanmamız gerekir.


<!doctype html>
<html lang="tr">
 <head></head>
 <body>
    <ul class="list">
        <li class="list__item">Liste Öğresi</li>
    </ul>
     
    <script>
        /*birinci öğenin içeriğini değiştirme*/
        const listItem1 = document.getElementsByClassName("list__item")[0];
        listItem1.textContent = "List Öğresi bir";

        /*ikinci liste öğesini ekleme*/
        const list = document.getElementsByClassName("list")[0];
        const listItem2 = document.createElement("li");
        listItem2.classList.add("list__item");
        listItem2.textContent = "List Öğresi iki";
        list.appendChild(listItem2);

    </script>
  </body>
</html>

<!doctype html>

<body>

<li class="list__item">Liste Öğresi</li>

</ul>

/*birinci öğenin içeriğini değiştirme*/

const listItem1 = document.getElementsByClassName("list__item")[0];

listItem1.textContent = "List Öğresi bir";

/*ikinci liste öğesini ekleme*/

const list = document.getElementsByClassName("list")[0];

const listItem2 = document.createElement("li");

listItem2.classList.add("list__item");

listItem2.textContent = "List Öğresi iki";

list.appendChild(listItem2);

</script>

</body>

</html>

DOM bunun için yapılmadı…

DOM için ilk şartname 1998’de yayımlandığında, web sayfalarını çok farklı bir şekilde oluşturulurdu ve yönetilirdi. Sayfa içeriğini bugün yaptığımız kadar sık oluşturmak ve güncellemek için DOM API’lerine çok daha az güvenilirdi.

document.getElementsByClassName() gibi basit yöntemler küçük ölçekli olarak kullanmaya uygundur, ancak bir kaç saniyede bir sayfada birden fazla öğe güncelliyorsak, DOM’yi sürekli sorgulamak ve güncellemek gerçekten masraflı bir hale gelmeye başlayabilir.

Dahası, API’lerin kurulum şekli nedeniyle, belgenin daha büyük bölümlerini güncellediğimizde, belirli öğeleri bulmaktan ve güncellemekten daha pahalı işlemler yapmak genellikle daha kolaydır. Liste örneğimize geri dönersek, bazı sıralanmamış listenin tamamını belirli öğeleri değiştirmek yerine yenisiyle değiştirmek bazı yönlerden daha kolaydır.


<!doctype html>
<html lang="tr">
 <head></head>
 <body>
    <ul class="list">
        <li class="list__item">Liste Öğresi</li>
    </ul>
     
    <script>
        const list = document.getElementsByClassName("list")[0];
        list.innerHTML = `
        <li class="list__item">List öğesi bir</li>
        <li class="list__item">List öğesi iki</li>
        `;

    </script>
  </body>
</html>

<!doctype html>

<body>

<li class="list__item">Liste Öğresi</li>

</ul>

const list = document.getElementsByClassName("list")[0];

list.innerHTML = `

<li class="list__item">List öğesi bir</li>

<li class="list__item">List öğesi iki</li>

</script>

</body>

</html>

Bu özel örnekte, yöntemler arasındaki performans farkı muhtemelen önemsizdir. Bununla birlikte, web sayfasının boyutu büyüdükçe, yalnızca ihtiyaç duyulanın seçilmesi ve güncellenmesi daha önemli hale gelir.

… ama artık sanal DOM hayatımıza girdi!

Sanal DOM, DOM’yi daha performansla güncelleştirmek için gereken bu sorunları çözmek için oluşturuldu. DOM veya gölge DOM’dan farklı olarak, sanal DOM resmi bir özellik değil, DOM ile yeni bir arayüz oluşturma yöntemidir.

Sanal bir DOM, orijinal DOM’nin bir kopyası olarak düşünülebilir. Bu kopya, DOM API’leri kullanmadan, sıklıkla manipüle edilebilir ve güncellenebilir. Tüm güncellemeler sanal DOM’da yapıldıktan sonra, orijinal DOM’de hangi özel değişikliklerin yapılması gerektiğine bakabilir ve bunları hedeflenmiş ve optimize edilmiş bir şekilde yapabiliriz.

Sanal bir DOM neye benziyor?

“Sanal DOM” adı, kavramın gerçekte ne olduğunun gizemine eklenme eğilimindedir. Aslında, sanal bir DOM sadece normal bir Javascript nesnesidir.

Daha önce oluşturduğumuz DOM ağacını tekrar inceleyelim:

virtual dom nedir

Bu ağaç ayrıca bir Javascript nesnesi olarak da temsil edilebilir.


    <script>
        const vdom = {
            tagName: "html",
            children: [{
                    tagName: "head"
                },
                {
                    tagName: "body",
                    children: [{
                            tagName: "ul",
                            attributes: {
                                "class": "list"
                            },
                            children: [{
                                    tagName: "li",
                                    attributes: {
                                        "class": "list__item"
                                    },
                                    textContent: "List Öğesi"
                                } // end li
                            ]
                        } // end ul
                    ]
                } // end body
            ]
        } // end html
    </script>

const vdom = {

tagName: "html",

children: [{

tagName: "head"

{

tagName: "body",

children: [{

tagName: "ul",

attributes: {

"class": "list"

children: [{

tagName: "li",

attributes: {

"class": "list__item"

textContent: "List Öğesi"

} // end li

]

} // end ul

]

} // end body

]

} // end html

</script>

Bu nesneyi sanal DOM’umuz olarak düşünebiliriz. Orijinal DOM gibi, HTML belgemizin nesne temelli bir temsilidir. Fakat düz bir Javascript nesnesi olduğu için, ihtiyaç duyulana kadar gerçek DOM’a dokunmadan, özgürce ve sıkça değiştirebiliriz.

Tüm nesne için bir nesne kullanmak yerine, sanal DOM’un küçük bölümleriyle çalışmak daha yaygındır. Örneğin, sıralanmamış liste elemanımıza karşılık gelen bir liste bileşeni üzerinde çalışabiliriz.


const list = {
    tagName: "ul",
    attributes: { "class": "list" },
    children: [
        {
            tagName: "li",
            attributes: { "class": "list__item" },
            textContent: "List Öğesi"
        }
    ]
};

const list = {

tagName: "ul",

attributes: { "class": "list" },

children: [

{

tagName: "li",

attributes: { "class": "list__item" },

textContent: "List Öğesi"

}

]

};

Şimdi sanal bir DOM’nin neye benzediğini gördük, DOM’nin performans ve kullanılabilirlik sorunlarını çözmek için nasıl çalışıyor?

Bahsettiğim gibi, DOM’da yapılması gereken değişiklikleri belirlemek ve bu güncellemeleri tek başına yapmak için sanal DOM’yi kullanabiliriz. Sırasız liste örneğimize geri dönelim ve DOM API kullanarak yaptığımız değişiklikleri yapalım.

Yapacağımız ilk şey, yapmak istediğimiz değişiklikleri içeren sanal DOM’un bir kopyasını çıkarmak. DOM API’lerini kullanmamız gerekmediğinden, aslında tamamen yeni bir nesne oluşturabiliriz.


const kopya = {
    tagName: "ul",
    attributes: { "class": "list" },
    children: [
        {
            tagName: "li",
            attributes: { "class": "list__item" },
            textContent: "List öğesi bir"
        },
        {
            tagName: "li",
            attributes: { "class": "list__item" },
            textContent: "List öğesi iki"
        }
    ]
};

const kopya = {

tagName: "ul",

attributes: { "class": "list" },

children: [

{

tagName: "li",

attributes: { "class": "list__item" },

textContent: "List öğesi bir"

{

tagName: "li",

attributes: { "class": "list__item" },

textContent: "List öğesi iki"

}

]

};

Bu kopya, orijinal sanal DOM, bu durumda liste ve güncellenmiş olan arasında “fark” denilen şeyi oluşturmak için kullanılır. Bir fark böyle bir şeye benzeyebilir:


const farklar = [
    {
        yeniNode: { /* yeni versiyonu ilk öğenin */ },
        eskiNode: { /* orjinal verisyonu ilk öğenin */ },
        index: /* ebeveynin index değeri */
    },
    {
        yemiNode: { /* list öğesi iki*/ },
        index: { /* */ }
    }
]

const farklar = [

{

yeniNode: { /* yeni versiyonu ilk öğenin */ },

eskiNode: { /* orjinal verisyonu ilk öğenin */ },

index: /* ebeveynin index değeri */

{

yemiNode: { /* list öğesi iki*/ },

index: { /* */ }

}

]

Bu fark, gerçek DOM’in nasıl güncelleneceği ile ilgili talimatlar sunar. Tüm farklar toplandıktan sonra, sadece gerekli olan güncellemeleri yaparak DOM’daki değişiklikleri toplu olarak yapabiliriz.

Örneğin, her bir fark arasında döngü kurabilir ve yeni bir çocuk ekleyebilir veya farkın ne olduğuna bağlı olarak eski bir çocuğu güncelleyebiliriz.


const domElement = document.getElementsByClassName("list")[0];

farklar.forEach((fark) => {

    const yeniElement = document.createElement(fark.newNode.tagName);
        
    if (fark.eskiNode) {
        
        domElement.replaceChild(fark.yeniNode, fark.index);
    } else {
        domElement.appendChild(fark.yeniNode);
    }
})

const domElement = document.getElementsByClassName("list")[0];

farklar.forEach((fark) => {

const yeniElement = document.createElement(fark.newNode.tagName);

if (fark.eskiNode) {

domElement.replaceChild(fark.yeniNode, fark.index);

} else {

domElement.appendChild(fark.yeniNode);

}

})

Bunun, sanal bir DOM’un nasıl çalışabileceğinin gerçekten basitleştirilmiş ve elimden alınmış bir sürüm olduğunu ve burada ele almadığım birçok durum olduğunu unutmayın.

Sanal DOM ve Frameworkleri

Sanal DOM ile bir framework kullanarak çalışmak doğrudan yukarıdaki gibi kullanmaktan daha kolaydır.

React ve Vue gibi frameworkler, DOM’da daha performanslı güncellemeleri yapmak için sanal DOM konseptini kullanır. Örneğin, liste bileşenimiz React’e aşağıdaki şekilde yazılabilir.


import React from 'react';
import ReactDOM from 'react-dom';

const list = React.createElement("ul", { className: "list" },
    React.createElement("li", { className: "list__item" }, "List öğesi")
);

ReactDOM.render(list, document.body);

import React from 'react';

import ReactDOM from 'react-dom';

const list = React.createElement("ul", { className: "list" },

React.createElement("li", { className: "list__item" }, "List öğesi")

);

ReactDOM.render(list, document.body);

Listemizi güncellemek istiyorsak, tüm liste şablonunu yeniden yazabilir ve yeni listeye girerek ReactDOM.render() öğesini tekrar arayabiliriz.


    <script>
        const newList = React.createElement("ul", {
                className: "list"
            },
            React.createElement("li", {
                className: "list__item"
            }, "List öğesi bir"),
            React.createElement("li", {
                className: "list__item"
            }, "List öğesi iki")
        );

        setTimeout(() => ReactDOM.render(newList, document.body), 5000);
    </script>

const newList = React.createElement("ul", {

className: "list"

React.createElement("li", {

className: "list__item"

}, "List öğesi bir"),

React.createElement("li", {

className: "list__item"

}, "List öğesi iki")

);

setTimeout(() => ReactDOM.render(newList, document.body), 5000);

</script>

React sanal DOM kullandığından, tüm şablonu yeniden oluşturmamıza rağmen, yalnızca gerçekten değişen parçalar güncellenir. Değişiklik olduğunda geliştirici araçlarımıza bakarsak, belirli öğeleri ve değişen öğelerin belirli bölümlerini göreceğiz.

Örnek uygulama


<!doctype html>
<html lang="tr">
 <head></head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<body>
    <ul class="list">
        <li class="list__item">Liste Öğresi</li>
    </ul>

    <script>
        const newList = React.createElement("ul", {
                className: "list"
            },
            React.createElement("li", {
                className: "list__item"
            }, "List öğesi bir"),
            React.createElement("li", {
                className: "list__item"
            }, "List öğesi iki")
        );

        setTimeout(() => ReactDOM.render(newList, document.body), 5000);
    </script>
</body></html>

<!doctype html>

<body>

<li class="list__item">Liste Öğresi</li>

</ul>

const newList = React.createElement("ul", {

className: "list"

React.createElement("li", {

className: "list__item"

}, "List öğesi bir"),

React.createElement("li", {

className: "list__item"

}, "List öğesi iki")

);

setTimeout(() => ReactDOM.render(newList, document.body), 5000);

</script>

</body></html>

Sanal DOM Nedir?

Neden sanal bir DOM’a ihtiyacımız var?

Sanal bir DOM neye benziyor?

Sanal DOM ve Frameworkleri

Yorum Yap

İptal Et

Neden sanal bir DOM’a ihtiyacımız var?

Sanal bir DOM neye benziyor?

Sanal DOM ve Frameworkleri

Bunları da beğenebilirsiniz

Yorum Yap