Vyjádření IT

Optimalizujte obrázky

Optimalizace jednoduše znamená zachování velikosti obrázku Small zachování kvality obrazu na požadované úrovni. Existuje spousta postupů, které jednou mohou vykonávat pro optimalizaci snímků, než jsou naloženy na serveru pro doručení. Nástroje, které používáme pro tvorbu těchto obrazů (Photoshop, Fireworks, atd.) obvykle mají nástroje, které umožňují uživatelům optimalizovat obraz pro webové použití.
• Zkontrolujte, GIF, zda se pomocí palety velikosti odpovídající počtu barev v obraze. Když obraz je pomocí 4 barev a 256 barevnou paletu, pak obrázek by mohl být dále optimalizovaná

• Převod GIF je tam, kde je to možné PNG a zjistit, jestli tam je úspora. Více často než ne, tam je. Neváhejte a používání PNG, protože jsou plně podporuje většinu běžně používaných prohlížečů. Očekávejte z animačních schopností PNG mohou dělat, co dělá GIF, včetně průhlednosti.

• U obrázků používaných v CSS skřítků, uspořádat obrázky v skřítka vodorovně, na rozdíl od vertikálně obvykle vyústí v menší velikosti souboru. Také kombinovat snímky s podobnými barvami v sprite. To vám pomůže udržet barva počet nízký, v ideálním případě za 256 barev tak, aby se vešly do PNG8.

• Pokud používáte favicon.ico, aby to malé, nejlépe pod 1K.

Používejte správně zmenšen / změní velikost obrazu.

Vždy vyzkoušet a používat zmenšeniny obrázků, tj. nepoužívejte větší obrázek než potřebujete jen proto, že si můžete nastavit šířku a výšku v HTML. Pokud potřebujete zobrazit 100px X 100px obrázek na stránce, pak nepoužívejte zmenšenou 200x200px obrazu.

Použití progresivní obrázky

Webový prohlížeč již vykresluje obrázky postupně. Chcete-li ještě lépe, jednoduše uložit GIF nebo PNG obrázky s "prokládaný" možnost volby, nebo vaše obrázky ve formátu JPEG s "progresivní" možnost volby.

Tam je pokračující debata mezi webovými uživateli, zda použití progresivního obrazu je požehnání nebo překážkou. Také progresivní obraz váží přibližně o 20% více než jeho protějšek non progresivní. Takže, Pokud si myslíte, že rozložení používá obrázky, které nebudou brzdí uživatelská zkušenost tím, že jsou progresivní, neváhejte tak učinit.

Zahrnovat JavaScript je ve spodní části dokumentu HTML

Pokud nemáte document.write (nebo dynamické generování obsahu stránky pomocí Java Scripts) vložit část stránky obsahu ve svých skriptech, přesuňte skript obsahovat prohlášení v dolní části stránky, před koncem značky BODY.
HTTP/1.1 specifikace vyplývá, že prohlížeče stáhnout více než dva komponenty paralelně za hostname. Máte-li sloužit své snímky z různých hostitelů, můžete získat více než dva stažení nastat současně. Zatímco skript je stahování, však prohlížeč nelze spustit žádné další stahování, a to i na různých hostitelů.
Tam jsou také způsoby, jak dynamicky se Vytvořit skript uzly a načítat vzdálené skripty po načtení stránky pomocí AJAX.

Externalizovat vám JavaScript je

Použití externích souborů JavaScript bude mít za následek rychlejší načítání stránek, protože JavaScript soubory mezipaměti prohlížeče. Inline JavaScript je "v dokumentech HTML si stáhnout každém HTML dokumentu je požadováno. To by ve skutečnosti mohly snížit počet HTTP požadavků vyrobených ale následně se zvětší velikost dokumentu HTML. Externí JavaScript je být mezipaměti prohlížeče, velikost dokumentu HTML je snížena bez zvýšení počtu HTTP požadavků.
Vezměte prosím na vědomí, že pokud uživatelé na svých stránkách mají více zobrazení stránky na zasedání a mnoho z vašich stránek znovu použít stejné skripty a styly, tam je větší potenciální přínos z externích souborů uložených v mezipaměti.

Sbalte si souborů JavaScript

V případě JavaScripty, na rozdíl od CSS, může soubory drcené pomocí některé standardní algoritmy, které by daly sníženou velikost souboru než pouhé odstranění mezery nebo tabulátory. Příkladem javascript balírny naleznete zde http://dean.edwards.name/packer/

Zbavte se duplicitní skriptů

Je velmi neobvyklé, že celé skripty mohou být duplikovány, ale přehled deseti nejlepších amerických internetových stránek ukazuje, že dva z nich obsahují duplicitní skript. Duplicitní skripty ale samozřejmě snižuje výkon o vytváření zbytečných HTTP požadavky a zbytečně spouštění JavaScriptu.
Také v mnoha případech, i když dávkové názvy jsou různé, existuje pravděpodobnost duplicitních skriptů v rámci stejné stránce kvůli týmové velikosti a počtu skriptů.

Minimalizovat přístup DOM prvky kde je to možné

