6. dia BÖNGÉSZŐ Flashcards
A böngészők felépítése
https://web.dev/static/articles/howbrowserswork/image/browser-components-9cd8ff834cc9c_1440.png
User Interface ————— |
v |
Browser Engine—————|—>Data Storage
v |
Rendering Engine————|
v v v
Networking | JS Enginge | UI backend
A böngésző komponensei
Felhasználói felület : A címsor, a gombok, menü… A böngésző azon része ahol nem a weboldalt látjuk.
Böngésző motor : Magas szintű interfészt biztosít a renderelő motor manipulálásához. Közvetít a felhasználói felület és a renderelő motor között. Kezeli az (!)adattárolót.
Renderelő motor : Kulcs fontosságú, feladata webes tartalom vizuális reprezentációjának létrehozása egy kimeneti eszközön, ezt szabályok formázzák.
Hálózati komponens : Felelős a hálózati kommunikációért. Egy platformfüggetlen interfészt biztosít, mely mögött platform specifikus API-k kerülnek felhasználásra.
JavaScript-motor : Feladata a JavaScript kód végrehajtása. Bájtkódra fordítja majd futási időben fordítódik gépikódra. (SpiderMonkey, V8)
UI back-end : A rajzolásért felelős. UI és web megjelenítésében is használják. Egy platformfüggetlen interfészt biztosít, mely mögött platform specifikus API-k kerülnek felhasználásra.
adattároló : A sütik, gyorsítótárazás, Indexed Database API és Web Storage API felelőse.
Weboldalak renderelésének lépései
Navigálás, a felhasználó beírja az oldal címét a címsorba.
Egy DNS-lekérdezés történik a szerver IP-címének meghatározásához.
Létrejön a hálózati kapcsolat.
HTTP kérés küldése amire a szerver válaszul általában HTML reprezentációt küld.
Majd jön a kritikus útvonal.
Kritikus renderelési útvonal
Azoknak a lépéseknek a sorozata, amelyeket a böngésző végrehajt egy HTML vagy XML dokumentum egy kimeneti eszközön való renderelésekor.
HTML elemzés : DOM fa építés
CSS elemzés : CSSOM fa építés
Stilizálás : dobozfa (render tree, box tree) építese.
Elrendezés : Méret és pozíció meghatározása a dobozfa csomópontjaihoz
Kirajzolás : A dobozfa csomópontjainak kirajzolása a kimeneti eszközön
Föbb renderelő motorok
WebKit : Apple, C++ (Safari, Firefox(IOS), Chrome(IOS) )
Blink : Chromium Project(Google), C++, (Chrome, Opera, Edge, Vivaldi)
Gecko : Mozilla Project, {C, C++, JavaScript, Rust} (Firefox, SeaMonkey)
Főbb asztali böngészők
Chromium : Chromium Project, C, C++, JavaScript (Windows, Linux, macOS), szabad licence
Chrome : Google, C, C++, JavaScript (Linux, macOS, Windows), nem szabad licence
Van köztük egy pár különbség, a Chrome Chromium alapú.
FireFox : Mozilla Project, C, C++, JavaScript, Rust (Linux, macOS, Windows), szabad licence
Opera : Opera Software, C++, (Linux, macOS, Windows), nem szabad licence
Safari : Apple, C++, Objective-C (macOS), nem szabad licence
Edge : Microsoft, C, C++, JavaScript (Linux, macOS, Windows), nem szabad licence, Chromium alapú
Főbb mobil böngészők
Google Chrome : Android (Google)
Safari : IOS (Apple)
Samsung Internet : Android (Samsung)
UC Browser : Android (UCWeb, (Alibaba))
Böngésző kiegészítők, kiterjesztések
A böngésző megjelenését vagy viselkedését lehet velük testreszabni. Lehetnek kiterjesztések, nyelvi csomagok, témák, plugin-ok.
Kiterjesztés az a kiegészítő amely a viselkedését fogja módosítani.
(Add-ons)
Itt is vannak szabványok, (W3C) hogy ne kelljen a fejlesztőknek minden böngészőre újraírnijuk a kiterjesztést.
“Fej nélküli” böngészők
GUI nélküli böngésző amely programozottan kezelhető.
Használják scraping-re, tesztelésre, interakciókra.
Van lehetőség ilyen formában futtatni a Chromiumot, Chromot és Firefoxot.
About URI Séma
A böngészők széles körben használják, hogy hozzáférést adjanaka a belső erőforrásaikhoz, mint például a beállítások, alkalmazás infó vagy rejtett funkciók.
Chromium, Chrome : chrome://about
FireFox : about:about
Opera : opera://about
Safari : edge://about
