Big Pipe Nedir?

Genel olarak web sitelerinin hızlı açılması için kullanılan bazı teknolojiler vardır. Örneğin skeleton loading, AJAX gibi. Bu gibi teknolojiler kullanıcıya hızlı bir şekilde sonuç vererek daha hızlı yüklendiği hissini vermektedir.

Aytan Rustamova

10 dakika okuma süresi

İnternet kullanımı arttıkça, insanların websitelerinden beklendisi de artmaktadır. Yapılan araştırmalara göre kullanıcıların websitede kalma süresi websitenin açılma hızı ile doğrudan orantılıdır. Genel olarak web sitelerinin hızlı açılması için kullanılan bazı teknolojiler vardır. Örneğin skeleton loading, AJAX gibi. Bu gibi teknolojiler kullanıcıya hızlı bir şekilde sonuç vererek daha hızlı yüklendiği hissini vermektedir.

Bu teknolojilerin yanısıra Facebook kendi teknolojisini, yani Big Pipe’ı tanıttı. Nedir bu BigPipe ve diğer teknolojilerden farkı nedir bunun ?

Öncelikle websitelere bakarsak, tüm websiteler request (istek) ve response (cevap) mantığı ile çalışıyor. Kullanıcıdan sunucuya istek gider, sunucu isteğe göre cevap hazırlar sonra sonucu HTML template olarak görürüz ancak HTML template oluşturulmadan önce, biz tüm dataların işlem sırasına göre gelmesini beklemeliyiz. Bu işlem asynchron çalışan Node.js için çokta mantıklı karşılanmamış. Neden hazır olan çıktıyı kullanıcıya sunmak yerine bütün süreçlerin - işlerin bitmesini beklemeliyiz?

Bu Teknolojinin Esas Motivasyonu Nedir?

Facebook gibi SNS-lerin (Social Network Services) esas içeriği kişileştirilmiş datalara dayalı ilerlemelidir. Bu o da sunucuların hızını geliştirmek için her zaman yeni arayışlar doğurmuştur. Facebook bunun çözümünü sunucu ve istemci arasında paralel işlemde buldu. Bu çözüm sadece istek gönderilmiş sayfanın gecikmesini azaltmak üzerine odaklanmıştır.

Chunked Encoding

BigePipe teknolojisini anlamak için chunked olunmuş HTML sayfalarını anlamamız gerekiyor. Chunked encoding HTTP 1.1 dayalı transfer metodudur. Bu metod gönderilen requestin yığınlara bölünüp her yığında paralel bir şekilde işlem yapılmasını sağlıyor. Bu şekilde sonucu hazır olan bir yığını ekrana yansıtılıyor.

Pagelet

Pagelet sayfaların küçük hisselere bölünmesi demektir. Aşağıdaki resimde Facebookun bir sayfayı nasıl küçük parçalara böldüğünü görebiliriz.

Life Cycle

Genellersek, BigPipe teknolojisinde kullanıcı istek gönderdiğinde aşağıdaki adımlar başlar.

Tarayıcı tarafından sunucuya HTTP request gönderilir.
HTML sayfası aşağıdaki gibi paralel işlem için bölünür.

<html>
<head>…</head>
<body>
<div id=”left_column”>
<div id=”pagelet_navigation”></div>
</div>
<div id=”middle_column”>
<div id=”pagelet_composer”></div>
<div id=”pagelet_stream”></div>
</div>
<div id=”right_column”>
<div id=”pagelet_pymk”></div>
<div id=”pagelet_ads”></div>
<div id=”pagelet_connect”></div>
</div>

Sunucu istek gönderilen sayfanın Pagelet oluşturuyor. Pagelet oluştuğu anda bu response (cevap) CSS'leri ilave edilmiş bir formada JSON formatına dönüştürülüyor.

big_pipe.onPageletArrive( { id: “pagelet_composer", content: 
, css: [..], js: [..], … })

Web Sunucu ve Tarayıcı Arasındaki Paralel İşlem

Paralel işlemlerde her pagelet farklı aşamalarda çalışıyor. Mesela, css'i yüklediği halde aynı zamanda başka bir stage'de içeriği oluşturabiliyor ve aynı zamanda başka stage'de de başka bir pagelet için response (cevabı) oluşturabiliyor.

Performans Kıyaslaması

Aşağıdaki grafik Big Pipe ve geleneksel modelde kullanıcı gözünde sayfa performansını gösteriyor. Grafikte bir çok tarayıcıda Big Pipe ile gecikmeyi yarıya indirdiğini görüyoruz.