Přístup k DOM elementy pomocí JavaScriptu je pomalu tak, aby měla více citlivější stránku, měli byste:
• Cache odkazy na prvky přístupné
• Update uzly "offline" a pak je přidejte do stromu
• Vyhněte se kterým se rozložení pomocí JavaScriptu

Samostatné chování od obsahu a prezentace

Stejně jako jsme samostatné prezentace (CSS / XSLT) od obsahu (XHTML / XML), měli bychom také oddělit chování (JavaScript). To se nazývá nenápadný Javascript. Stejně jako jsme odkaz na externích CSS souborů, měli bychom se odkaz na externích souborů JavaScript.

Místo tvrdého kódování chování do obsahu (např. onmouseover, onclick, atd.), by chování může být dynamicky přidávány do prvky, tříd a unikátních prvků (IDS), pomocí DOM. Základní dokument, jehož obsah by měl obsahovat pouze platný XHTML / XML a žádnou javascript.
Javascript musí rozšířit přidáním obsahu chování. Obsah by měl i nadále užitečné a použitelné bez JavaScriptu (nebo bez plnou podporou JavaScriptu).

Zachránil jsem tento článek věky zpátky, tak líto! I dont vzpomenout na zdroj ... ale zdálo užitečné pro nás, kteří si musí být vědomi o publiku, pro které vyvíjíme místo pro ... tak tady i je

Stránka hmotnosti může být použit k určení čas stahování pro danou stránku na různých rychlostech připojení k Internetu. Jako příklad, následující tabulce jsou uvedeny časy stahování pro tři různé stránky na několika populárních rychlosti připojení.

Výhody snížení hmotnosti stránku?

Pozitivní vliv na snížení hmotnosti výhody, page jak majitelům webových stránek a spotřebitele. Potenciální výhody patří:

1. Načítání stránek rychlejší. Nejviditelnější dopady snižování hmotnosti je, že stránky vašich webových stránek stránky budou načítat rychleji pro návštěvníky, bez ohledu na jejich rychlosti připojení.
2. Nižší nahrávání stránek vytvořit pohodlnější návštěvníků. Návštěvníci jsou méně pravděpodobné, že se frustrovaný a jít jinam, pokud vaše stránky se rychle stahují. Na druhé straně, pomalé načítání stránek je jednou z nejjistějších způsobů, jak ztratit návštěvníky a potenciální zákazníky.
3. Rychlejší zatížení-krát přispěje ke zvýšení konverze. Další návštěvníci zůstat na vaše stránky déle. Více z nich skončí nákupy, přihlášení se k odběru zpravodaje, nebo kniha značení na vaše stránky.
4. Vaše vnímání značky bude posílena. Vracející se zákazníci a návštěvníci poprvé, stejně budou mít větší motivaci k popisu své stránky (a obchod) jako "profesionální", pokud vaše stránky se rychle stahují.
5. Stránky s čistým, pevným kódem bude často být indexovány efektivněji přírodní vyhledávačů.
6. Stránky jsou optimalizovány pro váha může skutečně ušetřit na šířku pásma poplatky za vysokým provozem stránek. 100.000 stran každý o hmotnosti 150 Kb bude vyžadovat dvojnásobek šířky pásma od vašeho ISP než 100.000 stránek každé váhové 75 Kb. Pro ISP, které účtují na šířku pásma používané nebo nadsazení, může toto snížení mělo významné úspory šířky pásma poplatků.

Zvažte následující údaje zveřejněné ve zprávě

Pokud XML / XSL transformace je váš domian, pak tam jsou časy, kdy chceme peice Dynamic Kód pro knihovny položky (které mají být provedeny opakovaně použitelné). Co mám na mysli, by pravděpodobně být jasněji v tomto příkladu scénáře.

Představte si, že vytvoření webové stránky (a pomocí XML, XSL transfroms Samozřejmě) a většina stránek by měl Komentáře modul. No! pak buď kopírování nebo vložte tento kód do každé šablony stránky (což Nemám říct, ale aby údržby a oprav noční můra), nebo ještě lépe, můžete vytvořit INCLUDE soubor, který by mohl být vtažena, kde někdy budete chtít do stránky ( y) ...
Tak jak se Vytváříme XSL INCLUDE soubor a zahrnout jej do jiného souboru XSL? Zde je, jak ...

Stačí, aby se věci jasné ... tady je stručný přehled souborů, které si vytvoří ... tady budeme, včetně informací o ovoce a zeleninu do mateřské stránky s názvem jídlo.

1. food.xml - xml soubor dat, na kterých bude aplikovat transformace
2. food.xsl - hlavní XSL soubor, který změní naše food.xml
3. inc_fruits.xsl - XSL patří soubor, který bude skýtat ovoce dat
4. inc_vegtables.xsl - XSL patří soubor, který bude skýtat vetetables dat

I dont myslím, že mám značné míry vysvětlují, kódy pro výše uvedených skutečností bude vysvětlovat ...

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>

Stáhnout všechny výše uvedené soubory zde v 253 stažení)