Miért nem használja az előre beállított Download

Preload (vagy előfeszítő) az új szabvány. teljesítményének növelésére tervezték, és a fejlesztő pontosabb ellenőrzése alatt a terhelési források. Ez ad a fejlesztők képesek létrehozni egy egyéni boot sorrendet és logikai elkerüli a teljesítmény problémák okozta script letöltők.

Cikkek ebben a témában a SmashingMagazine:

preload ( ) Van egy kijelentő mintavételi irányelvet.

Nem vagyunk egy ilyen lehetőséget?

Valami hasonló van. Úgy tűnt, az interneten sokáig, és a legtöbb böngésző által támogatott. Néhány évvel ezelőtt, a Chrome bevezetett és . Tehát mi az újdonság az előfeszítő? Mitől különbözik a többi irányelvek? Mindannyian mondani a böngésző a minta források nem?

Igen van, de jelentős különbségek vannak közöttük. Ezek a különbségek csak szükség, hogy kialakult egy új irányelv, feladatok, back-törés a régi.

prefetching ( ) Van egy irányelv, amely jelzi a böngésző, hogy hozza egy erőforrás, hogy szükség lesz az átmenet során a következő oldalra. Ez azt jelenti, hogy az erőforrás lesz mintában rendkívül alacsony prioritású (mert a böngésző tudja, hogy a forrásokat az aktuális oldal sokkal fontosabb, mint a források, hogy szükség lesz a következő). Ez azt jelenti, hogy a Fő célja ennek a gyorsulás prefetchinga a következő oldal betöltését, nem a jelenlegi helyzetre.

Subresurs ( ) Eddig tervezték, hogy megfeleljen a kihívásoknak a jelenlegi oldalon, de a legtöbb kérdés hatástalan. Mivel a fejlesztő nem tudja beállítani az erőforrás-használat prioritás, a böngésző (vagy inkább a Chrome és a böngésző alapú króm) letölti őket egy meglehetősen alacsony prioritást a legtöbb esetben ez azt jelenti, hogy a kérelmet az erőforrás körülbelül ugyanannyi ideig, mint anélkül subresursa.

Hogyan elérni a legjobb előfeszítő?

Előretöltés úgy tervezték, hogy az aktuális oldalon, valamint subresurs, de egy kicsi, de fontos különbség. Van elôterhelési mint tulajdonság. amely lehetővé teszi, hogy a böngésző olyan dolgokat, amelyek lehetetlen prefetchingom és subresursom:

• A böngésző kérni a megfelelő erőforrások prioritást, amellyel összhangban fognak betölteni - nem lesz késés jelentős forrásokat vagy másodlagos merevlemez szivattyúzás.
• A böngésző biztosítják irányelvek betartását az erőforrás tartalmát biztonsági politika, és nem megy a megbízott szerver.
• A böngésző küldhet megfelelő Accept fejléc alapján az erőforrás típusát (például kép / webp a kép minta).
• A böngésző ismeri a forrás típusát, és ezért lehet meghatározni, hogy lehet használni a következő kéréssel ugyanahhoz az erőforráshoz.

Előretöltés az is jellemzi, hogy van egy működőképes onload esemény (legalábbis Chrome ebben az esetben nem működik a másik két érték rel).

Továbbá, előfeszítő nem blokkolja az onload esemény az ablakon. Persze, kivéve azokat az eseteket, amikor a betöltött erőforrás kér egy másik forrás, a blokkoló esemény.

A Mindezen jellemzőket végrehajtó egy sor lehetőséget korábban nem volt elérhető számunkra.

Nézzük meg őket külön-külön.

Letöltés „későn észlelt” források

Most van egy eszköz, hogy elmondja a böngésző: „Hé, a böngészőben! Itt látható a forrás meg kell bizonyosodni arról, úgyhogy töltse le most. "

A kód, ez a mondat a következő:

Mint egy attribútum típusát jelzi letölthető erőforrás, akkor a következő értékeket:

Teljes lista értékei van a leírás.

