IT kifejezése

Optimalizálja Images

Optimalizálás egyszerűen azt jelenti, tartva a kép méretét kis tartva a kép minősége a kívánt szintre. Rengeteg eljárások után lehet elvégezni az optimális kép betöltés előtt a kiszolgálóra a szállítás. Az eszközöket használunk az alkotás e képek (Photoshop, Fireworks stb) általában olyan eszközök, amelyek lehetővé teszik a felhasználók számára, hogy optimalizálja a képet a webes felhasználásra.
• Ellenőrizze a GIF, hátha ezek segítségével a paletta mérete megfelelő a színek számát a képen. Ha egy kép, de 4 színben, és egy 256 színű paletta, akkor a kép még tovább optimalizált

• Convert GIF PNG ott lehetséges, és nézd meg, van egy megtakarítás. Gyakrabban mint nem, nincs. Ne habozzon használni a PNG-k, mivel azok teljes mértékben támogatja a legtöbb általánosan használt böngészők. Várják az animációs képességeket PNG tehet, amit csinál a GIF, beleértve az átláthatóságot.

• A felhasznált képek a CSS sprite, gondoskodjon a képeket a sprite vízszintesen, függőlegesen, hanem általában a kisebb fájlméret. Emellett össze képeket hasonló színeket egy sprite. Ez segít megőrizni a színek száma alacsony, ideális esetben 256 szín alatt annyira, hogy beleférjen egy PNG8.

• Ha ön használ egy favicon.ico, tartsa kicsi, lehetőleg 1K alatt.

Használjunk jól skálázható / átméretezett kép.

Mindig megpróbálja használni átméretezett képek, azaz nem használ fel egy nagyobb képet, mint amennyire szüksége csak azért, mert akkor meg a szélességet és magasságot a HTML-ben. Ha kell megjeleníteni 100px X 100px képet az oldalon, akkor ne használjon kicsinyítve 200x200px képet.

Használja a progresszív képek

A webböngésző már fokozatosan teszi képek. Ehhez még jobb, egyszerűen mentse el a GIF vagy PNG képek az "átlapolt" opciót, vagy a JPEG képeket a "progresszív" opciót.

Jelenleg folyamatban van a webes felhasználók körében vita arról, hogy alkalmazása a progresszív kép áldás vagy akadály. Szintén a progresszív képet tömege körülbelül 20%-kal több, mint a nem progresszív megfelelője. Szóval, ha úgy gondolja, hogy a képek elrendezését használ, nem akadályozza a felhasználói élmény, hogy az általa progresszív, nyugodtan erre.

Tartalmazza JavaScript alján a HTML-dokumentum

Ha nincs document.write (vagy bármilyen dinamikus generációs oldal tartalmát a JavaScript), hogy be része az oldal tartalmát, a szkriptek, mozgassa a szkript include utasítást a lap aljára, mielőtt vége a body tag.
A HTTP/1.1 specifikáció azt sugallja, hogy letölthető böngésző nem több, mint két komponens párhuzamosan egy hostname. Ha kiszolgálni a képeket a többszörös kiszolgáló nevek, akkor még több mint 2 letöltés fordulnak elő párhuzamosan. Míg egy szkript letöltése, azonban a böngésző nem indul el semmilyen más letöltések, sőt a különböző nevekre.
Vannak módon dinamikusan létrehozni SCRIPT csomópontok és töltse távoli szkriptek után az oldal betöltésekor AJAX.

Ön JavaScript kihelyezni

A külső JavaScript fájlokat eredményez gyorsabb betöltése oldalakat, mert a JavaScript gyorsítótárazva van a böngésző. Inline JavaScript "a HTML dokumentumokban kap minden egyes alkalommal letöltődnek a HTML dokumentumban kérik. Ez talán valóban számának csökkentése HTTP kérések, de ezt követően növeli a méretét a HTML dokumentumba. Külső JavaScript-k gyorsítótárba a böngésző, a méret a HTML dokumentum csökken anélkül, hogy növelné a HTTP kérések számát.
Felhívjuk figyelmét, hogy ha a felhasználók a honlapján több oldalletöltést per session és sok a lapok újra ugyanazt a szkriptek és stíluslapok, van egy nagyobb valószínűséggel részesül a külső fájlok cache-elt.

Csomagolja a JavaScript fájlok

Abban az esetben, JavaScript, CSS ellentétben, a fájlokat is csikorgott segítségével néhány szabványos algoritmusok adna csökkentett fájl lesz, mint egyszerű eltávolítását szóközöket vagy tabulátorokat. Egy példa a javascript csomagoló itt található http://dean.edwards.name/packer/

Megszabadulni minden Duplicate Scripts

Nagyon szokatlan, hogy az egész szkriptet lehet sokszorosítani, de felülvizsgálja a 10 vezető amerikai internetes oldalak azt mutatják, hogy ők ketten tartalmaz duplikált forgatókönyvet. Ismétlődő scriptek de nyilvánvalóan csökkenti a teljesítményt, hogy felesleges HTTP kérések és az elpazarolt JavaScript végrehajtása.
Emellett sok esetben, bár a nevek különböző szkriptek, fennáll a veszélye a kettős szkriptek ugyanazon az oldalon miatt csapat mérete és száma a szkripteket.

Kis méret elérése DOM elemeit, ha lehetséges

