Ottimizzare l'utilizzo di javascript (DOM+PHP)

[LuckySevenRoX]

Salve, la mia domanda è un pò 'vaga' ma vorrei approfondire con i più esperti le best practice per ottimizzare al meglio l'utilizzo di javascript soprattutto per quanto riguarda le modifiche al DOM.

Ultimamente sto utilizzando underscore.js abbinato con jquery e per piccoli-medi progetti non ho problemi, ma quando le cose si fanno più dure arrivo a un punto dove tutto diventa macchinoso e relativamente confuso.

Per non rimanere troppo sul vago faccio un paio di domande precise:
- Come vi comportate con l'inserimento di nuovi rami nel dom? Ad esempio, se dovete popolare una <ul>, fate una cosa del tipo $("ul").append('[*]blabla'+variabile+''); oppure ragionate 'ad oggetti' creando proprio un elemento del dom? Utilizzate un framework specifico per queste cose?

- Per integrare php e js a livello di codice (quindi parliamo di una variabile php che deve venire inserita in un JS) cosa conviene fare? creare un file .php che poi verrà importato tramite html come un comune javascript o ragionare in modo opposto e importare una pagina php che poi 'produrrà' del codice JS?

Sicuramente sono domande stupide ma mi piacerebbe parlarne con qualcuno per capire quali sono i metodi più utilizzati per cose 'banali'

[Al_katraz984]

ciao,

ti rispondo secondo la mia esperienza.. magari altri preferiscono fare diversamente..

Intanto jQuery lo uso solo per le animazioni.
Per quanto riguarda il DOM io scrivo in javascript e ogni modifica la effettuo direttamente sui nodi del documento. nessun innerHTML ma tanti .appendChild e createElements per intenderci.
Ho una funzione js che funziona allo stesso modo del tagFactory in php o simili quindi io mi limito a fare ui.tag("p", contenuto, parametri); e la funzione gestisce tutto il resto.

Per l'integrazione di php in js assolutamente nessuna "echo $variabile;". PHP deve solamente passarmi il dato richiesto e questo lo fa tramite json con le relative funzioni.
Quindi js necessita di un valore -> chiede al server (php) -> recupera il valore -> js gestisce tutto il resto.

Fermo restando che, per me, ogni linguaggio deve fare solo ed esclusivamente il suo compito quindi separazione totale dei vari layer.

[Xinod]

usare createElement/appendChild al posto di innerHTML e' il primo passo per ottimizzare la procedura, quello che rende veramente piu' efficente la generazione di sostanziose parti del DOM e' lavorare su documentFragments
cosa che jquery fa nativamente, per esempio:
http://www.bennadel.com/blog/2281-jQ...-Fragments.htm

ciao

[Vindav]

sono d'accordo su tutto tranne una cosa, usare un framework solo per le animazioni. La libreria, che venga usata solo per un animazione o per il sito intero, sarà cmq li inclusa nella pagina e il client dovrà cmq scaricarla. Se includo un framework che andrà ad appesantirmi la pagina allora andrò a sfruttare tutte le potenzialità che mi mette a disposizione. Altrimenti andrò a cercare una libreria + mirata che mi produca(o che mi facili la creazione) esclusivamente le animazioni.

[Al_katraz984]

Originariamente inviato da Xinod
usare createElement/appendChild al posto di innerHTML e' il primo passo per ottimizzare la procedura, quello che rende veramente piu' efficente la generazione di sostanziose parti del DOM e' lavorare su documentFragments
cosa che jquery fa nativamente, per esempio:
http://www.bennadel.com/blog/2281-jQ...-Fragments.htm

ciao

i fragments a memoria sono su documenti XML.. ma forse sono indietro io con lo studio, ho dato una letta un po' in giro e sul link che hai suggerito e, se la cosa è applicabile anche a HTML5, sembra un buon modo per gestire alcune maschere predefinite.. mi devo documentare un po'

[LuckySevenRoX]

Grazie a tutti per i suggerimenti, questi fragments mi hanno incuriosito e li guarderò bene, comunque voi utilizzate un qualche sistema particolare di profiling per vedere quanto è performante il vostro codice? Esistono dei tools utili per questo obiettivo? Al momento utilizzo firebug con il quale riesco a fare un buon profiling delle chiamate ajax, ma a livello di JS non ho ancora capito se può fare una cosa del genere.