Özel HTML etiketleri için AngularJS direktif yükü

Womanne

Member
AngularJS direktifleri ile özel HTML etiketlerini standart etiketlere dönüştürmek hızlıdır; Ancak, bir web sitesinde toplu kullanım söz konusu olduğunda, milisaniyeler hızla anlamlı değerlere dönüşür.


Yeniden kullanılabilir yazılım bileşenleriyle çalışmayı seviyorum ve Don’t Repeat Yourself (DRY) ruhuyla, mümkün olduğu kadar çok program kodunu benim yazdığım bileşenlerden dış kaynak olarak alıyorum. Bu anlamda, Google’ın AngularJS JavaScript çerçevesindeki yönergeler, web geliştiricilerinin kendi HTML etiketlerini tanımlamasına olanak tanır ve bu etiketler, daha sonra tarayıcıda AngularJS tarafından standart etiketlere dönüştürülür.

Örneğin, Twitter Bootstrap’in CSS sınıflarının kullanımını daha özlü bir şekilde uygulayabilirsiniz. Yerine

<div class="row">
<span class="col-xs-2" style="background: greenyellow">
Zeile 1 - Spalte 1</span>
<span class="col-xs-2" style="background: lightpink">
Zeile 1 - Spalte 2</span>
<span class="col-xs-4" style="background: lightskyblue">
Zeile 1 - Spalte 3</span>
<span class="col-xs-4" style="background: khaki">
Zeile 1 - Spalte 4</span>
</div>

kendinden tanımlı etiketlerle yapılabilir VE çok daha kısaca yazın:

<row>
<xs2 bgcolor="greenyellow">Zeile 1 - Spalte 1</xs2>
<xs2 bgcolor="lightpink">Zeile 1 - Spalte 2</xs2>
<xs4 bgcolor="lightskyblue">Zeile 1 - Spalte 3</xs4>
<xs4 bgcolor="khaki">Zeile 1 - Spalte 4</xs4>
</row>

Ancak bir AngularJS dönüşümünün hangi performansı gerektirdiği sorusu ortaya çıkıyor. Güç kaybını ölçtüm: 100

-Her biri dörtlü etiketler -Aynı sayıdaki özel etiketlere kıyasla standart etiketlerle etiketleyin -Etiketler VE .
Google Chrome sürüm 44 geliştirici araçlarındaki Zaman Çizelgesi sekmesi aşağıdaki sonuçları verir:


a) direktifler olmadan




AngularJS_Directives_Performance_Without Direktifler



yönergeler olmadan



b) direktiflerle




Direktifler ile



Direktifler ile



“Komut dosyası oluşturma” sürelerini karşılaştırırsanız (yaklaşık 210 ms’ye karşı 710 ms), hız kaybı toplamda 500 ms’dir; bu, kullanılan her satırda 5 ms veya yönerge başına bir milisaniyedir. Direktif başına çok fazla değil, ancak bir tarafta birçok direktifin dönüştürülmesi gerekiyorsa, açıkça “örtüşüyor”. Bu nedenle, özellikle yukarıdaki performans verileri güçlü bir PC’den geldiğinden ve bildiğiniz gibi piyasada daha az güçlü uç cihazlar bulunduğundan, kendi direktiflerinizi bir web sitesinde yoğun bir şekilde kullanmaktan kaçınmalısınız.

AngularJS yönergeleri hakkında daha fazla bilgi için, Developer Week (DWX) Haziran 2015’teki “Yönergelerle Yeniden Kullanılabilir AngularJS Bileşenleri” sunum slaytlarıma bakın. Bu konuyla ilgili başka bir performans ölçümü Ben Nadel’de bulunabilir.


()



Haberin Sonu
 
Üst