Co je to Quantum a vůbec jádro prohlížeče

V říjnu loňského roku Mozilla oznámila projekt Quantum – napsání jádra prohlížeče nové generace. Dnes už jsou první významné součásti v poslední verzi Firefoxu 53. Mozilla ale ví, že pro lidi, kteří sami nevytvářejí webové prohlížeče (a těch je většina 😉 ), může být těžké pochopit, proč jsou tyto změny potřeba. Koneckonců mnoho změn není ani přímo vidět.

Proto napsal Matt Claypotch článek na blogu Mozilla Hacks, co je vlastně ten projekt Quantum. Doufáme, že vám tento a série dalších článků poskytne lepší přehled o tom, jak Firefox funguje a co projekt Quantum vylepší. Tento první příspěvek vysvětluje základy fungování prohlížeče a jeho jádra.

Co je to jádro prohlížeče a jak funguje?

Na začátek musíme projít základy. Webový prohlížeč je program, chcete-li software, který načte soubory (obvykle ze vzdáleného serveru), zobrazí je na vašem počítači a umožní vám se proklikávat stránkami pomocí odkazů, vyplňovat formuláře apod. Quantum je kódové jméno projektu, který má výrazně upravit část Firefoxu starající se o ono zobrazování souborů z internetu. Technicky se tato část nazývá „browser engine“ nebo česky „jádro prohlížeče“ a bez něj byste místo webových stránek viděli jenom těžko srozumitelný kód. Jádro prohlížeče Firefox se nazývá Gecko.

Nejjednodušší je představit si jádro prohlížeče jako kouzelnou skřínku nebo něco jako televizi. Na jedné straně vstupuje signál z internetu a na obrazovce se zobrazí přijaté údaje. Jak? Jak se mění data a kód z internetu na stránku, kterou pak vidíme?

Webovou stránku může tvořit spoustu věcí, typicky se dají rozdělit do tří kategorií:

• Kód, který určuje strukturu stránky
• Kód, který určuje vzhled stránky, neboli styly (písmo, barvy, …)
• A skripty akcí, které má prohlížeč na stránce vykonávat – výpočty, změny nebo animace při kliknutí myší a nebo další rozšíření dvou výše uvedených

Jádro prohlížeče kombinuje dohromady strukturu a styly stránky a pak ji vykreslí na vaší obrazovce a postará se, abyste mohli patřičně klikat na odkazy, psát do políček pro text nebo stránku posouvat. Všechno začíná strukturou. Když do prohlížeče zadáte webovou adresu, je to adresa jiného počítače, od kterého prohlížeč získá data webové stránky. Jak přesně jejich komunikace probíhá by vystačilo na samostatný článek, ale výsledkem je, že si prohlížeč stáhne všechny soubory s kódem. Strukturu webové stránky určuje kód ve formátu HTML a tomu musí prohlížeč porozumět.

Jádro prohlížeče obsahuje několik součástí a tou základní je tzv. parser. Ten převádí data z jednoho formátu do jiného. Takto třeba prohlížeč rozumí následujícímu HTML kódu:

<section>
  <h1>Ahoj!</h1>
  <img src="http://example.com/obrazek.png"/>
</section>

Ok, máme tu nějakou sekci kódu. V ní je nadpis první úrovně s textem „Ahoj!“. A pak v ní je obrázek, který mám stáhnout z adresy „http://example.com/obrazek.png“.

Strukturu stránky si prohlížeč uloží do paměti jako tzv. Document Object Model (DOM). Na rozdíl od HTML, DOM není úplně kódem, ale už představuje samotnou strukturu stránky.

Kromě této struktury má v sobě HTML i informace, odkud má prohlížeč stáhnout kód se styly a skripty. Váš prohlížeč je tedy stáhne, opět ve svém jádře spustí potřebné parsery a podle toho stránku zobrazí. Podívejme se nejdříve na styly.

Styly

Vzhled neboli styly se nastavují kódem v jazyce CSS. Česky se mu někdy říká „kaskádové styly“. Kaskádové proto, že jednotlivé styly se mohou aplikovat postupně, některé jsou aplikovány hned, některé později, některé jsou důležitější a jiné méně. Vypadat mohou třeba takhle:

section {
  color: green;
  border: 1px solid blue;
}
h1 {
  font-size: 200%;
}

