Microsoft non segue Best Practices rallenta Firefox su Outlook Web Access

da Andreas Grabner

Di tanto in tanto ho accedere alla mia mail di lavoro tramite Outlook Web Access (OWA) - che funziona davvero grande su tutti i browser ho eseguito sul mio portatile (IE, FF, Chrome).Immagino che OWA ottimizzato per Microsoft probabilmente proprio browser ho pensato che sicuramente trovare il codice JavaScript che viene eseguito non così bene su Firefox rispetto a Internet Explorer. Dal punto di vista gli utenti finali non sembra esserci alcuna differenza nelle prestazioni - ma - usando dynaTrace Ajax Edition (anche controllare le esercitazioni video ) ho trovato un metodo molto interessante JavaScript che mostra una grande differenza di prestazioni durante l'iterazione sugli elementi DOM.

Consentire di più elementi DOM con lo stesso ID? Questa non è una buona pratica!

Ho registrato la stessa sequenza di azioni su entrambi Internet Explorer 8 e Firefox 3.6.Questo include l'accesso, la selezione di una cartella di posta elettronica, facendo clic sui più e-mail, selezionando la cartella non letti Mail Cerca e poi il log out. L'immagine seguente mostra la scheda Timeline (Tutorial YouTub) del Rapporto prestazioni incluse tutte le mie attività mentre ero connesso a Outlook Web Access.

Outlook accesso Cronologia Web che mostra tutte le attività del browser quando si fa clic tra le cartelle

Invece di confrontare il mouse individuale e gestori di eventi della tastiera ho aperto la View Hotspot (Tutorial YouTub) per identificare il più lento metodi JavaScript. Se si utilizza dynaTrace solo trapano nella vista HotSpot dall'URL selezionato nel rapporto prestazioni (Tutorial YouTub) . C'è stato un metodo con un lento Tempo di esecuzione . Questo è il tempo di esecuzione puro metodo esclusi i tempi delle chiamate ai metodi bambino. Il metodo in questione si chiama getDescendantById . Restituisce l'elemento DOM identificato dal suo IDche è un discendente della corrente elemento DOM. Se guardate lo screenshot seguente vediamo la stessa chiamata metodo che restituisce alcun valore in entrambi i browser - il che significa che l'elemento che stiamo cercando ( "divReplaceFolderId" ) non è in quella pagina. E 'interessante vedere che il metodo viene eseguito in 0.47ms su Internet Explorer, ma prende 12.39ms su Firefox. Uno sguardo più da vicino l'implementazione del metodo mi fa pensare che lo sviluppatore cerca di ottenere con questo metodo:

Speciale implementazione per i browser IE non per ottenere elementi in base all'ID

Se ho ben capito l'intento di questo metodo corretto dovrebbe restituire l'unico elemento identificato dal suo ID. Sembra però che IE permette di avere più elementi con lo stesso ID in una singola pagina. Ecco perché il metodo implementa la soluzione alternativa utilizzando getElementsByTagName e poi l'accesso al elemento di matrice restituita da ID. Nel caso ci siano più elementi con lo stesso ID il metodo restituisce il primo elemento. Nel caso in cui nessun elemento è stato trovato e non sono in esecuzione su IE l'attuazione scorre TUTTI gli elementi DOM e restituisce il primo elemento che corrisponde al ID. Sembra un'implementazione strano per me, con il risultato che il browser IE NON dobbiamo scorrere questo ciclo, che probabilmente non restituirà alcun elemento comunque. Ecco alcuni pseude-codice su come avrei implementare questa - felice di ricevere un input su questo:

var elem = document.getElementById (d); if (! elem = null) {/ / controlla se questo elemento è un discendente del nostro checkNode attuale var elemento = elem.parentNode;! while (checkNode = null & & checkNode = questo. _get_DomNode ()) = checkNode checkNode.parentNode if (checkNode == null) elem = null; / / non un discendente} elem ritorno;

Questo codice funziona sia su IE e FF - anche se ci sarebbe duplicato elementi con lo stesso ID che si dovrebbe assolutamente evitare.

Firefox più veloce nel caricamento Media Player?

Ho continuato esplorare le sessioni che ho registrato su entrambi IE e FF. Abbastanza interessante ho trovato un metodo che inizializza un Media Player libreria JavaScript. Controlla la seguente immagine. Essa mostra la differenza di tempo di esecuzione sia per IE e FF.Questa volta Firefox è molto più veloce - almeno al primo sguardo:

Si presenta come l'inizializzazione Mediateca Player è molto più veloce di Firefox

La differenza di tempo qui è molto significativo - 358ms rispetto al 0.08ms. Quando guardiamo la traccia effettiva esecuzione di entrambi i browser si vede comunque che IE è in esecuzione il se (b.controls) filiale di controllo, mentre Firefox non. Questo mi dice che non ho installato il plugin Media Player su Firefox:

Reale confronto JavaScript traccia tra Internet Explorer e Firefox

Lezione che ho imparato qui è che dobbiamo sempre guardare il reale PurePath (YouTube tutorial) come si può solo paragonare le prestazioni quando entrambi i browser eseguito la stessa cosa.

Conclusione

Prima di scrivere questo blog speravo di trovare JavaScript modelli problema di prestazioni in Firefox. Simile a IE modelli problema legato ho bloggato su in passato, come la Top 10 sul lato client problemi di prestazioni . Invece di trovare veri modelli di prestazioni JavaScript sembra che continuo a trovare il codice che è stato solo "ottimizzato" per IE ma non era davvero testato, aggiornato e ottimizzato per Firefox. Simile al mio blog Slow Time caricamento della pagina in Firefox causate da vecchie versioni di YUI, jQuery io considero i risultati in questo blog entrare le stesse indicazioni. Microsoft implementa è il codice JavaScript per affrontare una situazione specifica di IE (che permette più elementi con lo stesso ID), ma non hanno realmente implementato la soluzione di lavorare abbastanza efficace in altri browser. Tra l'altro - metodo di confronto tra le esecuzioni di codice JavaScript come ho fatto qui con il libero dynaTrace Ajax Edition sono più facili e può essere automatizzato mediante il dynaTrace Premium AJAX Extensions .

In caso di risultati simili o reale Firefox JavaScript Patterns problema di prestazioni fatemi sapere - sarebbero felici di blog al riguardo.

Corso SQL Server - Corso Hyper-V -Corso Windows Server –

Certificazione Microsoft