Tento článok je zrkadlovým článkom o strojovom preklade, kliknite sem pre prechod na pôvodný článok.

Pohľad: 15907|Odpoveď: 2

CEF: Vložiť Chrome pre klienta

[Kopírovať odkaz]
Zverejnené 22. 9. 2017 16:19:26 | | |
Čo je to CEF?
CEF je skratka pre Chromium Embedded Framework, čo je open-source kontrola webového prehliadača založená na projekte Google Chromium, podporujúca platformy Windows, Linux a Max. Okrem poskytovania rozhraní C/C++ existujú aj porty pre iné jazyky.

Keďže je založený na Chromiu, CEF podporuje HTML5 funkcie implementované vo Webkit a Chrome a je relatívne blízky Chrome z hľadiska výkonu.

CEF tiež poskytuje nasledujúce funkcie: vlastné pluginy, vlastné protokoly, vlastné Javascrip objekty a rozšírenia; Ovládateľné načítavanie zdrojov, navigácia, kontextové menu a podobne.

Kto používa CEF
Použime niekoľko praktických príkladov, aby sme ukázali, čo všetci urobili s CEF:

Rôzne prehliadače

Skoré dvojjadrové prehliadače (IE + Webkit) niektoré používali CEF ako kontrolu prehliadača v jadre Webkit.

Pre prehliadače je však priame rozširovanie na Chrome vlastne kráľom a teraz to robia všetci (rôzne rýchle prehliadače).

Klient Evernote (na Windows)

Evernote umožňuje používateľom vkladať webové stránky do poznámok a tiež poskytuje pluginy na ukladanie webových stránok ako poznámok.

To musí byť potreba správne vykresliť stránku na klientovi, a táto úloha je ponechaná na CEF.

GitHub klient (na Windows)

GitHub tiež zabalil libcef.dll, z hľadiska výkonu musí byť stránka ReadMe použitá na zobrazenie projektu CEF a používateľské rozhranie inde môže byť čiastočne implementované cez stránky.

QQ

QQ implementovalo niektoré funkcie a rozhrania vložením IE už dávno. Od minulého roka QQ zaviedol CEF, ktorý nahradil niektoré miesta, ktoré predtým používali IE, aby bolo možné využívať nové funkcie založené na Webkite, a zároveň získal výhody v rýchlosti, stabilite a kompatibilite.

Adobe Edge Animate & Adobe Edge Reflow

Adobe spustilo kompletnú sadu moderných webových stránok (alebo HTML5?) Edge.

Adobe Edge Animate, pre animáciu, dokáže dosiahnuť zložité animácie úpravou časovej osi a vytváraním originálov (nazývaných symboly v Edge Animate).

Edge Reflow je nástroj na navrhnutie responzívneho webu. Niektorí ľudia to prekladajú ako responzívne, čo je vlastne adaptívne.

Vyššie uvedené dva softvéry sú v podstate orientované na prehliadač jadra Webkit, takže je potrebné vložiť jadro Webkit na poskytovanie WYSIWYG náhľadu a editačného rozhrania. Všetci používali CEF. (Rozdiel medzi CEF a čistým Webkitom bude predstavený neskôr)

Q+

Pod konceptom webovej aplikácie Q+ poskytuje bežiace prostredie pre webové stránky (jednoducho povedané: okno klienta a niektoré dostupné API) a podporuje jadrá IE a Webkit.

Pre študentov webového vývoja jadro Webkit (v skutočnosti CEF), ktoré sme predstavili, nemusí zohľadňovať otázky kompatibility verzií IE, čo nielenže zvyšuje efektivitu vývoja, ale tiež nám umožňuje využiť niektoré nové funkcie HTML5. V tom čase boli aplikačný trh Q+, centrum správ, tapety, hudobné widgety a ďalšie aplikácie vyvíjané na základe jadra Webkit.

Možno povedať, že projekt Q+ urobil viac pokusov o CEF, napríklad:

Vyvinutý hudobný widget používa HTML5 audio tag;

Niektoré aplikácie využívajú offline funkcionalitu HTML5 (teda s manifest súborom), ale samozrejme sú tam aj nejaké zvraty a získal som veľa skúseností.

Balené nástroje pre vývojár webkitov.

Vlastné protokoly: Napríklad prístup k qplus:// protokolom môže byť presmerovaný do špeciálneho priečinka.

Off-screen rendering (OSR): Použitím off-screen renderovania + Windows Layered Window vzniká nepravidelné okno webovej stránky (aký je tvar nepriehľadnej oblasti webovej stránky, aký je tvar okna)

