THT DUYURU

Network Network İle İlgili Bölümümüz ...

chat
Seçenekler

Modern internet tarayıcısına içeriden bakış [PART:3] Çevrildi/Dil Takımı

megat - ait Kullanıcı Resmi (Avatar)
Forumdan Uzaklaştırıldı
Üyelik tarihi:
02/2016
Nereden:
-
Mesajlar:
3.217
Konular:
341
Teşekkür (Etti):
905
Teşekkür (Aldı):
720
Ticaret:
(0) %
01-04-2020 19:09
#1
Modern internet tarayıcısına içeriden bakış [PART:3] Çevrildi/Dil Takımı
Bir Renderleme (Oluşturucu) sürecinin iç işleyişi

Bu yazımız, modern internet tarayıcısına içeriden bakış adlı 4 bölümlü blog serisinin 3. bölümüdür. Önceki gönderimizde, çok işlemli mimari ve navigasyon akışını ele aldık. Bu yazıda, Render (oluşturucu) sürecinin içerisinde ne olduğuna bakacağız.

Render (Oluşturucu) süreci web performansının birçok yönüne dokunur.Render (Oluşturucu) sürecinin içinde çok şey olduğundan , Bu yazı sadece genel bir bakıştır.Daha derine inmek isterseniz, Web temelleri performansı bölümünde çok daha fazla kaynak vardır.

Render (Oluşturucu) işlemleri web içeriğini ele alır

Render (Oluşturucu) işlemi, bir sekmenin içinde olan her şeyden sorumludur.
Bir Render (oluşturucu) işleminde, ana izlek parçacığı kullanıcıya gönderdiğiniz kodun çoğunu işler.
Bazen bir Web çalışanı veya hizmet çalışanı kullanıyorsanız, Javascript'inizin bazı kısımları çalışan izlek parçacıkları tarafından işlenir.
Compositor ve raster izlekleri de verimli ve sorunsuz bir sayfa işlemek amacıyla bir Render (oluşturucu) işlemlerinin içinde çalıştırılır.
Render (oluşturucu) işleminin temel görevi, HTML, CSS ve JavaScript'i kullanıcının etkileşime girebileceği bir web sayfasına dönüştürmektir.


Şekil 1: Bir ana izlek parçacığı, işçi izlek parçacıkları, bir Compositor izlek parçacığı ve içerisinde bir raster izlek parçacığı ile Render(oluşturucu) işlemi

Parsing (Ayrıştırmak)

DOM'un inşaası
HTML verilerini almaya başladığında, Render (Oluşturucu) işlemi navigasyon için bir tamamlama iletisi alır ve
ana izlek parçacığı metin dizesini ayrıştırmaya ve bir belge nesne modeline(DOM) dönüştürmeye başlar .
DOM, bir tarayıcının sayfanın iç temsilinin yanı sıra web geliştiricisinin JavaScript ile etkileşime girebileceği veri yapısı ve API'DİR.
Bir HTML belgesini bir DOM'A ayrıştırmak, HTML standardı tarafından tanımlanır.
HTML'yi bir tarayıcıya beslemenin hiçbir zaman bir hata oluşturmadığını fark etmiş olabilirsiniz.
Örneğin, eksik kapanış < / p> etiketi geçerli bir HTML'dir.
Merhaba gibi hatalı biçimlendirme! <b>I'm<i>Chrome < /b>!< / i> (b etiketi i etiketinden önce kapatılır) Merhaba yazmış gibi davranılır! <b>Hi!<i>Chrome</i></b> < i>!</i>.
Bunun nedeni, HTML belirtiminin bu hataları incelikle işlemek için tasarlanmasıdır.Bu şeylerin nasıl yapıldığını merak ediyorsanız,HTML Teknik özelliklerinde "hata işleme ve ayrıştırıcıdaki garip durumlara giriş" bölümünü okuyabilirsiniz.