Kaskádové styly se skládají z jednotlivých pravidel, která se zase skládají ze selektorů a seznamu deklarací. Selektor definuje, pro jaké prvky ve struktuře stránky pravidlo platí a deklarace zase říká, jak má tento prvek vypadat. Tento příklad třeba říká, že v naší sekci má být zelené písmo a celá má být ohraničena modrou čarou o tloušťce 1 pixel. Nadpisy první úrovně pak mají mít dvojnásobnou velikost písma. Jakmile prohlížeč styly vypočítá, je čas je použít. Připravený DOM je společně se styly předán jádru, které stránku zobrazí s ohledem na velikost okna, místo na obrazovce atp.

Když je nakonec stránka připravená, je čas ji zobrazit na obrazovce. Tomu se říká vykreslení. Je to konečná kombinace všech prvků – struktury, stylu i skriptů. Ty jsme si dovolili přeskočit, protože mohou dělat všechno výše uvedené a ještě chování a složitost postupů jádra prohlížeče trochu komplikovat. Takže máme vykresleno, vidíme stránku na obrazovce, a to je všechno?

Není. Stránka může být dlouhá, klidně delší než tenhle článek, a je potřeba ji kolečkem myši posunout, abychom si mohli přečíst všechno. V tu chvíli je potřeba vykreslit na obrazovku i ty části, které se na ní předtím nevešly. Protože je to časté, prohlížeče si většinou tuto část vykreslí dopředu a při posouvání stránky už jenom zobrazují připravený obrázek. Posouvání je pak rychlejší.

Když si ale pustíme video, které má klidně 60 snímků za sekundu, není moc času připravovat si věci dopředu. Tady musí být prohlížeč trochu chytřejší – většinou si vytvoří tzv. vrstvu, kde video přehrává, a zbytek stránky nechává vykreslený beze změny. Překreslovat celou stránku by totiž bylo zbytečné. Díky stylům a skriptům se může měnit velikost písma, obrázků, mohou se i posouvat, a je potřeba opakovaně přepočítávat styly a někdy i celou strukturu (DOM). To už je docela dost práce, že?

Standardy

Ne každý prohlížeč rozumí a interpretuje všechny kódy stejným způsobem. Rozdíly mohou být od drobností po stránky funkční jenom někde. Moderní internetové stránky už fungují ve všech prohlížečích stejně, a to díky standardům, které určují pravidla pro kódy HTML, CSS i skripty. Standardy určují výbory složené ze zástupců autorů jednotlivých prohlížečů, kteří se na nich nejdříve dohodnou. Pokud se rozhodne někdo vytvořit úplně nový prohlížeč, může si jeho fungování zkontrolovat podle standardů. Zobrazování stránek díky nim není žádná „tajná magie“, ale má předem domluvená pravidla známá každému prohlížeči.

Mooreův zákon

V dávných dobách, kdy všichni používali jenom stolní počítače, se zdálo, že budou počítače pořád jenom zrychlovat a zrychlovat. Tento předpoklad vychází z Mooreova zákona, což je pozorování, jak dokážeme vyrábět stále novější a lepší procesory a další části počítače. Proč to tedy vypadá, že už dnes naše počítače nezrychlují?

Rychlost už není to jediné, co nás dneska při nákupu počítače zajímá. U notebooku chceme, aby baterka vydržela dlouho nabitá a nebyl moc těžký ani hlučný. A chytré telefony jsou vlastně také počítače, jenom mají navíc fotoaparát, umí telefonovat, posílat krátké zprávy a vejdou se do kapsy. To všechno umožnil technický pokrok, snaha o zmenšování zařízení ale má svou daň. Tou je zmiňovaná rychlost – menší a úspornější zařízení prostě nemají takový výkon, jako velké stolní počítače, které si nemůžeme nosit s sebou.

Co ale mají malé telefony společného s velkými počítači je větší počet jader procesoru. Běžně mají alespoň dvě, nebo spíše čtyři. Bohužel jádro Firefoxu vznikalo v době, kdy se nám ani o tom nesnilo a každý počítač měl jedno jádro procesoru. S více nikdo nepočítal a nepočítali s nimi tehdy ani autoři programů. Upravit program, aby uměl používat všechny části procesoru, vyžaduje spoustu nového kódu, a právě tady se dostáváme k projektu Quantum. V rámci něj programátoři v Mozille upravují jádro prohlížeče tak, aby umělo používat všechny procesory v počítači a nenechávalo je nečinně zahálet.

Díky všem těm neviditelným změnám bude ve výsledky Firefox rychlejší, výkonnější a videa a animace se v něm nebudou zasekávat. V nadcházejících měsících se budeme úpravám podrobněji věnovat a budeme sledovat, jak vývoj postupuje. Už se těšíme!