Modern web tarayıcısına yakından bakış (1. bölüm)

Mariko Kosaka

CPU, GPU, Bellek ve çok işlemli mimari

4 bölümden oluşan bu blog dizisinde, üst düzey mimariden web'e kadar ardışık düzenin özellikleri hakkında daha fazla bilgi edinin. Tarayıcının kodunuzu nasıl dönüştürdüğünü ya da performans için neden belirli bir tekniğin önerildiğinden emin değilseniz bu seri tam size göre.

Bu serinin 1. bölümünde, temel bilgi işlem terminolojisine ve Chrome'un çok işlemli mimari.

Bilgisayarın merkezinde CPU ve GPU bulunur

Tarayıcının çalıştığı ortamı anlamak için öncelikle birkaç ne iş yaptıklarını öğrenin.

CPU

CPU
Şekil 1: Her masada oturan ofis çalışanları olarak gelen görevleri yerine getiren 4 CPU çekirdeği

Bunlardan ilki, Marka Ünit - veya CPU artışıdır. CPU, yüksek performans beyni. Burada bir ofis çalışanı olarak resmedilen CPU çekirdeği, pek çok farklı görevi yapabilir birer birer ele alacağız. Matematikten sanata kadar her şeyi hallederken nasıl yanıt verileceğini bilir. müşteri aramasını sağlar. Eskiden CPU'ların çoğu tek bir çipten oluşuyordu. Çekirdek, başka bir CPU'ya benzer. yer alır. Modern donanımlarda genellikle birden fazla çekirdek bulunur. Bu da daha fazla işlem gücü sağlar. ve dizüstü bilgisayarlarınıza hemen erişebilirsiniz.

GPU

GPU
Şekil 2: Bir İngiliz anahtarının sınırlı bir görevi yerine getirdiğini gösteren çok sayıda GPU çekirdeği

Grafiği zitin veya GPU ise bilgisayarın başka bir bölümüdür. CPU'nun aksine, GPU, basit görevlerin yönetiminde başarılıdır ancak aynı anda birden fazla çekirdekte başarılıdır. Kullanıcı adı olarak ilk olarak grafikleri işlemek için geliştirildiğini öne sürdü. Grafikler bağlamında bu nedenle "GPU kullanımı" veya "GPU destekli" hızlı oluşturma ve sorunsuz etkileşimle ilişkilidir. Son yıllarda GPU ile hızlandırılmış bilgi işlem sayesinde, yalnızca GPU'ya bağlı.

Bilgisayarınızda veya telefonunuzda bir uygulama başlattığınızda takip edebilirsiniz. Uygulamalar genellikle İşletim Sistemi.

Donanım, İşletim Sistemi, Uygulama
Şekil 3: Üç katmanlı bilgisayar mimarisi. Altta Makine Donanımı, Çalıştırma Ortada Sistem ve üstte Uygulama.

Process and Thread'de program yürütün

işlem ve ileti dizileri
Şekil 4: Sınırlayıcı kutu olarak işlem, sürecin içinde yüzen soyut balık gibi iplikler

Tarayıcı mimarisinin ayrıntılarına girmeden önce bilmeniz gereken bir diğer kavram da Process ve Thread'dir. Süreç, bir uygulamanın yürütme programı olarak tanımlanabilir. İleti dizisi, ve programın herhangi bir bölümünü yürütür.

Bir uygulamayı başlattığınızda bir süreç oluşturulur. Program, bu konuda yardımcı olması için çalışır ancak bu isteğe bağlıdır. İşletim Sistemi işleme bir "plaka" verir depolama alanı tüm uygulama durumu bu özel bellek alanında saklanır. işlem de kaybolur ve İşletim Sistemi bellekte yer açar.

işlem ve bellek
Şekil 5: Bellek alanı kullanan ve uygulama verilerini saklayan bir işlemin diyagramı

Bir işlem, farklı görevleri çalıştırmak üzere işletim sisteminden başka bir işlem başlatmasını isteyebilir. Bu Bu durumda, belleğin farklı bölümleri yeni işlem için ayrılır. İki işlemin tamamlanması gerekiyorsa Areksyon İletişimi (IPC) kullanarak bunu yapabilirler. Birçok uygulama , bir çalışan işlemi yanıt vermemeye başlarsa yeniden başlatılabileceği şekilde bu şekilde çalışacak şekilde tasarlanmıştır. uygulamanın farklı bölümlerini çalıştıran diğer işlemleri durdurmadan.

çalışan süreci ve IPC
Şekil 6: IPC üzerinden iletişim kuran ayrı işlemlerin şeması

