Väljendades IT

Optimeeri pildid

Optimeerimine tähendab lihtsalt seda, hoides pildi väike hoida kvaliteeti pilt vajalikul tasemel. On koormatele kord, et kui saaks teostada optimeerida pilte enne nende laadimist serverisse kättetoimetamiseks. Vahendid, et me kasutame loomine need pildid (Photoshop, ilutulestik jne) on tavaliselt vahendid, mis võimaldavad kasutajatel optimeerida pildi veebi kasutamiseks.
• Kontrollige, GIF, kas nad kasutavad palett suurus vastab värvide arvu pildil. Kui pildi kasutab 4 värvi ja 256 värvipalett, siis pilt võiks veelgi optimeeritud

• Convert GIF on PNG-s, kus võimalik ja näha, kas on kokkuhoid. Sagedamini kui ei, ei. Ärge kartke kasutada PNG-d, kui need on täielikult toetab kõige levinumaid brausereid. Oodata animatsiooni võimalusi PNG võib teha, mida GIF ei, sealhulgas läbipaistvust.

• Kui pilte kasutada CSS sprites korraldada pildid sprite horisontaalselt, mitte vertikaalselt tulemus on tavaliselt väiksema faili suurus. Ka pildi-sarnaste värvide sprite. See aitab teil hoida värvi arv väike, ideaalis alla 256 värvi, nii et mahtuda PNG8.

• Kui kasutate favicon.ico, hoida seda väikest, soovitavalt alla 1K.

Kasutage korralikult vähendanud / muudetud suurusega pildi.

Üritage ja kasutada muudetud suurusega pilte, st ei kasuta suuremat pilti, kui te vajate lihtsalt sellepärast, et saab määrata laiuse ja kõrguse HTML. Kui teil on vaja näidata 100px X 100px pilti lehel, siis ärge kasutage vähendanud 200x200px pilt.

Kasuta Progressive Pildid

Veebibrauser juba muudab pildid järk-järgult. Teha veel parem, lihtsalt salvestada GIF või PNG pildid "põimitud" võimalus või teie JPEG pilte "progressiivne" variant.

Seal on pidev arutelu seas veebi kasutajatele, kas kasutada progressiivse pilt on õnnistus või takistus. Ka progressiivne pilti kaalub umbes 20% rohkem kui oma mitte progressiivne vastutasu. Niisiis, kui te arvate, kujundus kasutab pildid, mis ei takista kasutaja kogemus, et oleks progressiivne, võid vabalt teha.

Kaasa JavaScript oma allosas HTML Document

Kui sul ei ole document.write (või dünaamiline põlvkonna lehekülje sisu kasutamine javascripts) lisada osa lehe sisu oma skripte, liikuda script sisaldama avalduse lehe all, enne body.
HTTP/1.1 kirjeldus näitab, et brauserid laadida enam kui kaks komponenti paralleelselt kohta hostname. Kui te teenida oma pilte mitme nimesid, saad rohkem kui 2 downloads esineda paralleelselt. Kuigi script on allalaadimiseks siiski brauser ei käivitu tahes muid faile, isegi eri nimede.
On olemas ka võimalusi dünaamiliselt luua SCRIPT sõlmede ja koormus serveri skriptid pärast lehe laadimist AJAX.

Hajutavad sa JavaScript s

Väliseid JavaScript failid toob kaasa kiirema laadimise lehekülgi sest JavaScript failid on puhverdatud by brauseris. Inline JavaScript s "HTML dokumentide saad laadida iga kord HTML dokumenti taotletakse. See võib tegelikult vähendada HTTP taotlusi, kuid seejärel suurendab suurus HTML dokument. Väline JavaScript s on puhverdatud by brauser; suurus HTML dokument on vähendada ilma suurema hulga HTTP taotlusi.
Pange tähele, et kui kasutajad saidil on mitu kuvamiskorra per sessioon ja paljud lehed uuesti kasutada sama skriptid ja laaditabelite on suurem potentsiaalne kasu puhverdatud välistele failidele.

Paki oma Javascript Files

Juhul JavaScripts erinevalt CSS, failid võivad purustada kasutades mõned standard algoritme, mis annaks väiksema faili suurus kui lihtsalt eemaldada tühikuid või klapid. Näiteks javascript pakkija leiate siit http://dean.edwards.name/packer/

Vabaneda kõigist Duplicate Scripts

See on väga ebatavaline, et kogu skripte võib dubleerida, kuid vaadata 10 top USA veebilehti näitab, et kaks neist sisaldavad dubleeritud skripti. Eksemplaris skriptid kuid ilmselt vähendab jõudlust tarbetu HTTP päringuid ja raisatud JavaScript täitmist.
Ka paljudel juhtudel, kuigi skriptid nimed on erinevad, on tõenäoline eksemplaris skriptid sama lehe tõttu meeskonna suurus ja arv skripte.

Minimeeri tutvumise DOM elemente kui võimalik

