Projelerimde Shadow DOM uygulamak onları React tarafından kullanılan sanal DOM gibi daha hızlı hale getirecek mi?
Yanıtlar:
Sanal DOM
Sanal DOM, DOM'da yapılan değişiklikler genellikle sayfanın yeniden oluşturulmasına neden olduğundan performans açısından pahalı olan gereksiz DOM değişikliklerinden kaçınmakla ilgilidir. Sanal DOM, aynı anda uygulanacak birkaç değişikliğin toplanmasına da izin verir, bu nedenle her değişiklik bir yeniden oluşturmaya neden olmaz, bunun yerine yeniden oluşturma, DOM'a bir dizi değişiklik uygulandıktan sonra yalnızca bir kez gerçekleşir.
Gölge DOM
Shadow dom, daha çok uygulamanın kapsüllenmesi ile ilgilidir. Tek bir özel öğe, az ya da çok karmaşık DOM ile birlikte az çok karmaşık mantığı uygulayabilir. Bir sayfaya rastgele karmaşıklıktaki web uygulamasının tamamı bir içe <body><my-app></my-app>aktarımla eklenebilir ve aynı zamanda daha basit yeniden kullanılabilir ve bir araya getirilebilir bileşenler, dahili temsilin gölge DOM'da olduğu gibi gizlendiği özel öğeler olarak uygulanabilir <date-picker></date-picker>.
Stil kapsülleme Gölge DOM, stillerin tasarımcının istemediği öğelere yanlışlıkla uygulanmasını önlemekle de ilgilidir; örneğin, kullandığınız CSS veya bileşenler kitaplığı, artık aynı CSS sınıf adlarını kullanan diğer öğeler için geçerli olan bir seçiciyi değiştirdiğinden. Bileşenlere eklenen stillerin kapsamı bu bileşene alınır ve stillerin taşması veya içeri taşması önlenir.
Gölge DOM ve performans
Gölge DOM her ne kadar ilk etapta performansla ilgili olmasa da performansla ilgili etkileri de vardır. Stillerin kapsamı belirlendiğinden, tarayıcı, sayfanın yalnızca sınırlı bir alanını (özel bir öğenin gölge DOM'u) etkileyecek bazı değişiklikler hakkında varsayımlar yapabilir ve bu, yeniden oluşturma işlemini yeniden oluşturma yerine böyle bir bileşenin alanıyla sınırlayabilir. tüm sayfa.
Bu nedendir >>>, /deep/ve::shadow gölge DOM sınırları ötesinde stilleri uygulamak için izin CSS combinators, kullanımdan kaldırıldı ve Chrome'dan yakında kaldırılacağını tabidir (diğer tarayıcılar AFAIK onları hiç). Bu birleştiricilerin salt varlığı, önceki paragrafta bahsedilen optimizasyon türünü engeller.
Angular2 , her iki dünyanın avantajlarını kullanır.
Tek yönlü veri akışı kullanır ve değişiklik algılamasını yalnızca modelde çalıştırır. Algıladığı Eğer DOM güncelleme bağlamaları tarafından güncellenir ve benzeri yapısal direktifleri yapmak neden olur değiştirir *ngFor, *ngIf... DOM güncelleyin. Bu nedenle, DOM yalnızca model gerçekten değiştiğinde güncellenir.
Angular2 ViewEncapsulation.Native, tarayıcı tarafından sağlanan stil kapsülleme özelliklerini kullanmak için gölge DOM'u ( şu anda varsayılan değildir) kullanır veya (mevcut varsayılan), yerel gölge DOM ve CSS değişkenlerine kadar geçici bir çözüm olarak bileşenlere eklenen stilleri yeniden yazarak stil kapsüllemeyi taklit eder (dinamik genel stil değişiklikleri için) yaygın olarak kullanılabilir hale gelir.
Hayır, Shadow DOM ve Virtual DOM birbiriyle benzer şekilde adlandırılsalar da birbiriyle ilişkili değildir:
Sanal DOM: Farklı nedenlerle DOM'un (orijinal ve güncellenmiş) iki kopyasını tutma tepkisi kavramı. Oluşturmadan önce React, gerçek DOM ağacına güncelleme (ler) uygulayıp uygulamayacağını belirlemek için iki nesneyi farklılaştırır. Bu, tüm ekranı değil, yalnızca görünümün onu gerektiren kısımlarını güncellediğimiz için performansın artmasıyla sonuçlanır.
Gölge DOM: Part Web Bileşenleri spec temelde tek bir DOM öğesinin içine daha küçük DOM elemanları ve CSS stillerinin enkapsülasyonu verir W3C tarafından önerilen biçimiyle:
Örnek Gölge DOM Öğesi
<video width="300" height="150" />
Bununla birlikte, <video>aslında aşağıdaki öğeleri içerir:
<div>
<input type="button" style="color: blue;">Play
<input type="button" style="color: red;">Pause
<source src="myVideo.mp4">
</div>
Dolayısıyla, Shadow DOM kullanarak, web öğemizin uygulama ayrıntılarını gizleyebiliyoruz ve yalnızca gerekli bilgileri alt öğelere (yani height, width) iletebiliyoruz ; bu, belki de kafa karıştırıcı bir şekilde props, bileşenlere geçmenin ReactJS deyimine büyük ölçüde benziyor. .
Şu yolla sağlanan bilgiler :
<video>), ancak bir performans kazanımı beklentisi yok.