Web'in özel güçlerinden biri, birleştirilebilirliğidir. Web sayfaları, birden fazla kaynaktan gelebilecek çeşitli kaynaklar içerir.
Blink, Chrome, Android WebView, Microsoft Edge, Opera ve Brave gibi Chromium tabanlı tarayıcıların oluşturma motoru olarak kullanılır.
Oluşturma motoru, web tarayıcısının HTML, CSS ve JavaScript kodunu (resimler ve diğer kaynaklarla birlikte) görüntüleyip etkileşimde bulunabileceğiniz web sayfalarına dönüştüren bileşenidir.
Blink, web sayfasını nasıl oluşturur?
Blink, HTML, CSS, JavaScript, videolar ve resimler gibi gerekli tüm kaynakları toplayarak oluşturma sürecini başlatır. Bu kaynakları almak için Blink, Chromium'da ve temel işletim sisteminde ağ yığınıyla olan etkileşimleri yönetir.
CSS ve HTML yüklendiğinde Blink, bu kodu metin biçiminde dönüştürerek üzerinde çalışabileceği bir gösterime dönüştürebilir. Buna ayrıştırma denir. JavaScript'in de ayrıştırılıp yürütülmesi gerekir.
Tüm bu işlemler tamamlandıktan sonra Blink oluşturma işlemine başlar. Oluşturma, görüntülediğiniz ve etkileşimde bulunduğunuz web sayfalarını düzenleme ve görüntüleme işlemidir.
Aşağıdaki şemada, her birinde yer alan bileşenler, süreçler ve kaynaklar da dahil olmak üzere oluşturma görevlerinin ardışık düzenindeki aşamalar gösterilmektedir. Blink'in yapması gereken çok iş var.
Grafikleri oluşturma
Blink, bir bilgisayarın veya mobil cihazın temel grafik donanımıyla etkileşim kurmak için açık kaynaklı 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ün 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, üzerinde ç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ırıp yürütmek için Chromium projeleri tarafından geliştirilen açık kaynaklı bir motor olan V8'i kullanır.
V8, geliştiricilerin JavaScript veya WebAssembly kodu kullanarak temel tarayıcının özelliklerine erişmesini sağlar. Örneğin: Blink'in HTML kodundan oluşturduğu bir dokümanın dahili temsili olan Document Object Model'i (Belge Nesne Modeli) değiştirmek için.
V8, JavaScript'i ECMAScript olarak bilinen JavaScript standardına uygun şekilde işler.
Standartlara uygun şekilde oluşturma
V8, JavaScript'i ECMAScript olarak bilinen JavaScript standardına uygun şekilde işler. Blink gibi oluşturma motorları, web standartlarını birlikte çalışabilir şekilde uygulamak üzere tasarlanmıştır. Web standartları, geliştiricilerin ve son kullanıcıların kullandıkları tarayıcıdan bağımsız olarak web sayfalarının iyi çalıştığından emin olmalarını sağlar.
Blink, HTML, CSS ve DOM dahil olmak üzere web standartlarında tanımlanan tarayıcı ve dil özellikleriyle ilgili spesifikasyonlara uyar.
HTML ve DOM
HTML Standardı, tarayıcı mühendislerinin HTML öğelerini nasıl uygulaması gerektiğini tanımlar. Her HTML öğesinin spesifikasyonu, öğenin DOM arayüzünü tanımlayan bir bölüm içerir. Bu, JavaScript'in tarayıcı tarafından nasıl uygulanması gerektiğini ayrıntılı olarak açıklar. Böylece, öğeyle cihazlar ve platformlar arasında standartlaştırılmış bir şekilde etkileşim kurulabilir.
Arayüz spesifikasyonu WebIDL (Web Arayüz Tanımlama Dili) ile yazılı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 standartlaştırılmış bir yoludur.
Mühendisler, bir özelliği uygulamak için bu WebIDL kodunu bir dosyaya yerleştirir. Bu dosya, Blink tarafından otomatik olarak dönüştürülerek geliştiricilere söz konusu özellik için bir arayüz sunar. Arayüz WebIDL ile tanımlandıktan sonra mühendisler, arayüz çağrılarına yanıt veren uygulamalar oluşturabilir.
html_image_element.idl in Chromium source.Üçü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 dikkatli bir şekilde test edilmiştir. Bu API'ler, Blink'in önemli özelliklere ve işlevlere erişmesini sağlar. Böylece, sıfırdan geliştirme yapılmasına gerek kalmaz. WebGL IDL tanımlanır ve Blink mühendisleri bu web arayüzünü, arka uçta birçok farklı öğeyi oluşturmak için kullanılan kod ve kitaplıklarla bağlar .
WebGL'nin nasıl çalıştığını görmek istiyorsanız WebGL'yi kullanan fraktal oluşturma uygulaması Fractious'a göz atın.
Platformlar arası oluşturma
Chrome'un tüm işletim sistemlerinde ve cihazlarda her yerde Blink'i kullanıp kullanmadığını merak ediyor olabilirsiniz.
iOS ve iPadOS'te Chrome, oluşturma motoru olarak WebKit'i kullanır. WebKit aslında 1998'e kadar uzanan başka bir proje olan KDE'nin bir çatallanmasıydı. Hatta Safari ve Chromium da başlangıçta WebKit'i temel alıyordu. Apple'ın App Store şartlarına göre, Apple ekosistemindeki tüm tarayıcılar ve Safari, bugün WebKit'i kullanıyor.
Zaman içinde, Chromium projeleri, tek bir kod tabanında iki ayrı mimariyi korumak sorunlu hale geldiğinden farklı bir çok işlemli yazılım mimarisi geliştirdi.
Ayrıca Chromium, WebKit'e dahil edilmeyen ö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 çatalladılar ve Blink adını verdiler. Blink'in, Netscape Navigator tarayıcısında metnin yanıp sönmesini sağlamak için kullanılan (pek de sevilmeyen) <blink> etiketinden adını aldığı söyleniyor.
Özetlemek gerekirse: Chrome, Microsoft Edge, Opera, Vivaldi, Arc, 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 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.