Subresource loading
Bir web sitesi genellikle görüntüler, CSS ve JavaScript gibi dış kaynakları kullanır.Bu dosyaların ağ veya önbellekten yüklenmesi gerekir.Ana izlek parçacığı, bir DOM oluşturmak için ayrıştırırken onları bulduklarında birer birer talep edebilir, ancak hızlandırmak için "önyükleyici taraması" aynı anda çalıştırılır.
HTML belgesinde <img > veya <link> gibi şeyler varsa,
önyükleyici tarayıcı, HTML ayrıştırıcısı tarafından oluşturulan belirteçlere bakar ve tarayıcı işleminde ağ izlek parçacığına istek gönderir.



Şekil 2: HTML ayrıştırma ve bir DOM ağacı oluşturma

JavaScript Ayrıştırmayı engelleyebilir
HTML ayrıştırıcısı bir <script> etiketi bulduğunda, HTML belgesinin ayrıştırılmasını duraklatır ve JavaScript kodunu yüklemek, ayrıştırmak ve yürütmek zorundadır.
Neden? çünkü JavaScript, documént.write() gibi şeyleri kullanarak belgenin şeklini değiştirebilir.tüm DOM yapısını değiştiren write () (HTML teknik özelliklerinde ayrıştırma modeline genel bakış güzel bir diyagrama sahiptir).


Tarayıcıya kaynakları nasıl yüklemek istediğinizi belirten ipucu vermek
Web geliştiricilerinin kaynakları güzel bir şekilde yüklemek için tarayıcıya ipuçları göndermesinin birçok yolu vardır
Eğer JavaScript documént.write () kullanmıyorsa , <script> etiketine zaman async veya defer niteliği ekleyebilirsiniz.
Tarayıcı daha sonra JavaScript kodunu eşzamansız olarak yükler ve çalıştırır ve ayrıştırmayı engellemez.
Eğer bu uygunsa JavaScript modülünü de kullanabilirsiniz.
Bu Kaynak Önceliği Size Yardımcı olmak için Tarayıcı Almak daha okuyabilirsiniz.
<link rel="preload"> tarayıcıya, kaynağın mevcut navigasyon için kesinlikle gerekli olduğunu ve mümkün olan en kısa zamanda indirmek istediğinizi bildirmenin bir yoludur.
Bu konuda daha fazlasını okuyabilirsiniz https://developers.google.com/web/fu...prioritization

Stil hesaplaması
Bir DOM'A sahip olmak, sayfanın nasıl görüneceğini bilmek için yeterli değildir, çünkü sayfa öğelerini CSS'de şekillendirebiliriz.
Ana izlek parçacığı CSS'yi ayrıştırır ve her DOM düğümü için hesaplanan stili belirler.
Bu, CSS seçicilerine dayalı olarak her bir öğeye ne tür bir stil uygulandığı hakkında bilgidir.
Bu bilgileri devtools'un hesaplanan bölümünde görebilirsiniz.



Şekil 3: hesaplanan stil eklemek için CSS ayrıştırma ana izlek parçacığı

Herhangi bir CSS sağlamasanız bile, her DOM düğümünün hesaplanan bir stili vardır. <H1> etiketi < h2 > etiketinden daha büyük görüntülenir ve her öğe için kenar boşlukları tanımlanır.
Bunun nedeni, tarayıcının varsayılan stil sayfasına sahip olmasıdır. Chrome'un varsayılan CSS'sinin nasıl olduğunu bilmek istiyorsanız, kaynak kodunu burada görebilirsiniz.

Düzen

Artık oluşturucu işlemi, her düğüm için bir belgenin yapısını ve stillerini bilir, ancak bu bir sayfa oluşturmak için yeterli değildir.
Düşünün bir telefon üzerinden arkadaşınıza bir resim açıklamak için çalışıyorsunuz.
"Büyük bir kırmızı daire ve küçük bir mavi Kare var"arkadaşınızın resmin tam olarak neye benzeyeceğini bilmesi için yeterli bilgi değildir.
Düzen, elementlerin geometrisini bulmak için bir süreçtir.
Ana izlek parçacığı DOM ve hesaplanan stiller boyunca yürür ve X Y koordinatları ve sınırlayıcı kutu boyutları gibi bilgilere sahip olan düzen ağacını oluşturur.
Display: none uygulanırsa, bu öğe düzen ağacının bir parçası değildir (ancak, görünürlük: gizli olan bir öğe düzen ağacında bulunur).
Benzer şekilde, {content: "Hi!"} Tarihinden önce p :: gibi içeriğe sahip bir sözde sınıf uygulanırsa, DOM'da olmasa bile düzen ağacına dahil edilir