Juurdepääs DOM elemente JavaScript on aeglane nii, et on paremini lehe, peaksite:
• Cache viited külastatud elemendid
• Uuenda sõlmed "offline" ja siis lisage need puud
• Väldi millega paigutuse JavaScript

Eraldi käitumise sisu ja esitusviisi

Nii nagu me eraldi esitamist (CSS / XSLT) alates Content (XHTML / XML), peaksime ka eraldi Behavior (JavaScript). Seda nimetatakse märkamatud Javascript. Nii nagu me linkida välise CSS faili, peaksime linkida välise javascript faili.

Selle asemel, et raske kodeerimine käitumine võetakse sisu (nt onmouseover, onclick jne), käitumine peaks olema dünaamiliselt lisada elemente, klassid ja unikaalseid elemente (IDS), kasutades DOM. Foundational dokumendi sisu, peaks olema ainus kehtiv XHTML / XML ja ei javascripti.
Javascript peab suurendama sisu, lisades käitumist. Sisu peaks jääma kasulik ja kasutatav ilma javascripti (või ilma täieliku javascript tugi).

Ma olen päästetud see artikkel aegade tagasi, nii kahju! Ma ei mäleta allikas ... aga tundus kasulik meile, kes peavad olema teadlik publik, kelle jaoks me arendame saidi ... Nii et siin ma ei

Page kaalu saab määrata allalaadimise aega antud lehe erinevaid internetiühenduse kiirust. Näiteks, Järgnev tabel näitab download korda kolm erinevat lehekülge mitmeid populaarseid ühenduse kiiruse poolest.

Kasu vähendada lehekülje kaalu?

Positiivset mõju, vähendades lehe kaal on kasulik nii veebisaitide omanikud ja tarbijad. Potentsiaalne kasu on järgmised:

1. Pages koormuse kiiremini. Kõige ilmsem mõju vähendamiseks lehe kaal on, et veebisaidi lehtedele laeb kiiremini külastajad, sõltumata nende ühenduse kiirusest.
2. Alumine lehe laadimise aega luua mugavama külastajaid. Külastajad on vähem tõenäoline saada pettunud ja minna mujale kui lehed laadida kiiresti. Teiselt poolt, aeglase laadimise leheküljed on üks kindlamaid viise kaotada külastajate ja potentsiaalsetele klientidele.
3. Kiiremini koormust korda aitab suurendada vahetamisega. Rohkem külastajaid jääb saidil kauem. Mitmega neist lõpuks ostude, sisselogimisel oma uudiskirja, või raamatu-märgistus saidile.
4. Oma brändi taju tugevneb. Tagasi klientidele ja esmakordselt külastajate jaoks on rohkem valmis, et kirjeldada oma koha (ja äri) kui "spetsialist" kui lehed laadida kiiresti.
5. Leheküljed, mis puhas, kindel kood on sageli indekseeritud tõhusamalt loomulik otsingumootorid.
6. Pages optimeeritud kaaluga saab tegelikult säästa ribalaius kulud suure liiklusega kohtades. 100.000 lehekülge massiga 150 Kb nõuab kaks korda nii palju ribalaiust ISP kui 100.000 lehekülge iga kehakaalu 75 Kb. Sest ISP et tasu ribalaiust kasutatakse või Üledoosid see vähendamine võib tekitada olulist kokkuhoidu kulusid.

Kaaluda järgmisi andmeid, mis on avaldatud aruande

Kui XML / XSL Muudab su Domian, siis on aegu, kui tahame tükk Dynamic koodi kasutada raamatukogu objekt (tuleb teha korduvkasutatavad). Mida ma mõtlen, ilmselt võiks teha selgemaks selle näiteks stsenaariumi.

Kujutage ette, olete loomas kodulehel (ja kasutades XML, XSL transfroms ofcourse) ja enamik lehti oleks Kommentaarid moodul. Hästi! siis kas sa kuuled või kleebi see kood iga lehekülje malli (mis ma dont on öelda, kuid teeb hoolduse ja ümbertegemine õudusunenägu) või veel parem, loote sisaldab faili, mida saaks tõmmatakse kus iganes sa tahad seda oma lehe ( s) ...
Nii Kuidas me loome XSL sisaldab faili ja lisada selle sees teise XSL faili? Siin on, kuidas ...

Just selleks, et asjad selgeks ... siin on kiire failide nimekirja, et teil oleks luua ... siin me ka infot puuviljade ja köögiviljade vanem leht nimega toitu.

1. food.xml - XML ​​fail mis ümberkujundamine hakatakse kohaldama
2. food.xsl - peamised XSL faili, mis muudab meie food.xml
3. inc_fruits.xsl - XSL sisaldab faili, mis muudab puu andmed
4. inc_vegtables.xsl - XSL sisaldab faili, mis muudab vetetables andmed

Ma ei usu mul selgitada palju, koodid nimetatud elementidest, on mõistetav ...

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: stiil>

<?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>

Lae kõigi eespool failid siin (252 downloads)