Prečo vkladať CEF pre klientov?
Pri toľkých príkladoch je táto otázka oveľa jednoduchšia na vyslovenie:

Používa sa na zobrazovanie webových stránok a využívanie rôznych webových služieb;

Používajte webové stránky na UI;

Používajte funkcie HTML5, ako sú audio, canvas a podobne, vrátane funkcií CSS3.

Renderovanie mimo obrazovky (OSR):

Takzvaný OSR spočíva v tom, že sa celá stránka vykreslí na bitmapu bez vytvorenia skutočného okna. Samozrejme, nielen renderovanie, ale aj séria API na spracovanie myši, klávesových udalostí, vstupných metód a podobne.

Táto funkcia je obzvlášť užitočná, keď nie je možné použiť skutočné okná, napríklad na vrstvených oknách alebo pri renderovaní do textúr v hrách.

Použitím OSR funkcií je možné vytvoriť zaujímavé efekty, ako napríklad:

AlloyTeam vytvoril Webtop, ktorý používa OSR na vytvorenie prehliadača, prehrávača a podobne.

Existuje projekt Awesomium, ktorý tiež podporuje OSR, a už existujú herné projekty, ktoré používajú Awesomium na renderovanie webových stránok v hrách. (Keď sa pozrieme na výstupný súbor Awesomium, mal by byť podobný implementácii CEF, je to celý balík Chromium a CEF, ktorý Awesomium dokáže, by mal byť tiež vybavený)

Vo voľnom čase som vytvoril demo a použil CEF na renderovanie webových stránok v OpenGL Texture, čo možno považovať za malý pokus aplikovať CEF na hru, ako je znázornené na obrázku:

Demo prehliadača v hre

Prečo CEF?
IE

IE je už dlho zabudovaným ovládačom prehliadača a presnejšie povedané, dnes máme mnoho alternatív k IE.

CEF vs IE:

Kompatibilita:

Teda: Jadro sa líši od 6 do 10 verzií v závislosti od operačného systému a náročnosť webového vývoja na kompatibilitu s týmito verziami nemožno podceňovať.

CEF: Používa jadro Webkit a z hľadiska charakteristík môže verzia CEF zodpovedať číslu verzie Chrome, takže webový vývoj má jasný súbor funkcií a eliminuje záťaž spojenú s kompatibilitou.

Štandard HTML5 a nové funkcie:

IE: Samozrejme, staršie verzie IE nepodporujú najnovšie HTML funkcie a štandardy.

CEF: Niet pochýb o tom, že Webkit a Chrome sú na čele podpory nových funkcií.

Open Source a multiplatformové:

TEDA: Nie open source, obmedzené na platformu Windows

CEF: Open source, Webkit a Chromium sú všetky open source, open source znamená viac možností prispôsobenia; A zahŕňa Windows, Mac a Linux.

Off-screen rendering (OSR):

Teda: Renderovanie mimo obrazovky sa dá dosiahnuť pomocou niektorých hackov, ale pracovná záťaž nie je malá a nie je oficiálne podporovaná.

CEF: Existuje vyhradený režim renderovania mimo obrazovky a zodpovedajúce API.

Prenikanie:

IE: Všetci používatelia Windows majú IE, čo je výhoda IE (ale niektorí používatelia majú nesprávne nastavenia IE, čo vedie k nepoužiteľnosti, napríklad jscrip{filtering}t.dll nie je registrovaný, čo vedie k nemožnosti používať Javascrip{filter}t)

CEF: Musíte si ho nainštalovať a zabaliť sami

Webkit

Prečo zámerne porovnávať CEF a Webkit?

Nedávno som čítal dobrý článok o tom, čo Webkit je, čo nie je a prečo existuje toľko Webkit portov: "Čo by vývojári mali vedieť o WebKit"

Tu je hrubé zhrnutie:

Webkit je parsovací a aranžovací engine webových stránok, ktorý zdieľajú všetky prehliadače založené na Webkit. Predvolený Webkit port je Safari, čo je verzia stiahnutá z kompilácie zdrojového kódu Webkitu. Existujú aj ďalšie Webkit porty, vrátane Chromium, QtWebkit a podobne, ktoré majú rôzne implementácie v 2D grafike, GPU akcelerácii, Javascrip engine, dekódovaní zvuku/videa a podobne.

CEF vs webkit (vlastne Chromium vs Webkit)

V8 engine, 2D renderovanie od skia, GPU-akcelerovaná implementácia v Chromium a podobne – vďaka vynikajúcej implementácii Chromium sa CEF stal aj vynikajúcim portom pre Webkit.

