Izsakot IT

Optimizēt attēlus

Optimizācija vienkārši nozīmē pildīt lielumu attēla mazā turot kvalitātes attēlu līdz nepieciešamajam līmenim. Ir slodzes procedūru, kas reiz var veikt, lai optimizētu attēlus, pirms tie tiek ielādēti serverī piegādes. Līdzekļi, ko mēs izmantojam, lai izveidotu šo attēlu (Photoshop, uguņošana uc) parasti ir instrumenti, kas ļauj lietotājiem, lai optimizētu attēlu tīmekļa lietošanai.
• Pārbaudiet GIF 's redzēt, ja tie izmanto paletes izmērs atbilst krāsu skaits attēla. Ja attēls ir izmantojot 4 krāsu un 256 krāsu paleti, tad attēls varētu būt vēl vairāk optimizēta

• Konvertēt GIF ir PNG s, kur iespējams, un redzēt, ja ir ietaupījums. Biežāk nekā nav, tur ir. Nevilcinieties izmantot PNG 's, jo viņi pilnībā atbalsta lielākā daļa populārās pārlūkprogrammās. Gaidīt no animācijas iespējas PNG var darīt to, ko GIF dara, tostarp pārredzamību.

• Attiecībā uz attēliem izmanto CSS sprites, sakārtot attēlus Sprite horizontāli, nevis vertikāli parasti rada mazāku faila izmēru. Arī kombinēt attēlus ar līdzīgām krāsām kādā Sprite. Tas palīdz jums saglabāt krāsu skaits mazs, ideālā saskaņā 256 krāsās tā, lai ietilptu PNG8 a.

• Ja jūs izmantojat favicon.ico, glabā to mazo, vēlams zem 1K.

Izmantot pareizi mērogots / mainīti attēlu.

Vienmēr izmēģināt un lietot mainīti attēlus, ti, neizmantojiet lielāku attēlu, nekā jums nepieciešams tikai tāpēc, ka jūs varat noteikt platumu un augstumu HTML. Ja Jums ir nepieciešams, lai parādītu 100px X 100px attēlu lapā, tad nelietojiet kristies 200x200px attēls.

Izmantot Progressive attēlus

Web pārlūkprogramma jau apmetumu attēlus pakāpeniski. Darīt vēl labāk, vienkārši saglabājiet GIF vai PNG attēlus ar "interlaced" variantu, vai jūsu JPEG attēliem ar "progresīva" variantu.

Ir notiekošās debates starp interneta lietotājiem par to, vai izmantošana no pakāpeniskas attēlam ir svētība vai šķērslis. Arī progresīva attēla sver aptuveni 20% vairāk nekā tā nav progresējošu kolēģim. Tātad, ja jūs domājat jūs izkārtojums izmanto attēlus, kas netraucē lietotāja pieredzi, jo ir progresīva, justies brīvi to darīt.

Iekļaut JavaScript 's apakšā HTML dokuments

Ja jums nav document.write (vai jebkura dinamiska ģenerēšana lapas saturu, izmantojot Javascripts), lai ievietotu daļu no lapas satura jūsu skriptu, pārvietot skriptu ietver paziņojumu par to apakšā lapu, pirms tās beigām, BODY tagu.
HTTP/1.1 specifikācija liecina, ka pārlūki lejupielādēt ne vairāk kā divas sastāvdaļas paralēli vienu resursdatora. Ja tu kalposi attēlus no vairākām hostnames, jūs varat saņemt vairāk nekā divas lejupielādes notikt paralēli. Kamēr skripts tiek ielādēta, tomēr pārlūkprogramma nesāks nekādus citus lejupielādes, pat dažādās hostnames.
Ir arī veidi, kā dinamiski izveidot skriptu mezglus un ielādēt attālo skriptus pēc lapas ielādes, izmantojot AJAX.

Ārējos Jums JavaScript 's

Izmantojot ārējos JavaScript failus radīs ātrāku iekraušana lapas, jo JavaScript faili ir kešatmiņā ar pārlūku. Inline JavaScript s "HTML dokumentos saņemt lejupielādēt katru reizi HTML dokuments tiek pieprasīta. Tas tiešām var samazināt skaitu HTTP saņemto pieprasījumu, bet pēc tam palielina lielumu HTML dokumentā. Ārējā JavaScript s ir kešatmiņā ar pārlūku, no HTML dokumenta izmēri ir samazināti nepalielinot strādājošo skaitu HTTP pieprasījumiem.
Lūdzu, ņemiet vērā, ka, ja lietotāji jūsu vietnē ir vairākas lapas apskatus vienā sesijā, un daudzi no jūsu lapas atkārtoti izmantot tos pašus skriptus un stilu, ir lielāks potenciāls gūt labumu no kešotiem ārējiem failiem.

Pack jūsu JavaScript faili

Gadījumā Javascripts, atšķirībā CSS, faili var čaukstēja izmantojot dažus standarta algoritmus, kas dotu samazinātu faila izmēru, nekā vienkārši novēršot telpas vai cilnes. Gada javascript fasētāja piemēru var atrast šeit http://dean.edwards.name/packer/

Atbrīvoties no dublikāta Scripts

Tas ir ļoti neparasti, ka viss skripti var pavairot, bet par desmit top ASV tīmekļa vietnēs Pārskats liecina, ka divi no tiem satur dublēt skriptu. Dublēt skriptus bet acīmredzot samazina veiktspēju, radot nevajadzīgu HTTP pieprasījumiem un izšķērdēta JavaScript izpildīšanu.
Arī, daudzos gadījumos, lai gan skripti nosaukumi ir atšķirīgi, pastāv iespēja, ka dublikātu skripti vienā lapā, jo komandas lielumam un skaitam skriptus.