Tarayıcı mimarisi

Peki bir web tarayıcısı işlemler ve iş parçacıkları kullanılarak nasıl oluşturulur? Birden fazla işlem içeren tek bir süreç birkaç iş parçacığının IPC üzerinden iletişim kurmasını sağlayan birçok farklı işlem olabilir.

tarayıcı mimarisi
Şekil 7: İşlem / iş parçacığı şemasında farklı tarayıcı mimarileri

Burada unutulmaması gereken önemli nokta, bu farklı mimarilerin uygulama ayrıntıları olduğudur. Web tarayıcısının nasıl geliştirilebileceğiyle ilgili standart bir spesifikasyon yoktur. Tarayıcılardan biri, birbirinden tamamen farklı olması gerekir.

Bu blog dizisinde, Chrome'un en son mimarisini kullanıyoruz. Şekil 8'de tanımlanmıştır.

En üstte, farklı işlemler yapan diğer işlemlerle koordineli olarak tarayıcı işlemi bazı bölümleri kapsıyor. Oluşturucu işlemi için birden fazla işlem oluşturulur ve her sekmeye gider. Çok kısa bir süre öncesine kadar, Chrome her sekmeye, şimdi de kullanıcılara Her sitenin iframe'ler dahil kendi sürecini tamamlaması (bkz. Site İzolasyonu).

tarayıcı mimarisi
Şekil 8: Chrome'un çok işlemli mimarisini gösteren şema. Şu bölümün altında birden çok katman gösteriliyor: Chrome'un her sekme için birden fazla Oluşturucu İşlemi çalıştırdığını gösteren Oluşturucu İşlemi.

Hangi süreç neyi kontrol eder?

Aşağıdaki tabloda her bir Chrome işlemi ve bunların neleri kontrol ettiği açıklanmaktadır:

Süreç ve neleri kontrol ettiği
Tarayıcı "Chrome"u kontrol eder adres çubuğu, yer işaretleri, arka ve ileri düğmeleri.
Ayrıca, bir web tarayıcısının aşağıdakiler gibi görünmez, ayrıcalıklı bölümlerini de işler: ağ istekleri ve dosya erişimi.
Oluşturucu Web sitesinin görüntülendiği sekmedeki her şeyi kontrol eder.
Eklenti Web sitesi tarafından kullanılan Flash gibi eklentileri kontrol eder.
GPU GPU görevlerini diğer işlemlerden ayrı olarak ele alır. Farklı bir işleme ayrılır. Çünkü GPU'lar birden fazla uygulamadan gelen istekleri işler ve bunları aynı yüzeyde çizer.
Chrome işlemleri
Şekil 9: Tarayıcı kullanıcı arayüzünün farklı bölümlerine işaret eden farklı işlemler

Uzantı işlemi ve yardımcı program işlemleri gibi daha başka işlemler de vardır. Görmek istediğiniz Chrome'unuzda kaç işlemin çalışıyor olduğunu öğrenmek için, seçenekler menüsü simgesini tıklayın sağ üst köşedeki Diğer Araçlar'ı ve ardından Görev Yöneticisi'ni seçin. Bu, çalışmakta olan işlemlerin listesini içeren bir pencere açar ve ne kadar CPU/Bellek kullandığını gösterir.

Chrome'da çok işlemli mimarinin avantajı

Daha önce, Chrome'un birden çok oluşturucu işlemi kullandığından bahsetmiştim. En basit senaryoda, her sekmenin kendi oluşturucu işlemi olduğunu düşünün. 3 sekmenizin açık olduğunu ve her bir sekmenin çalıştığını varsayalım. bağımsız bir oluşturucu işlemiyle yapılır.

Bir sekme yanıt vermezse yanıt vermeyen sekmeyi kapatabilir ve sekmenizi korurken devam edebilirsiniz olduğunu görebilirsiniz. Bir işlemde tüm sekmeler çalışıyorsa bir sekme yanıt vermemeye başladığında sekmeler yanıt vermiyor. Çok üzücü.

sekmeler için birden fazla oluşturucu
Şekil 10: Her sekme çalıştıran birden fazla işlemi gösteren diyagram

Tarayıcının çalışmasını birden çok işleme ayırmanın bir başka yararı da güvenlik ve korumalı alan kullanımı. İşletim sistemleri, sistemlerin belirli bir ayrıcalıkların, tarayıcı belirli özelliklerden belirli işlemleri korumalı alana alabilir. Örneğin, Chrome tarayıcı oluşturucu işlemi gibi rastgele kullanıcı girişlerini işleyen işlemler için rastgele dosya erişimi.