Ugró attribútum értékek vagy hibás megbízás egyenértékű XHR-kérelmet, amelyben a böngésző nem tudja, hogy úgy dönt, ahol a mintavétel történik alacsony prioritású.

Korai betöltés betűtípusok

Az egyik legnépszerűbb fajta „később észlelt kritikus erőforrások” web betűtípusok. Egyrészt, a legtöbb esetben ezek a kritikus tételére szöveget az oldalon (amíg nincs tulajdonságait font-kijelző kerül végrehajtásra). Másrészt, a betűtípusok található mélyen a gyomrában a CSS, és akkor is, ha a böngésző preloader elemzési CSS, akkor nem biztos, hogy szükség lesz, amíg ők rendezni ügyüket kötődés a specifikus szelektor, DOM csomópontok. Bár elméletileg böngészők foglalkozni vele, egyikük nem megtenni, mert ez vezet a hamis letöltések esetekben, amikor a stílus nyilatkozatot átírható a következő sorokat a CSS.

Általánosságban elmondható, hogy bonyolult.

De tudtuk megkerülni ezt a komplexitást azáltal, hogy egy irányelv font előfeszítő hogy pontosan mire van szüksége. Például:

Egy pont világossá kell tenni: meg kell adni egy attribútumot crossorigin amikor kiválasztja betűtípusok, úgy, ahogyan az egy névtelen CORS módban. Igen, akkor is, ha a betűk ugyanazon a gépen, mint az oldal. Sajnos.

A type attribútum biztosítja előfeszítő az erőforrás csak a böngészők, amelyek támogatják ezt a betűtípust. Abban a pillanatban, előfeszítő csak támogatja a Chrome és tökéletesen támogatja WOFF2, de a jövőben előfeszítő jelenhet meg más böngészők, és nem tudjuk garantálni, hogy ezek WOFF2 támogatást. Ugyanez vonatkozik a többi erőforrást, hogy már előre fel van töltve, és hogy nincs abszolút támogatást a böngészőben.

Dinamikus terhelés nélkül kezdő

A következő érdekes forgatókönyvet, amely elérhetővé válik, akkor letölti a kívánt forrás, amit nem fog azonnal elindul. Például, ha azt szeretnénk, hogy végre egy script egy bizonyos időszakban a lét a lap anélkül felett a script (azaz anélkül, hogy a lehetőséget, hogy egy funkció hozzáadása runNow ()).

Most nagyon korlátozott a választott módon teheti ezt. Ha csak helyezze be a script a megfelelő helyre, hogy végre, a böngésző kell, hogy először töltse le a szkript fut, hosszabb időt vehet igénybe. Akkor lehet letölteni a forgatókönyvet előre a XHR, de a böngésző nem fogja megtenni, mert az erőforrás nem került letöltésre az azonos típusú, amely igyekszik használni.

Szóval mit lehet tenni?

Anélkül előfeszítő kicsit. Bizonyos esetekben, akkor végezze el a tartalmát a script segítségével eval (). de ez nem mindig kivitelezhető, és hordozza mellékhatásokat. De előfeszítő minden lehetséges!

Kezdheti meg az elején az oldal betöltésekor, arra a pontra, ahol szeretné futtatni a szkriptet (de ha nem biztos benne, hogy ez a kód nem zavarja a rakodási egyéb, a kritikus erőforrások). Most, amikor meg kell futtatni, csak helyezze be a script tag, és ez elég.

Aszinkron rakodó jelölés

Egy másik jó hack, hogy használja a onload felvezető hogy hozzon létre egy látszatát aszinkron rakodó közvetlenül a jelölést. Scott Jel első kísérletezett vele, mint egy része a loadCSS könyvtárban. Tudjuk használni az alábbi rövid kód:

És ez elég ahhoz, hogy az aszinkron betöltés stílusokat. Scott szintén egy oldalt, amely bizonyítja ezt a képességet.

Úgy is működik aszinkron szkripteket.

De azt mondja, hogy már van