Şekil 4: Bir resmin önünde duran bir kişi, diğer kişiye bağlı telefon hattı.




Şekil 5: Dom ağacının üzerinden hesaplanan stillerle giden ve düzen ağacı üreten ana izlek

Bir sayfanın düzenini belirlemek zor bir görevdir.
Yukarıdan aşağıya doğru bir blok akışı gibi en basit sayfa düzeni bile, yazı tipinin ne kadar büyük olduğunu ve bir paragrafın boyutunu ve şeklini etkilediği için satırların nerede kırılacağını düşünmelidir; bu, aşağıdaki paragrafın nerede olması gerektiğini etkiler.
CSS, öğenin bir tarafa kaydırılmasını sağlayabilir, taşma öğesini maskeleyebilir ve yazma yönlerini değiştirebilir.
Hayal edebilirsiniz ,
Chrome'da, mühendis ekibinin tümü düzen üzerinde çalışır.
Eğer çalışmalarının ayrıntılarını görmek istiyorsanız, BlinkOn Konferansı'ndan birkaç konuşma kaydedildi ve izlemesi oldukça ilginç


Şekil 6: Satır sonu değişikliği nedeniyle hareket eden bir paragrafın kutu düzeni


Boya
Bir DOM stiline ve düzene sahip olmak, bir sayfayı oluşturmak için hala yeterli değildir.
Diyelim ki bir tabloyu yeniden üretmeye çalışıyorsunuz.
Öğelerin boyutunu, şeklini ve yerini biliyorsunuz, ancak yine de hangi sırayla boyadığınızı yargılamanız gerekiyor.
Örneğin, z-index belirli öğeler için ayarlanmış olabilir, bu durumda HTML'de yazılan öğelerin sırasına göre boyama yanlış işleme neden olur.

Şekil 7: Önce bir daire mi yoksa önce kare mi çizmeleri gerektiğini merak eden tuvalin önündeki fırça tutan kişi.


Şekil 8: HTML işaretleme sırasına göre görüntülenen ve z-endeksi dikkate alınmadığından yanlış oluşturulmuş resme neden olan sayfa öğeleri

Boyama aşamasında, Ana izlek parçacığı boya kayıtları oluşturmak için düzen ağacını yürür.
Boya kaydı, "önce arka plan, sonra metin, sonra dikdörtgen"gibi boyama işleminin bir notudur.
JavaScript kullanarak <canvas> öğesine çizdiyseniz, bu işlem size tanıdık gelebilir.


Şekil 9: düzen ağacında yürüyen ve boya kayıtları üreten ana izlek


Karışık oluşmuş düzeni güncellemek zaman alır.

Düzen ağacı yaparken anlaşılması gereken önemli şey, her adımın önceki işleminde sonucun yeni veri
oluşturulurken kullanılmasıdır.

Örnek olarak, eğer düzen ağacı içinde bir şey değişirse, belgede etkilenen bölümleri için boya işleminin
yeniden oluşturulması gerekmekte.

Eğer animasyon öğesi yapıyor iseniz, tarayıcınız bu işlemleri her kare hızında çalıştırması gerekmektedir.
Ekranların çoğu ekranı saniyede 60 kez yenilemektedir (60 fps); tüm kareyi ekranda hareket ettirince
animasyon kişi gözüne kesintisiz şekilde görünecektir. Fakat, animasyon arasındaki kareleri kaçırır ise
sayfa kesik şekilde görünür.




