Web'in özel güçlerinden biri, bileşenlenebilir olmasıdır. Web sayfaları, birden fazla kaynaktan gelen çeşitli farklı kaynaklar içerir.
Oluşturma motoru, bir web tarayıcısının HTML, CSS ve JavaScript kodunun yanı sıra resimleri ve diğer kaynakları görüntüleyip etkileşim kurabileceğiniz web sayfalarına dönüştüren bileşenidir.
Blink, Chrome, Android WebView, Microsoft Edge, Opera ve Brave gibi Chromium tabanlı tarayıcıların oluşturma motoru olarak hizmet etmek için Chromium projelerinin bir parçası olarak geliştirilmiştir.
Blink bir web sayfasını nasıl oluşturur?
Blink, HTML, CSS, JavaScript, videolar ve resimler gibi gerekli tüm kaynakları toplayarak oluşturma işlemine başlar. Blink, bu kaynakları almak için Chromium'da ve temel işletim sisteminde ağ yığınıyla olan etkileşimleri yönetir.
CSS ve HTML yüklendikten sonra Blink, bu kodu metin biçiminde çalışabileceği bir temsile dönüştürebilir. Buna ayrıştırma denir. JavaScript'in ayrıştırılıp çalıştırılması da gerekir.
Tüm bu işlemler tamamlandıktan sonra Blink, görüntüleyebileceğiniz ve etkileşim kurabileceğiniz web sayfalarını oluşturmaya ve görüntülemeye başlayabilir. Buna oluşturma denir.
Aşağıdaki şemada, oluşturma görevleri ardışık düzenindeki aşamalar (her bir aşamadaki bileşenler, süreçler ve kaynaklar dahil) gösterilmektedir. Blink'in yapacak çok işi var.
Grafikleri oluşturma
Blink, bir bilgisayarın veya mobil cihazın temel grafik donanımıyla etkileşime geçmek için açık kaynak Skia grafik motorunu kullanır.
Skia, çeşitli donanım ve yazılım platformlarında çalışan ortak API'ler sağlar. Google Chrome ve diğer birçok ürün için grafik motoru olarak kullanılır.
Skia, platform değişikliklerine ayak uydururken farklı işletim sistemlerini ve cihazları desteklemeye çalışmak yerine OpenGL, Vulkan ve DirectX gibi grafik kitaplıklarını kullanır. Skia'nın kullandığı kitaplık, çalıştığı platforma (ör. mobil cihazlarda Android veya masaüstünde Windows) bağlıdır.
JavaScript'i ayrıştırma ve yürütme
Blink, JavaScript ve WebAssembly kodunu ayrıştırmak ve yürütmek için Chromium projeleri tarafından geliştirilen açık kaynak bir motor olan V8'i kullanır.
V8, geliştiricilerin temel tarayıcı özelliklerine erişmek için JavaScript veya WebAssembly kodu kullanmasına olanak tanır. Örneğin: Blink'in HTML kodundan oluşturduğu bir dokümanın dahili temsili olan Belge Nesne Modeli'ni değiştirmek için.
V8, JavaScript'i ECMAScript olarak bilinen JavaScript standardına göre işler.
Standartlara uygun oluşturma
V8, JavaScript'i ECMAScript olarak bilinen JavaScript standardına göre işler. Blink gibi oluşturma motorları, web standartlarını birlikte çalışabilir şekilde uygulamak için tasarlanmıştır. Web standartları, geliştiricilerin ve son kullanıcıların hangi tarayıcıdan yararlandıklarına bakılmaksızın web sayfalarının iyi çalıştığından emin olmalarını sağlar.
Blink; HTML, CSS ve DOM gibi web standartlarında tanımlanan tarayıcı ve dil özellikleriyle ilgili spesifikasyonları izler.
HTML ve DOM
HTML Standardı, tarayıcı mühendislerinin HTML öğelerini nasıl uygulamalarını gerektiğini tanımlar. Her HTML öğesinin spesifikasyonunda, öğenin DOM arayüzünü tanımlayan bir bölüm bulunur. Bu belgede, JavaScript'in tarayıcı tarafından nasıl uygulanacağı ayrıntılı olarak açıklanmaktadır. Bu sayede, cihazlar ve platformlar arasında standartlaştırılmış bir şekilde öğeyle etkileşim kurulabilir.
Arayüz spesifikasyonu WebIDL (Web Arayüz Tanımlama Dili) ile yazılmıştır. Aşağıdaki WebIDL, HTML standardının HTMLImageElement tanımının bir parçasıdır.
[Exposed=Window,
LegacyFactoryFunction=Image(optional unsigned long width, optional unsigned
long height)]
interface HTMLImageElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute DOMString alt;
[CEReactions] attribute USVString src;
[CEReactions] attribute USVString srcset;
[CEReactions] attribute DOMString sizes;
[CEReactions] attribute DOMString? crossOrigin;
[CEReactions] attribute DOMString useMap;
[CEReactions] attribute boolean isMap;
[CEReactions] attribute unsigned long width;
[CEReactions] attribute unsigned long height;
readonly attribute unsigned long naturalWidth;
readonly attribute unsigned long naturalHeight;
readonly attribute boolean complete;
readonly attribute USVString currentSrc;
[CEReactions] attribute DOMString referrerPolicy;
[CEReactions] attribute DOMString decoding;
[CEReactions] attribute DOMString loading;
[CEReactions] attribute DOMString fetchPriority;
Promise<undefined> decode();
// also has obsolete members
};
WebIDL, çoğu web standardını oluşturanlar gibi işlevsel arayüzleri tanımlamanın standart bir yoludur.
Mühendisler, bir özelliği uygulamak için ilgili WebIDL kodunu bir dosyaya yerleştirir. Bu kod, Blink tarafından otomatik olarak dönüştürülerek geliştiricilere söz konusu özellik için bir arayüz sağlar. Arayüz WebIDL ile tanımlandıktan sonra mühendisler, arayüz çağrılarına yanıt veren uygulamaları oluşturabilir.
Üçüncü taraf kitaplıkları
Blink birden fazla üçüncü taraf kitaplığı kullanır. Örneğin, etkileşimli 2D ve 3D grafikler oluşturmak için WebGL kullanılır.
WebGL gibi kitaplıklar yüksek düzeyde optimize edilmiş ve dikkatlice test edilmiştir. Bu araçlar, tekerleği yeniden icat etmek zorunda kalmadan Blink'e önemli özelliklere ve işlevlere erişim sağlar. WebGL IDL tanımlanır ve Blink mühendisleri bu web arayüzünü, arka uçtaki birçok farklı öğeyi oluşturmak için kullanılan kod ve kitaplıklarla bağlar .
WebGL'yi çalışırken görmek istiyorsanız WebGL kullanan fraktallar oluşturma uygulaması Fractious'a göz atın.
Chrome ve Chromium karşılaştırması
Chrome, Chromium tabanlı bir tarayıcıdır. Chromium'u bağımsız bir tarayıcı olarak indirip çalıştırabilirsiniz. Ancak Chrome, Chromium'a bazı önemli özellikler ekler.
Örneğin:
- Chrome, ses ve video dosyalarının kodunu çözmek için özel yazılımlar (codec'ler) ekler.
- Kullanıcı izin verirse Chrome, hataları mühendislik ekibine bildirebilir.
- Chrome, Google Hesabınızı kullanarak şifre yönetimi, paylaşılan geçmiş, yer işaretleri ve daha birçok kullanıcı aracısı özelliği sunar.
- Chrome, güncellemeleri otomatik olarak indirir.
- Chrome, test, hata ayıklama ve deneme için Chrome Geliştirici Araçları'nı doğrudan tarayıcıda uygular.
Chrome, Chrome Canary, Chrome Dev, Chrome Beta ve Chrome Kararlı olmak üzere sürüm kanalları aracılığıyla da titiz ek test süreçlerine tabi tutulur.
Bir tarayıcı oluşturmak için ne kadar çaba harcandığını öğrenmek isterseniz chrome://credits sayfasına göz atın. Şu anda Chrome tarafından kullanılan 500'den fazla teknoloji ve proje listeleniyor.
Platformlar arası oluşturma
Chrome'un Blink'i tüm işletim sistemlerinde ve cihazlarda kullanıp kullanmadığını merak ediyor olabilirsiniz.
Chrome, iOS ve iPadOS'te oluşturma motoru olarak WebKit 'i kullanır. WebKit aslında 1998'e kadar uzanan başka bir projenin (KDE) çatalıydı. Aslında hem Safari hem de Chromium başlangıçta WebKit'e dayanıyordu. Apple'ın App Store şartlarına göre, Safari ve Apple ekosistemindeki tüm tarayıcılar günümüzde WebKit kullanıyor.
Zaman içinde, tek bir kod tabanında iki ayrı mimariyi sürdürmek sorun haline geldiğinden Chromium projeleri farklı bir çok işlemli yazılım mimarisi geliştirdi.
Ayrıca Chromium, WebKit'e yerleştirilmeyen özellikleri kullanmak istiyordu. Bu nedenle, Chromium mühendisleri 28. sürümden itibaren kendi oluşturma motorları üzerinde çalışmaya karar verdi. Kodlarını WebKit'ten ayırdılar ve Blink adını verdiler. Blink'in, Netscape Navigator tarayıcıda metnin yanıp sönmesini sağlamak için kullanılan (pek sevilmeyen) <blink> etiketinden sonra adlandırıldığı söylenir.
Özetlemek gerekirse: Chrome, Microsoft Edge, Opera, Vivaldi, Brave ve diğer Chromium tabanlı tarayıcılar ve çerçeveler Blink'i kullanır. Safari ve diğer bazı tarayıcılar, Chrome da dahil olmak üzere iOS ve iPadOS'teki tüm tarayıcılarla birlikte WebKit'i kullanır. Firefox, Gecko adlı bir oluşturma motoru kullanır.
Sonraki adımlar
Blink Intents nedir? başlıklı makaleyi inceleyin.