Nevýhody CEF:
Buďte láskaví, CEF má tiež svoje vlastné nedostatky a obmedzenia, a nemôžete len spomenúť výhody, tu predstavím nevýhody a nevýhody CEF:

Zväzok:

V najnovšej verzii CEF by mal byť súčet všetkých DLL blízko 40M, a odhaduje sa, že po kompresii to bude 10M+. Ak váš projekt sám o sebe nie je veľký a nemôže ho prijať, potom CEF nie je pre vás.

Samozrejme, pre hry, ktoré sú teraz počítané pomocou G, by tento objem mal byť stále prijateľný.

Pri bežných klientskych projektoch záleží na tom, či samotný projekt potrebuje využívať funkcie implementované CEF a či sa oplatí tak výrazne zväčšiť inštalačný balík produktu. Samozrejme, existujú aj určité kompromisy v implementácii, napríklad sťahovanie po inštalácii (osobne si nemyslím, že je to významné, veď používatelia, ktorí inštalujú balíky, si môžu zvoliť aj sťahovanie softvéru na zrýchlenie)

Cache:

Cache v Chrome je navrhnutý tak, aby čítal a zapisoval len jeden proces, a to isté platí pre CEF.

Pre klientov, ktorých je potrebné otvárať viackrát, je možné pre každú inštanciu procesu špecifikovať iba iný cache priečinok. To však nepochybne zvyšuje využitie pevného disku a tiež spôsobuje, že niektoré súbory, ktoré boli pôvodne uložené v cache, sa stiahnu viackrát (napríklad proces A cache jQuery.js, proces B musí požiadať a cacheovať raz, pretože cache rôzne adresáre jQueyr.js

OSR:

OSR momentálne nie je ako reálny okenný režim, ktorý môže GPU zrýchliť, a OSR sa dá vykresliť iba softvérovo, čo znamená, že niektoré 3D efekty CSS nie sú podporované.

Avšak charakteristiky OSR sa stále zlepšujú a osobne si myslím, že sa oplatí na to tešiť.

Čo zdieľať neskôr
Po tom, čo som napísal toľko, sa to dá považovať za úvod do CEF a v budúcnosti napíšem niekoľko suchých vecí, teda ako používať CEF, vrátane:

Získavanie kódu CEF, kompilácia, vkladanie, spracovanie API volaní stránok a klientov, OSR off-screen renderovanie, cacheovanie, vlastné protokoly, CEF1 & CEF3 a ďalšie.

No, to je na dnes všetko.





Predchádzajúci:Redis nastavuje heslá na vzdialené pripojenie a prístup
Budúci:ASP.NET viacerými požiadavkami na stránke naraz vzniká blokujúca situácia pozastavenej animácie
Zverejnené 25. 2. 2019 9:14:24 |
Veľký
 Prenajímateľ| Zverejnené 12. 8. 2023 20:08:02 |
WebView2 (6) Distribuovať a nasadiť runtime WebView2
https://www.itsvse.com/thread-10372-1-1.html

[WebView2] (5) Načítanie lokálnych HTML zdrojov virtuálneho hostiteľa
https://www.itsvse.com/thread-10367-1-1.html

[WebView2] (4) Web a WinForm si navzájom volajú metódy funkcií
https://www.itsvse.com/thread-10365-1-1.html

WebView2 (3) Obojsmerná komunikácia medzi webom a WinForm aplikáciami
https://www.itsvse.com/thread-10364-1-1.html

[WebView2] (2) WinForm zavádza WebView2 na zobrazovanie webového obsahu
https://www.itsvse.com/thread-10362-1-1.html

[WebView2] (1) Počiatočné zoznámenie s technológiou Microsoft Edge WebView2
https://www.itsvse.com/thread-10361-1-1.html
Vyhlásenie:
Všetok softvér, programovacie materiály alebo články publikované spoločnosťou Code Farmer Network slúžia len na vzdelávacie a výskumné účely; Vyššie uvedený obsah nesmie byť použitý na komerčné alebo nezákonné účely, inak nesú všetky následky používateľmi. Informácie na tejto stránke pochádzajú z internetu a spory o autorské práva s touto stránkou nesúvisia. Musíte úplne vymazať vyššie uvedený obsah zo svojho počítača do 24 hodín od stiahnutia. Ak sa vám program páči, podporte originálny softvér, zakúpte si registráciu a získajte lepšie originálne služby. Ak dôjde k akémukoľvek porušeniu, kontaktujte nás prosím e-mailom.

Mail To:help@itsvse.com