Renderleme (oluşturma) işlemleriniz ekran yenilenmesine uygun olsa bile, hesaplamalar ana iş izleğinde çalışıyor,
yani uygulamanız JavaScript çalışırken engellenebilir.




JavaScript işlemini küçük parçalara ayırarak bölebilirsiniz ve her karede çalışabilecek tarzda
programlayabilirsiniz "requestAnimationFrame()". Bu konu hakkında daha fazla bilgi almak istiyorsanız
JavaScript Yürütmeyi Optimize Etme konusuna bakabilirsiniz. Ayrıca
Bu videoya göz atabilirsiniz.




Birleştirme
Ne şekilde sayfa çizderdiniz?
Bir tarayıcı belgenin yapısını, tüm öğenin stilini, sayfanın geometrisini ve boya sırasını bildiğine göre, bir sayfayı nasıl çiziyor?

Bu bilgileri piksele dönüştürme işlemine rasterleştirme denilmekte.
Belki bununla başa çıkmanın yolu, görünümün içindeki bölümleri rasterleştirmek olacaktır.
Bir kullanıcı sayfayı kaydırırsa, rasterleştirme işlemi çerçeveyi hareket ettirir ve daha fazla rasterleştirme ile eksik parçaları doldurur.
Chrome ilk yayınlandığında rasterleştirmeyi bu şekilde ele aldı.
Ama, modern bir tarayıcı "Birleştirme" adı verilen daha karmaşık işlem yürütür.

Birleştirme nedir?

Birleştirme, bir sayfanın bölümlerini katmanlara ayırmak, ayrı ayrı rasterleştirmek ve "Besteci" adı verilen ayrı bir iş izleğinde sayfa olarak birleştirmek için kullanılan bir tekniktir.
Kaydırma gerçekleşirse, katmanlar zaten rasterleştirildiği için, tek yapmanız gereken yeni bir kareyi birleştirmek olacaktır.
Animasyon, katmanları hareket ettirerek ve yeni bir kareyi birleştirerek aynı şekilde elde edilebilir.
Web sitenizin DevTools kullanarak katmanlara nasıl ayrıldığını görebilirsiniz. Katmanlar Paneli Kullanımı

Katmanlara bölme işlemi


Hangi öğelerin hangi katmanlarda olması gerektiğini bulabilmek için, ana izlek katman ağacını oluşturmak için düzen ağacında işlemi yürür (bu bölüm DevTools performans panelinde "Katman Ağacını Güncelle" olarak adlandırılır.).
Sayfanın ayrı katman olması gereken belirli bölümleri (içeri kaydırılan yan menü gibi) bir tane almıyorsa, CSS'deki will-change özelliğini kullanarak tarayıcıya ipucu verebilirsiniz.



Her bir öğeye katman vermek hoş gelebilir, fakat çok sayıda katman arasında birleştirme yapmak, her karenin sayfanın küçük bölümlerini rasterleştirmekten daha yavaş çalışmasına neden olabilir. Bu nedenle uygulamanızın oluşturma performansını ölçmeniz çok önemlidir. Konu hakkında daha fazla bilgi için bkz. Yalnızca Beste İşlemine Yapış ve Katman Sayısını Yönet

Ana izlekten raster ve beste işlemi

Katman ağacı oluşturulduktan ve boya işlemleri belirlendikten sonra, ana iş izleği bu bilgileri besteci iş izleğine aktarmaktadır. Ardından besteci izleği her katmanı rasterleştirmektedir. Katman, bir sayfanın tüm uzunluğu gibi büyük olabilmekte. Bu sebeple besteci iş izleği bunları döşemelere böler ve her döşemeyi raster iş izleklerine gönderir. Raster iş izlekleri her döşemeyi rasterleştirir ve GPU belleğinde saklar.



Besteci iş izleği farklı raster iş izleklerine öncelik verebilmektedir. Böylece görünüm alanı (veya yakınlardaki) ilk önce rasterleştirilebilir. Bir katmanın yakınlaştırma eylemi gibi şeyleri işlemek için farklı çözünürlüklerde birden fazla eğimi olabilmektedir. Döşemeler rasterleştirildikten sonra, besteci iş izleği bir besteci karesi oluşturmak için draw quads adlı döşeme bilgilerini toplamaktadır.