Elérése DOM elemek JavaScript lassú ezért annak érdekében, hogy egy rugalmasabb oldalon, a következőket kell tennie:
• Cache hivatkozások elérhető elemek
• Frissítés csomópontok "offline", majd add hozzá a fa
• Kerülje a JavaScript elrendezés rögzítése

Külön viselkedésében tartalma és bemutatása

Ahogy azt külön bemutató (CSS / XSLT) a tartalom (XHTML / XML), azt is meg kellene szétválasztani Behavior (Javascript). Ez az úgynevezett diszkrét Javascript. Ahogy azt összekapcsolni a külső CSS fájlokat, akkor össze kell kapcsolnia a külső javascript fájlokat.

Ahelyett, hogy kemény kódolás viselkedése a tartalom (pl. onmouseover, onclick, stb), viselkedés dinamikusan kell hozzá elem, osztályok és egyedi elemek (ID) segítségével a DOM. A megalapozó dokumentum tartalmát, csak akkor kell tartalmaznia, XHTML / XML és JavaScript nélkül.
Javascript kellene növelni tartalmak hozzáadásával viselkedését. A tartalom továbbra is hasznos és használható javascript nélkül (vagy nem teljes javascript támogatás).

Már mentette ezt a cikket korok vissza, annyira sajnálom! Én nem emlékszem a forrást ... de úgy tűnt, hasznos, akik tudatában kell lennie annak a közönség számára, akiket az oldal fejlesztése a ... ezért itt i

Az oldal súlyt lehet használni, hogy meghatározza a letöltési idő egy adott oldal a különböző internetes kapcsolat sebességét. Példaként, a következő táblázat mutatja a letöltés idejét három különböző oldalt is számos népszerű kapcsolat sebességét.

Csökkentéséből származó előnyöknek oldalon tömeg?

A pozitív hatás csökkentésének oldal súlyát egyaránt előnyökkel weboldal tulajdonosok és a fogyasztók számára. A lehetséges előnyök:

1. Oldalak gyorsabban töltődnek be. A legnyilvánvalóbb hatása csökkentésének oldal súlya, hogy a honlap oldalain gyorsabban betöltődnek, a látogatók számára, tekintet nélkül a kapcsolat sebességét.
2. Alsó oldal betöltési idő hozzon létre kényelmesebb látogatókat. Látogatók kevésbé valószínű, hogy lesz frusztrált és menjen máshova, ha oldala gyorsan betölteni. Másrészt, lassú betöltése oldalt az egyik legbiztosabb módja, hogy elveszti a látogatók és a potenciális ügyfelek.
3. Gyorsabb terhelés-szor hozzá fog járulni a nagyobb átalakítás. Még több látogató marad a webhelyén hosszabb. Több közülük végül a vásárlást, ha feliratkozik a hírlevélre, vagy könyv-jelölés a webhelyen.
4. A márka megítélése javul. Visszatérő ügyfelek és az első alkalommal odalátogatók számára egyaránt hajlamosabbak, hogy leírja a helyre (és üzleti), mint "szakmai", ha az oldalak betöltése gyorsan.
5. Oldalak tiszta, szilárd kódot gyakran indexálják hatékonyabban természetes keresőmotorok.
6. Oldalak optimalizált súlya valóban a sávszélesség megtakarítása díjakat a nagy forgalmú oldalak. 100.000 oldal, egyenként 150 KB lesz szükség kétszer akkora sávszélességet az ISP-től, mint 100.000 oldalas súlya 75 Kb. Az internetszolgáltatók a díjat a használt sávszélességet, illetve előforduló többletmennyiségeket, ez a csökkenés jelentős megtakarítást hozhat létre a sávszélesség költségeket.

Nézzük a következő adatokat közzétenni egy jelentést

Ha az XML / XSL transzformáció van a domian, akkor vannak helyzetek, amikor akarunk peice Dinamikus kódot kell használni könyvtári tételt (kell tenni újra felhasználható). Arra gondolok, talán lehetne tenni ezzel a példa világosan forgatókönyv.

Képzeld el, weboldal készítés (és XML, XSL transfroms persze), és a legtöbb az oldalak lenne Comments modul. Nos! akkor vagy másolt, vagy be ezt a kódot minden oldal sablont (amit én nem is mondom, de a karbantartást és javítást egy rémálom), vagy még jobb, ha egy include fájlt hoz létre, amely lehet húzni a ha valaha is szeretne azt az oldalt ( s) ...
Szóval hogyan hozunk létre egy XSL include file tartalmazza, és ez belülről egy másik XSL fájlt? Íme, hogyan ...

Csak azért, hogy minden egyértelmű ... itt a gyors fájlok listáját hozhatja létre ... Itt, mi lesz információ, beleértve gyümölcsök és zöldségek egy szülőoldal nevű ételt.

1. food.xml - xml fájl adatok, amelyek az átalakulás alkalmazni fogják
2. food.xsl - fő XSL fájl, amelyek át fogják alakítani a food.xml
3. inc_fruits.xsl - XSL fájl tartalmazza, hogy lehetővé teszi majd, gyümölcsök adatok
4. inc_vegtables.xsl - XSL fájl tartalmazza, hogy lehetővé teszi majd, vetetables adatok

Nem hiszem, nekem sokat magyarázni, kódok a fent említett elemeken lesz magától értetődő ...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ Body>
</ Html>
</ Xsl: template>
</ Xsl: stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Töltse le a fenti fájlt itt (253 letöltés)