Samazinātu piekļuvei DOM elementu, ja iespējams

Piekļūšana DOM elementus ar JavaScript ir lēni tāpēc, lai būtu daudz atsaucīgu lapu, jums:
• kešatmiņa atsauces uz piekļūt elementiem
• Atjaunināt mezgli "bezsaistē", un tad pievienot tos uz koku
• Izvairieties nosaka izkārtojumu ar JavaScript

Atsevišķa uzvedība no satura un sniegšanas

Tāpat kā mēs atsevišķa prezentācija (CSS / XSLT) no satura (XHTML / XML), mums būtu arī nodalīt uzvedību (javascript). To sauc neuzbāzīga Javascript. Tāpat kā mēs saite uz ārējo CSS failu, mums vajadzētu saistīt ar ārējiem javascript failu.

Nevis cietā kodēšanas uzvedības stāšanās saturu (piemēram onMouseOver, onclick, uc), izturēšanās būtu dinamiski pievienot elementus, klasēm un unikālas elementiem (ID), izmantojot DOM. Fundamentālās dokuments, saturs, jābūt tikai derīgai XHTML / XML un bez JavaScript.
Javascript vajadzētu palielināt saturu, pievienojot uzvedību. Saturs būtu jāpaliek noderīga un izmantojama bez javascript (vai bez pilnīgas JavaScript atbalsts).

Esmu saglabājis šo rakstu vecumu atpakaļ, tāpēc Atvainojiet! I dont atceros avots ... bet tas likās noderīgi, lai mums, kas ir jāzina par publiku, kam mēs izstrādātu vietni ... tāpēc šeit es ir

Lpp svars var izmantot, lai noteiktu lejupielādes laiku attiecīgajā lapā uz dažādiem interneta pieslēguma ātrumu. Kā piemēru, tabulā norādīti lejupielādes laiku par trīs dažādām lapām vairākās populārās pieslēguma ātrumu.

Priekšrocības, kā samazināt lapas svaru?

Pozitīvā ietekme samazināt lappušu svaru iegūst gan mājas īpašniekiem un patērētājiem. Potenciālie ieguvumi ietver:

1. Lapas slodze ātrāk. Pašsaprotama ietekme samazināt lapas svars ir tas, ka jūsu vietnes lapas slodze ātrāk apmeklētājiem, neatkarīgi no to pieslēguma ātruma.
2. Zemākas lapas ielādes laiku izveidotu ērtāku apmeklētāju. Apmeklētāji ir mazāka iespēja kļūt neapmierinātas un iet citur, ja Jūsu lapas slodze ātri. No otras puses, lēni iekraušana lapas ir viens no visdrošākais iespējas zaudēt apmeklētājus un potenciālos klientus.
3. Ātrāk slodze nepieciešamo laiku veicinās lielāku konversiju. Vairāk apmeklētājiem paliks jūsu vietnē ilgāk. Vairāk no viņiem galu galā padarot pirkumus, pierakstīšanos jūsu biļetenu vai grāmatu marķēšana jūsu vietni.
4. Jūsu zīmols uztvere tiks uzlabota. Atgriežas klienti un pirmo reizi apmeklētājiem gan būs vairāk tieksies, lai aprakstītu jūsu vietnē un bizness) kā "profesionāls", ja jūsu lapas slodzi ātrāk.
5. Lapas ar tīru, cieto koda bieži tiek indeksētas efektīvāk dabas meklētājprogrammas.
6. Lapas optimizētas svars var reāli ietaupīt joslas apsūdzības par augsta satiksmes vietās. 100000 lapas katrs sver 150 Kb prasīs divreiz tik daudz joslas platumu no jūsu ISP nekā 100,000 lapām katru svara 75 Kb. Interneta pakalpojumu sniedzējiem, kas maksas par joslas platuma izmantošanu vai virsnormu, šis samazinājums var radīt ievērojamus ietaupījumus uz joslas maksas.

Apsveriet šādus datus, kas publicēti ziņojumā

Ja XML / XSL Transforms ir jūsu domian, tad ir reizes, kad mēs vēlamies peice dinamisku izmantojamā koda bibliotēkas vienumu (jāveic atkārtoti izmantojams). Ko es domāju, varbūt varētu padarīt skaidri ar šo piemēru scenāriju.

Iedomājieties, jūs veidojat mājas lapā (un, izmantojot XML, XSL transfroms Protams), un lielākā daļa lapām būtu Komentāri Modulis. Labi! tad nu jums kopēt vai ielīmējiet šo kodu katru lapas veidni (ko es dont ir pateikt, bet lai apkopes un pārstrādāt murgs) vai vēl labāk, jūs izveidojat ietvert failu, kas varētu tikt ierauts kur kādreiz jūs vēlaties to savā lapā ( s) ...
Tā kā mēs izveidot kādu XSL ietvert failu un iekļaut to iekšā citā XSL failu? Lūk, kā ...

Tikai, lai padarītu lietas skaidrs ... šeit ir ātrs sarakstu failiem varētu izveidot ... šeit, mēs arī info par augļiem un dārzeņiem par mātes lapā sauc pārtiku.

1. food.xml - XML ​​datu fails, kurā transformācija tiks piemērota
2. food.xsl - galvenais XSL fails, kas būs pārveidot savu food.xml
3. inc_fruits.xsl - XSL ietvert failu, kas to padara augļi dati
4. inc_vegtables.xsl - XSL ietvert failu, kas to padara vetetables dati

I dont domāju, ka man ir izskaidrot daudz, ka par minētajiem elementiem kodi, būs pašsaprotami ...

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: veidne>
</ 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>

Lejupielādēt visus iepriekš minētos failus šeit (252 downloads)