Te drukken

Als u ooit gemaakt (of het maken van een) een verticale menu met behulp van de lijst items (li) tags en CSS, kunt u tegenkomen, is dit nog een bug in Internet Explorer, waar IE 6 inserts deze kloof tussen de lijst met items die block-level elementen bevatten, dat wil zeggen als er een witruimte tussen de lijstitems in de markup. Bedankt, maar nee dank je, de IE versie 7 lijkt vrij is van deze bug.
Als je zoals ik, en nog veel meer, behoort u tot deze groep van gefrustreerde ontwikkelaars, die nog aan hun nieuwe lay-outs, het werken in IE6 te krijgen, dan kan dit nuttig zijn. Neem een ​​kijkje ...

Voorbeeld opmaak:

<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> Over </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Neem contact met ons </ a> </ li>
</ Ul>

Je zou kunnen maken wat CSS, vergelijkbaar met een onder, op het bovenstaande opmaak transfrom in een verticale menu ....

Voorbeeld CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; width: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu a {display: block;
color: # 555555;
text-decoration: none;
padding: 15px 0;
line-height: 2.5; border-bottom: 1px solid # fff;
}

De resultaten ziet u ...

Oplossing voor deze bug ... (gewijzigd / toegevoegd CSS in vet cursief)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * deze bevat gedreven lijstitems * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Dit corrigeert de * /
width: 100%; / * whitespace bug in IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-decoration: none;
padding: 15px 0;
line-height: 2.5; border-bottom: 1px solid # fff;
}

Als de bovenstaande oplossing gebeurt onafhankelijk lijkt te werken (om redenen bekend dat IE6 beschikbaar) ... in plaats daarvan proberen deze methode

Voeg deze extra IE6 alleen stijlen om uw opmaak ...

<- [If lt IE 7>
<style type="text/css">
# Menu li a {display: inline-block;}
# Menu li a {display: block;}
</ Style>
<[Endif] ->

Meer van de DOM-elementen op de pagina, langzamer het maakt, langzamer is de DOM toegang in JavaScript's. Een groot aantal van de DOM-elementen kan worden beïnvloed door slechte lay-out ontwerp. Zo kan bijvoorbeeld geneste tabellen zijn gebruikt voor layout doeleinden. Gebruik een HTML-tag waar is zinvol semantisch. Voor bijvoorbeeld donot gebruik tabellen voor lay-outs, maar geen waarde in aarzelen om ze te gebruiken waar je gegevens in tabelvorm weer te geven, en dus zal gebruik maken van DOM-elementen te verminderen, in vergelijking, met een soortgelijke structuur gemaakt met behulp van DIV alleen ..

Om het aantal DOM-elementen in de HTML-pagina te testen, typ het volgende in de console van de Firebug's: document.getElementsByTagName('*').length

Er is geen vaste norm met betrekking tot het aantal DOM-elementen zijn te veel. Controleer andere vergelijkbare pagina's die een goede markup.Eg hebben. Yahoo! Home Page is een vrij drukke pagina en nog steeds minder dan 700 elementen (HTML tags).

Gebruik GET voor AJAX aanvragen

Gebleken is dat bij gebruik XMLHttpRequest POST wordt uitgevoerd in de browsers twee stappen: het verzenden van de headers, daarna het verzenden van gegevens. Dus het is best te gebruiken, GET, die duurt maar een TCP-pakket sturen naar (tenzij je veel van cookies). De maximale lengte URL in IE is 2K, dus als je verstuurt meer dan 2K gegevens die u misschien niet kunnen gebruiken GET.
Een interessante side effect is dat de POST zonder daadwerkelijk plaatsen van de gegevens gedraagt ​​zich zoals GET. GET is bedoeld voor het ophalen van informatie, dus is het logisch (semantisch) om te gebruiken wanneer je alleen gegevens opvraagt, in tegenstelling tot het verzenden van gegevens op te slaan server-side.

Vermijd Synchroon AJAX verzoekt

Bij het maken van 'Ajax' aanvragen, kunt u kiezen uit async of sync-modus. Async-modus draait het verzoek op de achtergrond terwijl andere browser activiteiten kunnen blijven verwerken. Sync-modus zal wachten op het verzoek om terug te keren voordat u verder gaat.
Verzoeken met synchronisatie-modus moet worden vermeden. Deze verzoeken zullen ertoe leiden dat de browser te vergrendelen voor de gebruiker tot het verzoek terugkeert. In gevallen waar de server bezig is en de reactie duurt even, browser van de gebruiker (en misschien OS) zal niet toestaan ​​dat iets anders gedaan moet worden. In gevallen waarin een reactie nooit goed is ontvangen, kan de browser blijven blokkeren tot het verzoek is een time-out.
Als u denkt dat uw situatie sync-modus vereist, is het waarschijnlijk tijd om opnieuw na te denken uw ontwerp. Zeer weinig (of geen) situaties in feite nodig hebben Ajax verzoeken in sync-modus.