İşlemlerin kendi özel bellek alanı olduğu için genellikle altyapı (ör. Chrome'un JavaScript motoru olan V8). Bu da depolama alanını aynı sürecin içinde yer alan ileti dizileri olduğu gibi paylaşılamaz. Chrome, bellek tasarrufu sağlamak için başlatabileceği işlem sayısını sınırlandırır. Bu sınır, cihazınızın belleği ve CPU gücü miktarına göre değişir. Ancak Chrome, bir işlemde aynı siteden birden çok sekme çalıştırmaya başlar.

Daha fazla bellek tasarrufu - Chrome'da servis desteği

Tarayıcı işlemi için de aynı yaklaşım uygulanır. Chrome'da şu mimari değişiklikleri yapılıyor: tarayıcı programının her bölümünü bir hizmet olarak çalıştırarak farklı işlemlere bir araya getirilebilir.

Genel fikir, Chrome güçlü donanımlarla çalışırken her hizmeti farklı bölümlere sağlayan farklı işlemler daha fazla stabilite sağlar. Ancak, kaynak kısıtlaması olan bir cihazda Chrome hizmetleri tek bir işlem altında birleştirerek bellek ayak izi tasarrufu sağlar. Benzer birleştirme yaklaşımıyla daha az bellek kullanımına yönelik işlemler bu değişiklikten önce Android gibi platformlarda kullanılmıştı.

Chrome servisleri
Şekil 11: Chrome'un farklı hizmetleri birden çok işleme taşıma işlemini gösteren şema ve tek bir tarayıcı işlemi

Çerçeve başına oluşturucu işlemleri - Site İzolasyonu

Site İzolasyonu, kısa bir süre önce Chrome'da kullanıma sunulan ve her siteler arası iframe için ayrı bir oluşturucu işlemi çalıştıran bir özellik ekledik. Sekme modeli başına siteler arası izinlere izin veren tek bir oluşturucu işleminden bahsediyoruz. Farklı siteler arasında bellek alanı paylaşan tek bir oluşturucu işleminde çalıştırılacak iframe'ler. a.com ve b.com'u aynı oluşturucu işleminde çalıştırmak sorun olabilir. Aynı Kaynak Politikası web'in temel güvenlik modelidir; bir sitenin diğer sitelerdeki verilere erişmesini sağlar. izin verilmez. Bu politikayı atlamak, güvenlik saldırılarının birincil hedefidir. İşlem izolasyonu, siteleri ayırmanın en etkili yoludur. Entegre Meltdown ve Spectre, süreçleri kullanarak siteleri ayırmamız gerektiği daha da belirgin hale geldi. Chrome 67 sürümünden itibaren masaüstünde Site İzolasyonu varsayılan olarak etkinleştirildiğinde, bir sekmede siteler arası her iframe ayrı bir oluşturucu işlemi alır.

site izolasyonu
Şekil 12: Site izolasyonu diyagramı bir site içindeki iframe'lere işaret eden birden fazla oluşturucu işlemi

Site İzolasyonu'nu etkinleştirmek, yıllar süren bir mühendislik çalışmasıdır. Site İzolasyonu , farklı oluşturucu işlemleri atayarak iframe'lerin her bir web sitesi ile diğer. Geliştirici Araçları'nı farklı işlemlerde çalışan iframe'lerin bulunduğu bir sayfada açmak, geliştirici araçlarının ve sorunsuz görünmesi için perde arkasından destek alabilirsiniz. Bir klavyeyi bulmak için basit bir Ctrl+F kelime, farklı oluşturucu işlemlerinde arama anlamına gelir. Bu durumun nedeninin tarayıcı mühendisleri, Site İzolasyonu'nun kullanıma sunulmasının önemli bir kilometre taşı olduğunu söylüyor!

Özet

Bu gönderide, tarayıcı mimarisinin genel görünümünü ele aldık ve çok işlemli mimari. Ayrıca Chrome'da, kullanıcı hizmetleri açısından güvenli çok işlemli mimariyle derinden ilişkilidir. Bir sonraki gönderide, proje yaşam döngüsünün web sitesini görüntülemek için bu süreçler ile ileti dizileri arasında gerçekleşir.

Gönderiyi beğendiniz mi? Gelecekteki gönderi için sorularınız veya önerileriniz varsa lütfen benimle iletişime geçin. Twitter'da @kosamari adresine e-posta gönderebilirsiniz.

Sonraki: Navigasyonda ne olur?