Draw quads: Döşemenin bellekteki konumu ve sayfa birleştirmeyi dikkate alarak, döşemeyi çizmek için sayfanın nerede olduğu gibi bilgiler içermektedir.
Besteci karesi: Sayfanın karesini temsil eden dörtlü çizim koleksiyonudur.

Daha sonra bir besteci karesi IPC yoluyla tarayıcı işlemine gönderilmektedir. Bu noktada, tarayıcı kullanıcı arayüzü değişikliği için UI iş izleğinden veya uzantılar için diğer oluşturucu işlemlerinden başka bir besteci karesi ekleyebilir. Bu besteci kareleri GPU'ya ekranda görüntülenmesi için gönderilir. Bir scroll (site/ekran kaydırma) olayı gelirse, besteci izleği GPU'ya gönderilecek başka bir compositor çerçevesi oluşturur.



Birleştirmenin yararı, ana izleği içermeden yapılmasıdır. Birleştirme iş izleğinin stil hesaplamasını veya JavaScript yürütme işleminini beklemesi gerekmez. Bu sebeple Sadece Animasyonları Birleştirme en iyi performans olarak kabul edilmektedir.
Düzenin veya boyanın tekrar hesaplanması gerekiyorsa, ana dişin dahil edilmesi gerekir.


Kaynak; https://developers.google.com/web/up...-browser-part3


megat- Secret Person
Konu megat tarafından (01-04-2020 19:46 Saat 19:46 ) değiştirilmiştir.
CiHaN-i TuRaN - ait Kullanıcı Resmi (Avatar)
Üye
Üyelik tarihi:
07/2017
Nereden:
T Ü R K
Yaş:
27
Mesajlar:
1.470
Konular:
213
Teşekkür (Etti):
2399
Teşekkür (Aldı):
469
Ticaret:
(0) %
01-04-2020 19:27
#2
Cevap: Modern internet tarayıcısına içeriden bakış [PART:3] Çevrildi/Dil Takımı
Elinize sağlık..
---------------------
Kod:
Dikkatli Geçirilen Vakit Nakittir..! Kader Zamanı Takip Eder..! Zaman İşe Kaderi Kaderin Çizdiği Yol Başarısız Olsa Bile Başarmak..! Mimar Sinan Gibi İş Yap. Kanun-i Sultan Süleyman Han Gibi Büyü Cesaret insanı zafere , kararsızlık tehlikeye , korkaklık ise ölüme götürür. Sen Onlara Hükmediyorsan Onlar Sana Hükmederler
DrEngerek - ait Kullanıcı Resmi (Avatar)
Çevirmen
Üyelik tarihi:
11/2015
Nereden:
Teşkilat
Mesajlar:
2.349
Konular:
257
Teşekkür (Etti):
327
Teşekkür (Aldı):
737
Ticaret:
(0) %
01-04-2020 19:39
#3
Cevap: Modern internet tarayıcısına içeriden bakış [PART:3] Çevrildi/Dil Takımı
Ellerine sağlık.
---------------------
Yanda Gördüğünüz Kişi:

Türkçü Miliyetçi Atatürkçü Bir Kişiliği Vardır.


R4V3N - ait Kullanıcı Resmi (Avatar)
Deneyimli Çevirmen
Üyelik tarihi:
07/2016
Nereden:
Cræzy
Yaş:
22
Mesajlar:
6.188
Konular:
352
Teşekkür (Etti):
826
Teşekkür (Aldı):
2346
Ticaret:
(0) %
02-04-2020 20:04
#4
Cevap: Modern internet tarayıcısına içeriden bakış [PART:3] Çevrildi/Dil Takımı
BBCode düzenine özen göstereydin daha da güzel olurmuş kardeşim

Bookmarks


« Önceki Konu | Sonraki Konu »
Seçenekler