(Alıntıdır)
lütfen like atmayı unutmayalım
Oluşturucu oluşturulduğunda ve ağaca eklendiğinde, konumu ve boyutu yoktur. Bu değerlerin hesaplanmasına mizanpaj veya yeniden akış denir.
HTML akış tabanlı bir düzen modeli kullanır, yani çoğu zaman geometriyi tek bir geçişte hesaplamak mümkündür. Daha sonra `` akıştaki '' öğeler genellikle `` akıştaki '' öğelerin geometrisini etkilemez, bu nedenle düzen belgede soldan sağa, yukarıdan aşağıya ilerleyebilir. İstisnalar vardır: örneğin, HTML tabloları birden fazla geçiş gerektirebilir (3.5).
Koordinat sistemi kök çerçeveye göredir. Üst ve sol koordinatlar kullanılır.
Düzen, özyinelemeli bir işlemdir. HTML belgesinin <html> öğesine karşılık gelen kök oluşturucudan başlar. Düzen, gerektiren her bir oluşturucu için geometrik bilgileri hesaplayarak çerçeve hiyerarşisinin bir kısmı veya tamamı boyunca yinelemeli olarak devam eder.
Kök oluşturucunun konumu 0,0'dır ve boyutları görünüm penceresidir - tarayıcı penceresinin görünür kısmı.
Tüm oluşturucular bir "düzen" veya "yeniden akış" yöntemine sahiptir; her oluşturucu, düzen gerektiren çocuklarının düzen yöntemini çağırır.
Her küçük değişiklik için tam bir düzen yapmamak için tarayıcılar bir "kirli bit" sistemi kullanır. Değiştirilen veya eklenen bir oluşturucu, kendisini ve çocuklarını "kirli" olarak işaretler: düzen gerektiren.
İki bayrak vardır: "kirli" ve "çocuklar kirli", yani oluşturucunun kendisi iyi olsa da, bir düzene ihtiyacı olan en az bir çocuğu vardır.
Global ve artımlı düzen
Düzen, tüm render ağacında tetiklenebilir - bu "global" düzendir. Bu aşağıdakilerin bir sonucu olabilir:
Yazı tipi boyutu değişikliği gibi tüm oluşturucuları etkileyen genel stil değişikliği.
Bir ekranın yeniden boyutlandırılması sonucunda
Düzen artımlı olabilir, yalnızca kirli oluşturucular yerleştirilir (bu, ek düzenler gerektiren bazı hasarlara neden olabilir).
Oluşturucular kirli olduğunda artımlı düzen (eşzamansız olarak) tetiklenir. Örneğin, ağdan fazladan içerik gelip DOM ağacına eklendikten sonra oluşturma ağacına yeni oluşturucular eklendiğinde.
"OffsetHeight" gibi stil bilgisi isteyen komut dosyaları, artımlı düzeni eşzamanlı olarak tetikleyebilir.
Genel düzen genellikle eşzamanlı olarak tetiklenir.
Kaydırma konumu gibi bazı öznitelikler değiştiğinden, bazen düzen başlangıç düzeninden sonra geri arama olarak tetiklenir.
Optimizasyonlar
Bir düzen, bir "Yeniden boyutlandır" veya renderer konumunda bir değişiklik(ve boyut değil) tarafından tetiklendiğinde, renders boyutları bir önbellekten alınır ve yeniden hesaplanmaz..
Bazı durumlarda sadece bir alt ağaç değiştirilir ve düzen kökten başlamaz. Bu, değişikliğin yerel olduğu ve çevresini etkilemediği durumlarda ortaya çıkabilir-metin alanlarına eklenen metin gibi (aksi takdirde her tuş vuruşu kökten başlayan bir düzeni tetikler).
Üst oluşturucu kendi genişliğini belirler. V parenteli çocukların üzerine gider ve: Alt oluşturucuyu yerleştirir (x ve y'yi ayarlar). Gerekirse çocuk düzenini çağırır-kirli ya da küresel bir düzende ya da başka bir nedenden dolayı–çocuğun yüksekliğini hesaplar.
Ebeveyn, kendi yüksekliğini ayarlamak için çocukların birikimli yüksekliklerini ve kenar boşluklarının ve dolguların yüksekliklerini kullanır–bu, üst oluşturucunun ebeveyni tarafından kullanılır. Kirli biti false olarak ayarlar. Firefox, düzen için bir parametre olarak bir "durum" nesnesi(nsHTMLReflowState) kullanır ("yeniden akış"olarak adlandırılır). Diğerleri arasında devlet ebeveyn genişliğini içerir.
Firefox düzeninin çıktısı bir "metrics" nesnesidir (nsHTMLReflowMetrics). Bu renderer hesaplanan yüksekliği içerecektir.
Örneğin aşağıdaki div genişliği:
Kod:
<div style="width: 30%"/>
WebKit tarafından aşağıdaki gibi hesaplanır (sınıf RenderBox yöntemi calcWidth):
Kap genişliği kullanılabilir kapların maksimumudur Genişlik ve 0 Bu durumda kullanılabilir Genişlik, şu şekilde hesaplanan contentWidth'dir:
Kod:
clientWidth() - paddingLeft() - paddingRight()
clientWidth ve clientHeight kenarlık ve kaydırma çubuğu hariç bir nesnenin iç temsil eder. Öğe genişliği" genişlik " stil özniteliğidir. Konteyner genişliğinin yüzdesini hesaplayarak mutlak bir değer olarak hesaplanacaktır. Yatay Kenarlıklar ve yastıklar şimdi eklenir.
Şimdiye kadar bu "tercih edilen genişlik" hesaplamasıydı. Şimdi minimum ve maksimum genişlikler hesaplanacaktır. Tercih edilen genişlik maksimum genişlikten büyükse, maksimum genişlik kullanılır. Minimum genişlikten (en küçük kırılmaz birim) daha az ise, minimum genişlik kullanılır.
Değerler, bir düzen gerekli, ancak genişliği değişmez durumunda önbelleğe alınır.
arka plan rengi, arkaplan, sınır, çocuklar, anahat, Firefox ekran listesi Firefox, render ağacının üzerine gider ve boyalı dikdörtgen için bir ekran listesi oluşturur. Dikdörtgen ile ilgili render, doğru boyama düzeninde (render arka planları, daha sonra sınırlar vb.) içerir. Bu şekilde ağacın birkaç kez yerine yeniden boyamak için sadece bir kez geçmesi gerekir-tüm arka planları, sonra tüm görüntüleri, sonra tüm sınırları vb. boyayın.
Firefox, diğer opak öğelerin altındaki öğeler gibi gizlenecek öğeler eklemeyerek işlemi optimize eder.
İşleme motoru tek iş parçacığıdır. Ağ işlemleri hariç hemen hemen her şey tek bir iş parçacığında gerçekleşir. Firefox ve Safari'de bu tarayıcının ana iş parçacığıdır. Chrome'da sekme işlemi ana iş parçacığıdır. Ağ işlemleri birkaç paralel iş parçacığı tarafından gerçekleştirilebilir. Paralel bağlantıların sayısı sınırlıdır (genellikle 2-6 bağlantı).
Kod:
while (!mExiting)
NS_ProcessNextEvent(thread);
Her kutunun kendine ait bir içerik bölgesi bulunmaktadır. (örneğin metin, resim vb.)
Tüm birimler oluşturulmakta olan kutunun türünü belirleyebilecek "görüntüleme" özelliğini içerir.
Kod:
block: generates a block box.
inline: generates one or more inline boxes.
none: no box is generated.
Varsayılan satır içi, ancak tarayıcı stil sayfası diğer varsayılanları ayarlayabilir. Örneğin: "div" öğesi için varsayılan ekran blok'tur
Kod:
<p>
<img style="float: right" src="images/image.gif" width="100" height="100">
Lorem ipsum dolor sit amet, consectetuer...
</p>
lütfen like atmayı unutmayalım
View hidden content is available for registered users!
Yerleşim
View hidden content is available for registered users!
Oluşturucu oluşturulduğunda ve ağaca eklendiğinde, konumu ve boyutu yoktur. Bu değerlerin hesaplanmasına mizanpaj veya yeniden akış denir.
HTML akış tabanlı bir düzen modeli kullanır, yani çoğu zaman geometriyi tek bir geçişte hesaplamak mümkündür. Daha sonra `` akıştaki '' öğeler genellikle `` akıştaki '' öğelerin geometrisini etkilemez, bu nedenle düzen belgede soldan sağa, yukarıdan aşağıya ilerleyebilir. İstisnalar vardır: örneğin, HTML tabloları birden fazla geçiş gerektirebilir (3.5).
Koordinat sistemi kök çerçeveye göredir. Üst ve sol koordinatlar kullanılır.
Düzen, özyinelemeli bir işlemdir. HTML belgesinin <html> öğesine karşılık gelen kök oluşturucudan başlar. Düzen, gerektiren her bir oluşturucu için geometrik bilgileri hesaplayarak çerçeve hiyerarşisinin bir kısmı veya tamamı boyunca yinelemeli olarak devam eder.
Kök oluşturucunun konumu 0,0'dır ve boyutları görünüm penceresidir - tarayıcı penceresinin görünür kısmı.
Tüm oluşturucular bir "düzen" veya "yeniden akış" yöntemine sahiptir; her oluşturucu, düzen gerektiren çocuklarının düzen yöntemini çağırır.
Kirli Bit Sistemi
Her küçük değişiklik için tam bir düzen yapmamak için tarayıcılar bir "kirli bit" sistemi kullanır. Değiştirilen veya eklenen bir oluşturucu, kendisini ve çocuklarını "kirli" olarak işaretler: düzen gerektiren.
İki bayrak vardır: "kirli" ve "çocuklar kirli", yani oluşturucunun kendisi iyi olsa da, bir düzene ihtiyacı olan en az bir çocuğu vardır.
Global ve artımlı düzen
Düzen, tüm render ağacında tetiklenebilir - bu "global" düzendir. Bu aşağıdakilerin bir sonucu olabilir:
Yazı tipi boyutu değişikliği gibi tüm oluşturucuları etkileyen genel stil değişikliği.
Bir ekranın yeniden boyutlandırılması sonucunda
Düzen artımlı olabilir, yalnızca kirli oluşturucular yerleştirilir (bu, ek düzenler gerektiren bazı hasarlara neden olabilir).
Oluşturucular kirli olduğunda artımlı düzen (eşzamansız olarak) tetiklenir. Örneğin, ağdan fazladan içerik gelip DOM ağacına eklendikten sonra oluşturma ağacına yeni oluşturucular eklendiğinde.
Asenkron ve Senkron Düzen
Artımlı düzen zaman uyumsuz olarak yapılır. Firefox kuyruklar artımlı düzenleri için "yeniden akış komutları" ve bir zamanlayıcı bu komutların toplu yürütülmesini tetikler. WebKit ayrıca artımlı bir düzen yürüten bir zamanlayıcıya sahiptir-ağaç geçilir ve "kirli" işleyiciler düzenlidir."OffsetHeight" gibi stil bilgisi isteyen komut dosyaları, artımlı düzeni eşzamanlı olarak tetikleyebilir.
Genel düzen genellikle eşzamanlı olarak tetiklenir.
Kaydırma konumu gibi bazı öznitelikler değiştiğinden, bazen düzen başlangıç düzeninden sonra geri arama olarak tetiklenir.
Optimizasyonlar
Bir düzen, bir "Yeniden boyutlandır" veya renderer konumunda bir değişiklik(ve boyut değil) tarafından tetiklendiğinde, renders boyutları bir önbellekten alınır ve yeniden hesaplanmaz..
Bazı durumlarda sadece bir alt ağaç değiştirilir ve düzen kökten başlamaz. Bu, değişikliğin yerel olduğu ve çevresini etkilemediği durumlarda ortaya çıkabilir-metin alanlarına eklenen metin gibi (aksi takdirde her tuş vuruşu kökten başlayan bir düzeni tetikler).
Düzen Süreci
Düzen genellikle aşağıdaki desene sahiptir:Üst oluşturucu kendi genişliğini belirler. V parenteli çocukların üzerine gider ve: Alt oluşturucuyu yerleştirir (x ve y'yi ayarlar). Gerekirse çocuk düzenini çağırır-kirli ya da küresel bir düzende ya da başka bir nedenden dolayı–çocuğun yüksekliğini hesaplar.
Ebeveyn, kendi yüksekliğini ayarlamak için çocukların birikimli yüksekliklerini ve kenar boşluklarının ve dolguların yüksekliklerini kullanır–bu, üst oluşturucunun ebeveyni tarafından kullanılır. Kirli biti false olarak ayarlar. Firefox, düzen için bir parametre olarak bir "durum" nesnesi(nsHTMLReflowState) kullanır ("yeniden akış"olarak adlandırılır). Diğerleri arasında devlet ebeveyn genişliğini içerir.
Firefox düzeninin çıktısı bir "metrics" nesnesidir (nsHTMLReflowMetrics). Bu renderer hesaplanan yüksekliği içerecektir.
Genişlik hesaplama
Oluşturucunun genişliği, kapsayıcı bloğunun genişliği, oluşturucunun stili "genişlik" özelliği, kenar boşlukları ve kenarlıklar kullanılarak hesaplanır.Örneğin aşağıdaki div genişliği:
Kod:
<div style="width: 30%"/>
WebKit tarafından aşağıdaki gibi hesaplanır (sınıf RenderBox yöntemi calcWidth):
Kap genişliği kullanılabilir kapların maksimumudur Genişlik ve 0 Bu durumda kullanılabilir Genişlik, şu şekilde hesaplanan contentWidth'dir:
Kod:
clientWidth() - paddingLeft() - paddingRight()
clientWidth ve clientHeight kenarlık ve kaydırma çubuğu hariç bir nesnenin iç temsil eder. Öğe genişliği" genişlik " stil özniteliğidir. Konteyner genişliğinin yüzdesini hesaplayarak mutlak bir değer olarak hesaplanacaktır. Yatay Kenarlıklar ve yastıklar şimdi eklenir.
Şimdiye kadar bu "tercih edilen genişlik" hesaplamasıydı. Şimdi minimum ve maksimum genişlikler hesaplanacaktır. Tercih edilen genişlik maksimum genişlikten büyükse, maksimum genişlik kullanılır. Minimum genişlikten (en küçük kırılmaz birim) daha az ise, minimum genişlik kullanılır.
Değerler, bir düzen gerekli, ancak genişliği değişmez durumunda önbelleğe alınır.
Çizgileri Kırma
Bir mizanpajın ortasındaki herhangi bir tane işleyicinin kırılmasına karar verdiği zaman, işleyici çalışmayı durdurur ve düzenin üst kısmına kırılması gerektiğini yayar. Üst ekstra render oluşturur ve onlara düzeni çağırır.Boyama
Boyama aşamasında, render ağacı geçilir ve ekranda içerik görüntülemek için oluşturucunun "paint()" yöntemi çağrılır. Boyama UI altyapı bileşenini kullanır.Küresel ve Artımlı
Düzen gibi, boyama da küresel olabilir - tüm ağaç boyanır - veya artımlı. Artan resim, bazı render tüm ağaç etkilemez bir şekilde değişir. Değiştirilen oluşturucu, ekrandaki dikdörtgenini geçersiz kılar. Bu, işletim sisteminin onu "kirli bölge" olarak görmesine ve bir "boya" olayı oluşturmasına neden olur. İşletim sistemi akıllıca yapar ve birkaç bölgeyi bir araya getirir. Chrome'da daha karmaşıktır, çünkü işleyici farklı bir süreçtedir, daha sonra ana süreçtedir. Chrome, işletim sistemi davranışını bir dereceye kadar simüle eder. Sunu, bu olayları dinler ve iletiyi render köküne temsilciler. Ağaç, ilgili işleyiciye ulaşılana kadar geçilir. Kendisini (ve genellikle çocuklarını) yeniden boyayacaktır.Boyama Sırası
CSS2 boyama işleminin sırasını tanımlar. Bu aslında öğelerin istifleme bağlamlarında istiflendiği sıradır. Yığınlar arkadan öne boyandığından bu sıra boyayı etkiler. Bir blok oluşturucunun istifleme sırası:arka plan rengi, arkaplan, sınır, çocuklar, anahat, Firefox ekran listesi Firefox, render ağacının üzerine gider ve boyalı dikdörtgen için bir ekran listesi oluşturur. Dikdörtgen ile ilgili render, doğru boyama düzeninde (render arka planları, daha sonra sınırlar vb.) içerir. Bu şekilde ağacın birkaç kez yerine yeniden boyamak için sadece bir kez geçmesi gerekir-tüm arka planları, sonra tüm görüntüleri, sonra tüm sınırları vb. boyayın.
Firefox, diğer opak öğelerin altındaki öğeler gibi gizlenecek öğeler eklemeyerek işlemi optimize eder.
WebKit Dikdörtgen Depolama
Yeniden boyamadan önce, WebKit eski dikdörtgeni bitmap olarak kaydeder. Daha sonra sadece yeni ve eski dikdörtgenler arasındaki deltayı boyar.Dinamik Değişiklikler
Tarayıcılar, bir değişikliğe yanıt olarak mümkün olan en az eylemi yapmaya çalışır. Bu nedenle, bir öğenin rengindeki değişiklikler yalnızca öğenin yeniden boyanmasına neden olur. Öğe konumu değişiklikleri düzeni ve öğenin, alt ve büyük olasılıkla kardeşleri yeniden boyamak neden olur. Bir DOM düğümü eklemek, düğümün düzenini ve yeniden boyanmasına neden olur. "Html" öğesinin yazı tipi boyutunu artırmak gibi büyük değişiklikler, önbelleklerin geçersiz kılınmasına, tüm ağacın yeniden boyanmasına ve yeniden boyanmasına neden olur.İşleme motoru tek iş parçacığıdır. Ağ işlemleri hariç hemen hemen her şey tek bir iş parçacığında gerçekleşir. Firefox ve Safari'de bu tarayıcının ana iş parçacığıdır. Chrome'da sekme işlemi ana iş parçacığıdır. Ağ işlemleri birkaç paralel iş parçacığı tarafından gerçekleştirilebilir. Paralel bağlantıların sayısı sınırlıdır (genellikle 2-6 bağlantı).
Olayların Düzenli Hareketi (Döngüsü)
Tarayıcı ana iş parçacığı bir olay döngüsüdür. Süreci canlı tutan sonsuz bir döngü. Olayları bekler (düzen ve boya olayları gibi) ve bunları işler. Bu ana olay döngüsü için Firefox kodudur:Kod:
while (!mExiting)
NS_ProcessNextEvent(thread);
CSS Kutu Modellemesi
CSS kutusu modellemesi, belge ağacında oluşan birimler için oluşturulmakta olan ve aynı zamanda görsel biçimlendirilme modellemesi baz alınarak düzenlenebilmiş dikdörtgen kutularını açıklamaktadır.Her kutunun kendine ait bir içerik bölgesi bulunmaktadır. (örneğin metin, resim vb.)
Kod:
block: generates a block box.
inline: generates one or more inline boxes.
none: no box is generated.
Varsayılan satır içi, ancak tarayıcı stil sayfası diğer varsayılanları ayarlayabilir. Örneğin: "div" öğesi için varsayılan ekran blok'tur
Katmanlar
Bir katman (float) kutusu herhangi bir çizginin sağ veya sol tarafına çekilebilir. Esrarengiz özelliği ise, diğer kutuların bunun etrafında akıma uğramasıdır. HTML:Kod:
<p>
<img style="float: right" src="images/image.gif" width="100" height="100">
Lorem ipsum dolor sit amet, consectetuer...
</p>
