Sebesség ellenőrzés helyén fellépő reakciók
Sebesség ellenőrzés helyén fellépő reakciók
Ez a probléma már régóta ismert, és a gyártók megpróbálták kezelni. A Microsoft azt javasolta, hogy elhalasztja az attribútum egy script tag. Ezzel a tulajdonság böngésző fejlesztő ígéri, hogy ebben a konkrét script document.write nem fogja használni. Ugyanakkor támogatja a különböző böngészők ez béna. Az interneten vannak különböző vélemények róla, de úgy érzem, a guru nem tanácsos támaszkodni rá.
Egy másik lehetséges megoldás ebben a helyzetben - valahogy gyorsítótár kattintással az oldalon, és manipulálni a cache után indítószkriptekkel.
Ezen a ponton én befejezi a oldalleképezés. Mi jár a inicializáló szkript.
A lényeg szeretnék közvetíteni ebben a szakaszban egyszerű: az inicializálás során oldalt el kell végeznie a szükséges minimális intézkedéseket.
A meg kell érteni elég tágan. Kezdeni, adok néhány példát a félreértés, adok „rossz tanácsot.”
A leggyakoribb eset - kezelésére több elemet az indításkor. Például, tegye a minden linkeket az oldalon felvezető. Vagy séta a szöveg csomópontok, és alkalmazza az egyes tipográfia. Az első elválaszthatatlanok két: számának növelése reflow minden olyan oldalakon. Helyénvaló, hogy egy dinamikusan összeköti után minden ikon, mivel ez teszi a szolgáltatás SnapShots.com. Egy másik példa: létrehozni tartalék dom-objektumok, ami hasznos lehet. Ezután, ha szükséges, akkor egyszerűen jelenik meg, és a kód lesz sima és selymes.
És most komolyan a szokásos forrásait a teljesítmény problémák, amikor az oldal betöltődik. Most is aggasztóbb, hogy mit kellett szembenézni ebben a szakaszban - a kapcsolat rakodók. A klasszikus változata ez a tevékenység, hogy kap egy listát a tárgyak, események kerülnek feldolgozásra, és a lógó őket rakodók. Még ebben az egyszerű algoritmus, két helyen, hogy akkor nagyban javítja: a keresési sebesség szükséges elemet, és a feldolgozás sebességét.
Körülbelül másfél évvel ezelőtt volt egy kis könyvtárat, hanem a bővítés prototype.js, az úgynevezett behavior.js. Ez lehetővé teszi, hogy több fejlett css-szelektor rendelni kezelő elemekkel. Ez azt jelenti, tette szinte ugyanaz a dolog, ami ma már gyakran használják a jQuery. Az ötlet nagyon érdekes volt és kényelmes. Annak ellenére azonban, a szépség, ez a könyvtár általában nem alkalmas. A fő probléma az volt, mint mindig, egy népszerű kedvenc böngésző: ha minden oldal betöltési néhány másodpercig, majdnem lógott számítógépet. A gonoszság gyökere maradt keresési elemek.
Ez a lehetőség - a globális rakodók. Hadd emlékeztessem önöket, hogy a legtöbb esemény a „durran” a fát dom, hogy a gyökér elem. Ott volt, hogy ki lehet mutatni, és dolgozott fel az céltulajdonsággal srcElement eseményeket és azonosítani az esemény forrásának.
Milyen előnyöket biztosít számunkra ez a megközelítés? Először is, megszabadulni a szükségességét, hogy keressük meg a tételek tulajdonítanak nekik az esemény rakodók, mert a dokumentum mi mindig kéznél a globális objektumot. Emellett kezelni csak egyetlen elem, hanem több tucat. További plusz, ami ritka, de nagyon szép nyilvánul meg - az automatikus feldolgozására még dinamikusan létrehozott elemekkel. Képzeljük el, mi lett volna számára, hogy az e megközelítés alkalmazásának: Mindegyik módszer létrehoz egy elemet, azt kellett volna processzorok is függött ez az elem vagy a bonyolult építészeti döntések. Abban az esetben, globális felvezető minden úgy történik, automatikusan elkészül.
Igen, a hátrányai a megközelítés az, hogy minden felhasználó művelet végrehajtása több művelet. Más szóval, a CPU terhelés átkerül az oldal inicializálás kattintás és az egér mozgását. A projekt, ez nem lehet a megfelelő döntést, de úgy vélem, hogy ez a legjobb a legtöbb esetben.
Ha ilyen taktika, keresünk, hogy az oldal betöltésekor történik valójában minimális intézkedések: a dokumentum lógott több kezelő, és az összes.
Elméletileg ez lehetséges javítani behavior.js vagy jQuery úgy, hogy használja a nevét a globális rakodók, de eddig én nem tudok ilyen projektek.
A beszélgetés az inicializálási lehet kitölteni, és megy a reakció sebességét az oldal elemek. A leggyakoribb események feldolgozása - ez lebeg, és kattintson. Kezdjük a kattintás.
Van egy nagyon egyszerű módja, hogy gyorsítsák fel a reakció, hogy a kattintás 100-200 milliszekundum. Ez ahhoz, hogy használni, hanem a rendezvény kattintson mousedown esemény. De, mint mindig, a vásárlás ideje, elveszítjük valami mást. Ebben az esetben, ha azt áldozzuk a lehetőséget a haladó felhasználók számára, hogy módosítsa a határozat megnyomása után - abban az esetben, klikk tudták venni az egeret az oldalon. Azt eldönteni, hogy készen áll erre, hogy a kedvéért a sebesség.
Képzeld el, hogy az oldalon függőleges legördülő menüből épül css-lebeg, és éppen töltik át az egérrel, a vezetés, hogy a „vissza” gombot. Minden menüpontok aktiválódnak felváltva, és a különböző al-menü nagyon észrevehető vibrálás az oldalon. Ez zavaró, és ez rossz. A másik hátránya is illusztrálja a legördülő menüből. Ez abból adódik, hogy az emberi cselekvés pontossága nem magas. És, hogy a technológia kell megoldani ezt a problémát.
Tehát itt van egy primitív példa a menüben. Azt akarom, hogy újra megnyitja az újonnan létrehozott dokumentumot. Miután végeztem az egeret a „nemrégiben” almenüben, és látta, hogy a legtermészetesebb mozgása, hogy vezesse az egeret közvetlenül a cél. Természetesen a legegyszerűbb kivitelezés, azt nem, amint a kurzor a tétel „Exit” almenü eltűnik. „Helyes” megközelítés ebben az esetben -, hogy tartsa az egeret vízszintesen almenü, majd mozgassa meg. Mivel a szélessége a főmenü nagy lehet, és a magassága egy kis vonal, ez nem egyszerű feladat.
I meghatározott dom-objektumok delayedHover () módszer. Belül magát, amely egy általánosabb módszer getDelayedHandlers () függvényt. Azt is meghatározták. Nézzük először egy egyszerűbb delayedHover (). Ő három paramétert: a tényleges dom objektum kezelő funkció és beállítási késés. Belül ez tényleg csak néhány sort: hívjuk getDelayedHandlers () függvény a felvezető és rendelje hozzá származó módszerek dom-objektum egérráhelyezéskor / elmozdítja azt. Ezek a módszerek a blokkoló működését egymással. Például, ha rögtön a mouseout egérráhelyezés történik, a mouseover felvezető nem kerül végrehajtásra. És fordítva.
Vizsgálni, hogyan lehet elérni ezt a viselkedést. getDelayedHandlers () metódus kijelenti két szimmetrikus függvények. Ezeknek az első visszaállítja a timeout másik, majd létrehoz egy timeout. Timeout fő funkciója az úgynevezett akár igaz, vagy hamis.
És most - a példa a „lassú lebeg». Meg kell mutatnunk, egy csipetnyi néhány elem. Mi határozza meg, hogy a funkció függ egy paraméter megjeleníti vagy elrejti a célzást. Miután ezt a felhívást a gomb delayedHover módszer. és adja neki a függvény paraméterek és vremenny.e beállításokat. Most tooltip jelenik meg a késedelem 200 ms, és menj a késedelem 100 ms.