Selam arkadaslar bu soruyu bircok uzman kisiye sordugum halde bir türlü ne bir cevaba rastlamadim.
Sorum söyle ;
sayfaya import edilen Css dosyasi da diyelimki gereginden fazla class tanimlamasi var. Örnegin 30 adet Class tanimlanmis ama import edilen sayfada tanimlanan classlarin sadece 10 tanesi isteniyor yani diger 20 class gereksiz.
Bu durumda sayfaya gereksiz yere fazladan kod eklemem sayfanin acilis hizinda bir yavaslama olurmu?
Evet olur diyenleri duyar gibi oluyorum ama ben hazirladigim bir javascript kodu ile test ettim hic bir fark olmusyor ama import ettigim dosyadaki tanimlanmis class 'lardan birkactanesini daha html dosyasinda tanimladigimda yavaslama olur.
Bu mini deneyden sonra aklima söyle birsey takildi Css nasil bir sistemle calisiyor? Yukardaki anlattigim olaya göre tipki bir database gibi calisiyor olabilirmi? Database 'de ne kadar veri olursa olsun ben sadece isime yarayani aliyorum.
Hatta örnegin Dreamweaver ile calisirken html 'ye import ettigim css dosyalari henüz dreamweaver 'de düzenleme asamasinda bile dokumana etki edebiliyor.
En bastada yazdigim gibi bi soruyu uzman sayilabilecek arkadaslara bile sordum fakat ne netbir cevap alabildim nede bu konuda bir kaynaga ulasabildim.
Son olarak ayni soruyu ajax veya Javascript icinde sorabilir yani önceden yüzlerce fonksiyon hazirlanmis ve atiyorum 3mb 'lik kütüpane olusturulmus bu kütüpane Html icerisine import edilmis peki simdi sayfanin hizi ne sekilde etkilenecek yani kütüpanedeki fonsiyonlari kullandikcami yoksa hicbir fonksiyon kullanilmasa bile zaten 3mb 'lik bir dosyanin import edilmesinden dolayimi?
sonraki yazı » Blog soruları |
Yorumlar
stil tanımlamalarının browser'a gönderildiğini ve cookies'e kaydedildiğini öğrenmiş oldum. Dolayısıyla da çerezleri silmedikçe 1 defaya (ilk) mahsus gereksiz tanımlamaların da çerezlere yüklenmesiyle oluşan bir gecikme olacağını ancak sayfanın sonraki ziyaretlerinde yüklenmiş çerezlerden faydalanılacağı için yani stil tanımlamalarının yeniden yüklenmeyerek direk çerezlerden faydalanıldığını ve tanımlamaların da ihtiyaç duyulduğunda yorumlandığını anladım.
Hakkaten de iyi sallamışım fikirsel :)
| UVERCANKi | |
|
|
(-2 puan) |
|
| 02 Ekim 2008 22:34 |
css dosyası web sitesine girildiğinde tamamen sunucudan indirilir.
fakat senin kafana takılan nokta şu sanırsam;
css sayfası dinamik olmadığından 1 kerelik sunucudan indirilir ve diğer sayfaları gezerken cache den kullanılır. bu durumda yavaşlama hissedilmez. database mantığı ile çalışmaz yani.
bunun dışında java betikleri içinde durum aynı olsada özel fonsiyonlar belirleyip betiğin sadece bir kısmını sunucudan indirebileceğin kodlamalarda yapabilirsin.
----
şu şekilde kontrol edebilirsin;
cache klasöründeki tüm dosyaları sil ardından css kullandığın web sayfasına gir ... orada html belgesi ile beraber css sayfasınıda göreceksin.
| cxc | |
|
|
(1 puan) |
|
| 03 Ekim 2008 02:03 |
Bu konuda benim bildiğim oluşturduğun tarayıcı ile istek gönderdiğin web sayfası istenir ve sayfa içerisinde import edilen her dosya için sunumcuya ayrı istek gönderilerek o sayfalar, resimler vb... tarayıcı tarafından önbellek dizinine yüklenir. (Eğer sunumcu tarafından önbellekte tutulmaması için ayar yapılmadıysa.)
Daha sonra tarayıcı tarafında css dosyası okunarak gerekli tanımlamalar html etiketlerine uygulanır.
css dosyasında fazla tanımlamalar yapman tabii ki o sayfanın ilk yüklenmesinde etki eder. Sitenin anasayfasında css dosyası bir kere yüklenir, ziyaretçi diğer sayfalarda gezerken o css dosyası tekrar indirilmez o yüzden sayfa yüklenme hızına etki etmez.
Fazla css dosyalarının veya css tanımlamalarının yüklenip yüklenmediğini, tarayıcının önbellek dizinini temizledikten sonra bir sayfa açıp daha sonra önbellek dizinine hangi dosyalarının atıldığına bakarak anlayabilirsin.
Örnek olarak firefox da adres çubuğuna about:cache yazarsan bellekte ve diskte tutulan önbellek dosyalarını görebilirsin.
| svskrtl | |
|
|
(0 puan) |
|
| 03 Ekim 2008 02:11 |
O zaman bu mantikla düsünürsek Html style yöntemiyle yapilan css kodlari, import teknigine göre daha yavas calisacaktir öyle degilmi?
ikinci olarak firefox 'un bir ektentisi var cache 'i disable yapabiliyorsunuz bu sekilde denedigimdede ayni sonucu aldim yani css dosyasindaki class 'lari ne kadar cok cagiriyorsam sayfa o oranda yavasliyor.
| Flashcentury | |
|
|
(0 puan) |
|
| 03 Ekim 2008 13:30 |
eğer çok test etmek istiyorsan, 3-4 mb büyüklüğünde gereksiz yazı içeren bir css dosyası hazırla ve onu sayfaya entegre et =)
| Ege | |
|
|
(0 puan) |
|
| 03 Ekim 2008 17:45 |
bu sadece sayfa kodlarında kirlilik yaratır. Sayfa yüklenme süresini çok etkilemez ama eski model dial-up modemlerle bağlananlar varsa yada cepten sayfanı ziyaret etmek isteyenler olursa bunlarda az biraz fark yaratabilir :)
ama sen sen ol projelerinde temiz çalış :)
| ermanov | |
|
|
(0 puan) |
|
| 04 Ekim 2008 15:30 |
@uvercanki
İyi sallamışsın. Css sunucu taraflı olsaydı bunun bir programını kurmamız gerekirdi sunucuya. Hem o zaman her tarayıcıda aynı gözükürdü.
| Fikirsel | |
|
|
(0 puan) |
|
| 04 Ekim 2008 23:56 |
- ilk ayak serverdan alma. Şimdi iki durumu ayrı ayrı inceleyelim elinde 1kb lik css ve 1 kb lik html olmak üzere iki ayrı dosyan olsun.Browser önce html dosyanı yükleyecek ardıdan import edilmiş cssler için server'a ikinci request'te bulunacak sonra css'i alacak. Baktığımızda toplam download 2kb (http headerları işin içine katarsak biraz daha fazla) ve HTTP GET mesajı sayısı 2 tane. Sonuçta server request ve response zamanlarını düşünürsek bu senaryo daha zaman alır gibi duruyor. Eğer css html'in içindeyse toplam download yine 2kb fakat gönderilen get sorgusu birtane olacağı için bu yöntemle biraz daha hızlı yüklenecektir.(İlk yükleme için geçerli)
Fakat bu senaryoda browser cache'i ni kullanamadığımızdan dolayı her istenen sayfa için css tekrar tekrar gelecek (çünkü html içinde gömülü) o yüzden diğer sayfalarınızın boyutları büyük olacak ve yavaş yüklenecektir. css ayrı olsa browser cache'den alacak o yüzden 1kb html dosyası ve tek get request'i ile iş bitecekti. - Gelelim ikinci ayağa. bu ayakta dosyalar yüklendi ve yorumlanma aşamasına geçildi. browser css i işlemek için önce parse etmek zorundadır. Bu işlemin süresi dosya boyutu ile doğru orantılıdır. yani dosyaları küçük tutmak gerekir.
css yapısı bir ağaç şeklinde düşünülebilir. böyle bir yapıyı kurmak için css'i düzgün bir şekilde yorumlamak gerekir. Çok karmaşık birbirini kapsayan uzun ve gereksiz tanımlamalar bu yapının oluşturulmasını uzatır. css'i bir programlama dili gibi düşünmek gerekir. kod ne kadar uzunsa çalışma süreside o kadar uzun olur demek yanlış olmaz css için. css parser'ın nasıl çalıştığını görmek istiyorsanız csstidy ve firefox'un kodlarını inceleyebilirsiniz.
| bbayer | |
|
|
(3 puan) |
|
| 05 Ekim 2008 00:20 |
bbayer tesekürler, yazdiginiz yorum bir makale adinda olmus. Ayni sey Ajax (java javascript) kütüpaneleri icinde gecerli diyebilir miyiz?
| Flashcentury | |
|
|
(0 puan) |
|
| 06 Ekim 2008 13:40 |
pillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.
