jquery La finestra di dialogo dell'interfaccia aperta è incredibilmente lenta in IE7

Question

Hanno una grande quantità di HTML, ma dove pensavo che il collo di bottiglia sarebbe errato: è quando sto aprendo la finestra di dialogo, non quando sto costruendo la stringa di HTML (~ 35 ms), né quando lo aggiungo alla finestra di dialogo div contenitore (~ 50 ms). Quando si chiama dialog ("open") sotto in FF, ottengo costantemente 1800+ ms, IE7 è intorno a 17000 (!) Ms. Posso vivere con 1800ms, ma in IE7 (il 99% della mia base di utenti), è troppo lungo.

// prep dialog 
$("#print-box").dialog({ 
    bgiframe: false, 
    width:900, 
    height: 1000, 
    modal: true, 
    autoOpen: false, 
    draggable: false 
    }); 

// display selected items in print preview modal 
$("#print-preview").click(function() { 

    $('#print-box').empty(); 

    var tmp = ['<div class="print-container">']; 
    var rows = $('[name="print-this-listing"]:checked').parents("div.listing").clone(); 

    for (var i=0; i < rows.length; i++) { 
     tmp.push($(rows[i]).html()); 
    } 

    tmp.push('</div>'); 

    $('#print-box').html(tmp.join('')); 
    $('#print-box').dialog('open'); 
}); 

Qualche idea? Sto cercando di creare una pagina di anteprima di stampa e preferisco non fare un altro giro al server per recuperare tutti quei dati di nuovo, ma è molto più veloce rispetto al lato client in questo momento.

Answer 1

Mi sono imbattuto in un problema simile nell'utilizzo della finestra di dialogo dell'interfaccia utente jQuery. Per velocizzare le cose, prova ad aprire prima la finestra di dialogo e poi ad aggiungere i dati.

$('#print-box').dialog('open'); 
    $('#print-box').html(tmp.join('')); 

Questo sembrava essere di aiuto per me. Controlla anche se hai tag spezzati o HTML malformati nella stringa che stai aggiungendo.

Answer 2

Anche se il codice html() riportato sopra obbliga IE a rendere la finestra di dialogo più veloce nel mio caso, si è rivelata la richiesta Ajax che stavo facendo dopo la creazione della finestra di dialogo che ha causato la lentezza in IE. Questa particolare applicazione Web doveva mostrare una finestra di attesa dopo aver fatto clic su un pulsante di salvataggio.

L'utilizzo di setTimeout consente di eseguire la richiesta ajax al di fuori del rendering della finestra di dialogo. Ecco il codice base che ho usato:

function request(requestURL, sendData, asyncRequest) { 
     return jQuery.ajax(
     { 
      url: requestURL, 
      type: 'POST', 
      datatype: 'json', 
      data: sendData, 
      contentType: 'application/json; charset=utf-8', 
      async: asyncRequest, 
      success: function (data, result) { 
       if (!result) 
        alert('Failure to retrieve the related lookup data: ' + requestURL); 
      } 
     }).responseText; 
    } 

    function modifyProperties(postData) { 
     var d; 

     // create wait dialog 
     jQuery("#wait").dialog({ 
      maxWidth: 125, 
      maxHeight: 75, 
      minWidth: 125, 
      minHeight: 75, 
      modal: true, 
      resizable: false 
     }); 

     // ie fix to ensure dialog is rendered prior to ajax request 
     setTimeout(function() { 
      // make an ajax request after 500ms 
      d = request('/mywebservice', postData, false); 
      jQuery("#wait").dialog("close"); 
      var responseObject = JSON.parse(d); 
     }, 500); 

     return true; 
    } 

    modifyProperties();