1. casa
  2. Domanda e risposta
  3. Qual è attualmente la migliore configurazione HTML/CSS/Javascript?

Qual è attualmente la migliore configurazione HTML/CSS/Javascript?

2009-09-26 13 views
6

Sto acquisendo un maggior numero di jQuery e così ho impostato un sito di base HTML/Javascript/CSS che uso per tutti i miei test.Qual è attualmente la migliore configurazione HTML/CSS/Javascript?

Dal momento che questi test saranno fine si trasformano in PHP e ASP.NET MVC siti web, voglio cogliere l'occasione per ottenere le basi verso il basso di nuovo a destra per i browser moderni e standard web prima di costruire i linguaggi di scripting su di esso.

Ho scelto di usare:

  • XHTML 1.0 Strict
  • UTF-8 codifica
  • come alcuni riferimenti CSS possibile (mettere tutto in file di 1 CSS per velocità di caricamento)
  • come pochi riferimenti Javascript possibili (1 file javascript p lus il jquery di riferimento base di codice - presumo utilizzando Google jQuery base di codice c'è migliori pratiche per la velocità)
  • controllo il mio codice come costruisco con il http://validator.w3.org
    •

C'è qualcosa che devo prendere in considerazione?

Ecco un esempio di uno dei miei siti web di prova:

index.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
     <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
     <title>Text XHTML Page</title> 
     <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/> 
     <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
     <script type="text/javascript" src="javascript/main.js"></script>  

    </head> 

<body> 
    <h1 class="highlightTitle">Text</h1> 
    <p class="main">First</p> 
    <p>Second</p> 
    <p id="selected" class="regular">Third</p> 
    <p>Fourth</p> 

<form action=""> 
    <div> 
     <input type="button" value="highlight it" onclick="highlightIt();countThem()" /> 
     <input type="button" value="highlight title" onclick="highlightTitle()" /> 
     <p>here is another paragraph</p> 
    </div> 
</form> 

</body> 
</html>

main.cs:

p.highlighted { 
    background-color:orange; 
} 
h1.highlightTitle { 
    background-color:yellow; 
} 
h1.deselected { 
    background-color:#eee; 
} 
p.regular { 
    font-weight: bold; 
}

main.js:

google.load("jquery", "1.3.2"); 

function highlightIt() { 
    $('#selected') 
     .toggleClass('highlighted'); 
} 

function countThem() { 
    alert("there are " + $("p.main").size() + " paragraphs"); 
} 

function highlightTitle() { 
    $("h1").toggleClass("deselected"); 
}

fonte

2009-09-26 Edward Tanguay

+1

per me le scelte che hai fatto sembrano buone. xhtml strict, utf-8, jquery ... Penso che sia quello che si riduce a quando fai qualche ricerca e test su ciò che funziona generalmente meglio. – markus

risposta

5

Personalmente vorrei legare l'evento click tramite jQuery per garantire la separazione bello, come questo:

$("#yourId").bind("click", highlightIt);

In questo modo è possibile associare a più gestori di eventi. Se usi semplicemente onclick AFAIK, puoi sempre usare un solo gestore.

BTW è possibile utilizzare anche eventi e manifestazioni spazi dei nomi personalizzati:

$("#yourId").bind("beforeHighlighting", doSomething);

è innescato da

$("#yourId").trigger("beforeHighlighting");

e

$(".hasAHelptext").bind("helptext.click", showHelptextFct); 
$(".hasAHelptext").bind("click", otherFct); 

// will only remove the showHelptextFct event handler 
$(".hasAHelptext").unbind("helptext.click");

HTH Alex

fonte

2009-09-26 11:32:56

+0

grazie, sì, non invadente javascript è un altro obiettivo di progettazione a cui mi attenerò mentre costruisco questi esempi, ma non avevo ancora fatto questo esempio :-( –

5

Spostare i blocchi <script> nello bottom of the page.

fonte

2009-09-26 11:28:34 Rob

+1

hmm, li ho spostati in modo esplicito nella parte superiore della pagina dopo aver avuto esperienza degli effetti jQuery che non funzionano fino a quando la pagina non è stata caricata completamente, ad es. Avevo un sito in flashcard dove l'utente doveva aspettare che la pagina intera si caricasse (5 secondi) prima di essere in grado di capovolgere le flashcard, ma continuo a sentire che questa è la migliore pratica, ma non può essere così male se siti come http://www.apple.com hanno 12 (dodici) riferimenti di script nella parte superiore della pagina. –

+3

I browser generalmente gestiscono il caricamento di un file javascript alla volta. La tua pagina di solito si carica più velocemente se le sposti alla fine poiché tutte le altre richieste verranno gestite in parallelo prima che inizi il caricamento di JavaScript. Se la tua pagina impiega molto tempo per essere caricata e l'interfaccia non funziona correttamente fino a quando non lo fa, potresti avere un messaggio di caricamento che è visibile con il contenuto reale nascosto finché l'interfaccia non è disponibile. L'ultimo bit di javascript caricato conterrà il codice per rimuovere l'immagine di caricamento e rivelare l'interfaccia. – tvanfosson

4

Per quanto riguarda i file CSS e JS in generale, non vorrei combinare tutti i file JS in un singolo file durante lo sviluppo. Diventa molto difficile svilupparsi in un unico file JS. Piuttosto, usa un modulo che li combini al volo o durante la distribuzione.

solito vado con (sia CSS e JS):

un file generale:

  • project.css

e uno per pagina:

  • project_welcome .css

e qualsiasi componente speciale (controlli di accesso, viste area annuncio ecc.) Ne ha uno separato.

In questo modo è possibile applicare alcune tecniche di organizzazione e non impazzire la gestione di quel singolo file di grandi dimensioni.

HTH Alex

fonte

2009-09-26 11:36:11

+0

In secondo luogo, avere meno file non porterà alcun vantaggio di velocità, Scommetterei sul contrario: è tutto nascosto nella cache dopo la prima richiesta. – simon

+0

Hmmm, avevo decine di file javascript nei miei siti Web PHP ma ho deciso di passare a uno ora poiché continuo a leggere che il problema "due download simultanei per hostname" è uno dei maggiori colli di bottiglia della velocità per i siti Web, non vero? –

+0

sì, posso confermare che se si utilizza un approccio simile come ho detto, si può facilmente finire con il browser cercando di caricare più di 50 file JS + CSS che al primo colpo causeranno un lungo periodo di tempo. E dopo ogni aggiornamento accade lo stesso ecc ... Ovviamente la cache inizierà dopo, ma non importa se il visitatore non ritorna dopo che il primo tempo di caricamento è durato troppo. E cose come minimizzare il JS è più facile una volta che l'hai elaborato in un singolo file JS. –

0

mi sento di raccomandare di mettere il JS chiama sotto il tag body. Se gli script sono sospesi, la pagina può caricare e lasciare caricare il comportamento (JS) dopo il fatto. Ho notato che la velocità migliora notevolmente con questo metodo.

Verificare che fuori: http://stevesouders.com/hpws/rule-js-bottom.php

fonte

2009-09-28 03:52:54 mager

Problemi correlati

 Problemi correlati