Browser tarafında performansla ilgili görünür ayarlar data-luis attribute'u üzerinden verilir. Bu sayfada yalnızca kullanıcıya doğrudan verdiğiniz runtime değerleri anlatılır.
<link rel="stylesheet" href="./styles.luis" data-luis="lazy">Kullanılabilen Değerler
Section titled “Kullanılabilen Değerler”data-luis değeri | Etki | Ne zaman kullanılır |
|---|---|---|
lazy | Observed kuralları görünüm alanına göre daha geç aktive eder | Uzun sayfalarda ilk yükü hafifletmek istediğinizde |
worker | Derlemeyi worker yoluna zorlar | Büyük .luis kaynaklarında ana thread'i rahatlatmak istediğinizde |
!worker | Derlemeyi ana thread'de tutar | Worker istemediğiniz veya davranışı sabitlemek istediğinizde |
Birden fazla değer birlikte verilebilir:
<link rel="stylesheet" href="./styles.luis" data-luis="lazy,worker">lazy, özellikle observed kurallar için ilk yükte daha az CSS üretmek istediğinizde kullanılır.
<link rel="stylesheet" href="./cards.luis" data-luis="lazy">Kısa etkisi:
- görünüm alanındaki içerik önce gelir
- aşağıda kalan observed alanlar daha geç aktive olur
- uzun doküman ve liste sayfalarında başlangıç yükünü azaltır
lazy Modunda Observed Davranışı
Section titled “lazy Modunda Observed Davranışı”lazy, özellikle ? ve ?! ile yazılan kurallarda fark yaratır.
? için
Section titled “? için”| Durum | Davranış |
|---|---|
| İlk derlemede selector görünüm alanındaysa | Kural üretilir |
| İlk derlemede selector görünüm alanı dışındaysa | Bekler; görünüm alanına girince üretilir |
| Eleman sonradan DOM'a eklenirse | Üretilir |
?! için
Section titled “?! için”| Durum | Davranış |
|---|---|
| İlk derlemede selector görünüm alanındaysa | Kural üretilir |
| İlk derlemede selector görünüm alanı dışındaysa | Bekler; görünüm alanına girince üretilir |
| Aynı selector'a uyan yeni eleman sonradan DOM'a eklenirse | Üretilmez |
lazy İçin Kısa Özet
Section titled “lazy İçin Kısa Özet”? | ?! | |
|---|---|---|
| Görünüm alanında başlıyorsa | Üretilir | Üretilir |
| Görünüm alanı dışında başlıyorsa | Girişte bekler, görünür olunca üretilir | Girişte bekler, görünür olunca üretilir |
| Sonradan DOM'a eklenirse | Üretilir | Üretilmez |
worker
Section titled “worker”worker, .luis derlemesini worker tarafına zorlar.
<link rel="stylesheet" href="./dashboard.luis" data-luis="worker">Kısa etkisi:
- büyük kaynaklarda ana thread üzerindeki yük azalır
- scroll, click ve input sırasında daha az donma hedeflenir
- derleme davranışı daha ağır sayfalar için daha güvenli hale gelir
worker Modunda Observed Davranışı
Section titled “worker Modunda Observed Davranışı”worker, observed semantiğini değiştirmez. Yani ? ve ?! kurallarının ne zaman aktive olduğu aynı kalır; değişen şey derleme işinin hangi tarafta yürüdüğüdür.
| Kural tipi | worker olmadan | worker ile |
|---|---|---|
? | DOM eşleşince aktive olur | Aynı |
?! | İlk uygun eşleşmeler için aktive olur | Aynı |
lazy + ? | Görünüm alanına göre gecikebilir | Aynı |
lazy + ?! | İlk görünür eşleşmeler için açılır, yeni eklenenler için açılmaz | Aynı |
Bu yüzden worker seçimi şu soruya cevap verir:
- derleme yükünü ana thread'den almak istiyor musunuz?
Ama şu soruyu değiştirmez:
?ile mi?!ile mi observed davranışı kurmak istiyorsunuz?
Pratik Örnek
Section titled “Pratik Örnek”<link rel="stylesheet" href="./feed.luis" data-luis="worker">Bu kullanımda:
- büyük
.luisdosyasının derlenmesi worker tarafına taşınır - ama
.card?yine dinamik observed olarak kalır .hero?!yine initial observed olarak kalır
!worker
Section titled “!worker”!worker, worker yolunu kapatır ve derlemeyi ana thread'de tutar.
<link rel="stylesheet" href="./small-widget.luis" data-luis="!worker">Bunu genelde şu durumlarda kullanırsınız:
- kaynak küçükse
- worker kullanmak istemiyorsanız
- davranışı açıkça sabitlemek istiyorsanız
Birlikte Kullanım
Section titled “Birlikte Kullanım”En yaygın birleşim:
<link rel="stylesheet" href="./feed.luis" data-luis="lazy,worker">Bu kombinasyon şu anlama gelir:
- observed aktivasyon daha geç ve daha seçici olur
- derleme işi worker tarafına taşınır
lazy + worker ile Observed
Section titled “lazy + worker ile Observed”| Durum | Sonuç |
|---|---|
.item? görünüm alanı dışındaysa | Lazy bekletir; görünür olunca aktive olur |
.item? sonradan DOM'a eklenirse | Dinamik olarak aktive olur |
.item?! görünüm alanı dışındaysa | Lazy bekletir; görünür olunca aktive olur |
.item?! sonradan DOM'a eklenirse | Tekrar aktive olmaz |
Bu birleşimde:
lazy, observed kuralın ne zaman açılacağını etkilerworker, derlemenin hangi tarafta yapılacağını etkiler
Yani biri zamanlamayı, diğeri çalıştırma yolunu belirler
Varsayılan Davranış
Section titled “Varsayılan Davranış”data-luis hiç verilmezse runtime varsayılan davranışı kullanır:
<link rel="stylesheet" href="./styles.luis">Bu durumda:
lazyaçık değildirworkerzorlanmaz!workerile de kapatılmamıştır