Lentidão utilizando innerHTML

Luiz Diniz · Fevereiro 1, 2013

Pessoal, bom dia!

Tenho uma aplicação que gerencia solicitações de compra de usuários. Esta solução acessa catálogos de compras em páginas WEB, que devem retornar valores em um padrão, chamado OCI, para que o usuário prossiga com o processo de compras.

É tudo simples, não tem leitura de banco de dados, apenas uma página, com um form que contem para cada item do catálogo, informações visíveis para o usuário, como descrição e um campo para preencher a quantidade, e informações ocultas, como o código do material, preço, unidade de medida...

Ao clicar no submit, uma função javascript é chamada, que se encarrega de pegar cada valor deste oculto ou não do form, para cada item, e adicionar na post para retornar ao meu sistema.

Como por exemplo na linha abaixo, o layout que tenho é 'NEW_ITEM-DESCRIPTION[1]Descrição Produto'

O 'j' é um contador para cada linha que for acrescentada no POST.

Para cada item do catálogo, ele realiza cerca de 20 vezes o código abaixo.

Caso o catálogo tenha 2 itens, ele demora cerca de 6s para executar a logica desta atribuição, caso o catálogo tenha 10 itens, cerca de 40s, mais do que isso, o navegador trava e meu processo é interrompido.

Vocês possuem alguma ideia de como otimizar este código?

Desde já agradeço!

formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-DESCRIPTION[' + j + ']" value = "' + objDescricao.value + '">';

<HTML>
<TITLE>Catálogo</TITLE>
<HEAD></head>
<script>

function isNumeric(valor)
{
    validChar = '0123456789';
    for(var i=0;i<valor.length;i++)
        if(validChar.indexOf(valor.substr(i,1))<0)
            return false;
    return true;
}

function validaNumero(obj)
{
   if(!isNumeric(obj.value))
   {
    obj.value = 0;
   }
   return true;
}

function returnBackend(submitSRM, quantidade, descricao, material, materialFornecedor, descricaoDetalhada, grupoMaterial, contract, contractItem, price, unit) 
{
	submitSRM.disabled = true;

var mensagem = 'Dados da compra:';
	var arr = new Array();        
	arr = document.getElementsByName(quantidade); 
	var j = 1;

	for(var c = 0; c < arr.length; c++)        
	{           
	 var objQuantidade = document.getElementsByName(quantidade).item(c);
	 
	 if(objQuantidade.value>0)
	 {
	  var objDescricao  = document.getElementsByName(descricao).item(c);
	  //mensagem = mensagem + '\n\nProduto-> ' + objDescricao.value + '\nQuantidade-> ' + objQuantidade.value;
	  mensagem = mensagem + '\nProduto-> ' + objDescricao.value + ' - Quantidade-> ' + objQuantidade.value;
	 }
	}

	if(!confirm(mensagem + '\n\nConfirma?'))
	{
	 submitSRM.disabled = false;
	 return false;
	}
	else 
	{
	
//alert("Inicio: " + arr.length);
		for(var i = 0; i < arr.length; i++)        
		{ 
			 var objQuantidade = document.getElementsByName(quantidade).item(i);
			 
			 if(objQuantidade.value>0)
			 {
				  var objDescricao          = document.getElementsByName(descricao).item(i);
				  var objMaterial           = document.getElementsByName(material).item(i);
				  var objPrice      		= document.getElementsByName(price).item(i); 
				  var objMaterialFornecedor = document.getElementsByName(materialFornecedor).item(i);
				  var objDescricaoDetalhada = document.getElementsByName(descricaoDetalhada).item(i);   
				  var objGrupoMaterial      = document.getElementsByName(grupoMaterial).item(i);  
				  var objContract           = document.getElementsByName(contract).item(i);
				  var objContractItem       = document.getElementsByName(contractItem).item(i); 
				  var objUnit       		= document.getElementsByName(unit).item(i); 

				  var formSRM = document.getElementById('formSRM');
			
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-DESCRIPTION[' + j + ']" value = "' + objDescricao.value + '">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-MATNR[' + j + ']" value = "' + objMaterial.value + '">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-MATGROUP[' + j + ']" value = "' + objGrupoMaterial.value + '">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-QUANTITY[' + j + ']" value = "' + objQuantidade.value + '">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-UNIT[' + j + ']" value = "' + objUnit.value + '">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-PRICE[' + j + ']" value = "' + objPrice.value + '">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-PRICEUNIT[' + j + ']" value = "1">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-CURRENCY[' + j + ']" value = "">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-LEADTIME[' + j + ']" value = "3">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-VENDOR[' + j + ']" value = "">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-VENDORMAT[' + j + ']" value ="' + objMaterialFornecedor.value + '">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-MANUFACTCODE[' + j + ']" value = "">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-MANUFACTMAT[' + j + ']" value = "">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-CONTRACT[' + j + ']" value = "' + objContract.value + '">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-CONTRACT_ITEM[' + j + ']" value = "' + objContractItem.value + '">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-SERVICE[' + j + ']" value = "">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-EXT_QUOTE_ID[' + j + ']" value = "">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-EXT_QUOTE_ITEM[' + j + ']" value = "">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-EXT_PRODUCT_ID[' + j + ']" value = "">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-LONGTEXT[' + j + ']" value ="' + objDescricaoDetalhada.value + '">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-LONGTEXT_1:[1]" value ="' + objDescricaoDetalhada.value + '">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-ATTACHMENT[1]" value ="">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-ATTACHMENT_TITLE[1]" value ="">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-ATTACHMENT_PURPOSE[1]" value = "">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-EXT_SCHEMA_TYPE[1]" value="">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-EXT_CATEGORY_ID[1]" value="">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-EXT_CATEGORY[1]" value="">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-SLD_SYS_NAME[1]" value="">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-CUST_FIELD1[1]" value = "">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-CUST_FIELD2[1]" value = "">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-CUST_FIELD3[1]" value = "">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-CUST_FIELD4[1]" value = "">';
				  formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-CUST_FIELD5[1]" value = "">';
				
				  j = j + 1; 
			 }

		}
		
		document.frmSRM.submit();
		return true;	

	}
}

</script>

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<FORM name="frmSRM" id="formSRM" action="<%=Request.form("HOOK_URL")%>" method=post target=_top>

<input type="hidden" name="~OkCode" value="ADDI">
<input type="hidden" name="~CALLER" value="CTLG">



<div align="center">
  <table width="750" border="0" cellspacing="0" cellpadding="0" bgcolor="#b6cfe6">
    <tr>
      <td width="15"> </td>
      <td bgcolor="#FFFFFF">
        <div align="center">
          <table width="650" border="0" cellspacing="0" cellpadding="0" bgcolor="#b6cfe6">
            <tr>
              <td valign="top">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td valign="top"><img src="images/header.jpg"></td>
                  </tr>
                </table>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td valign="top" width="10%"><img src="images/logo2.gif"></td>
                    <td width="90%" align="center"><font class="style2">Catálogo</font></td>  
                  </tr>

                </table>
              </td>
            </tr>
          </table>
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
             <tr>
              <td>
                  <div align="center">
				 
      <table width="100%" border="0" cellspacing="0" cellpadding="10">
                    <tr>
                      <td valign="top"><p class="style1"><img src="images/setaL.gif" width="18" height="21">BATERIA 1,5V</p></td>
		    		</tr>
                  </table>
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
             	    <tr>
                      <td width="20%" align="center">
                        <img src="imagens/1,5V " style="border:0;" >
                      </td>
                      <td width="80%"> 
                        <font class="tab2">>>BATERIA 1,5V</font>
                        <br><br>
                        <font class="tab2">>C&oacutedigo Material SAP: </font> <font class="tab">888888</font>
						<br>
						<font class="tab2">>C&oacutedigo Material Fornecedor: </font> <font class="tab">26111700</font>
                        <br><br>
                        <font class="tab"><b>Quantidade:</b></font> 
                        <input type="text"   name="QTDE"    value="0" size="3" maxlength="2" class="style" onKeyup="return validaNumero(this);">                        
                        <input type="hidden" name="DESC"    value="BATERIA 1,5V" >
                        <input type="hidden" name="MAT"     value="0000000000099999">
                        <input type="hidden" name="MATFORN" value="26111700" >
                        <input type="hidden" name="DESCDET" value="BATERIA:ALCALINA " >
                        <input type="hidden" name="MATGRP" value="26111700" >
						<input type="hidden" name="CONTRACT" value="0070014567" >
						<input type="hidden" name="CONTRACTITEM" value="00020" >
						<input type="hidden" name="PRICE" value="11.16" >
						<input type="hidden" name="UNIT" value="UN" >
						<input type="hidden" name="LEADTIME" value="1" >
                      </td>
                    </tr>
                   </table>
                   <table width="650" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center">
		    <tr>
		     <td align="right"><hr color="#71716C" ></hr></td>
		    </tr>	
		   </table>
         
         </div>
        </td>
        <td width="15"> </td>
      </tr>
      <tr>
        <td colspan="2" align="right"><input type="submit" class="button2" name="submitSRM" value="Colocar Produtos no Carrinho de Compras" onclick="return returnBackend(this, 'QTDE', 'DESC', 'MAT', 'MATFORN', 'DESCDET', 'MATGRP', 'CONTRACT', 'CONTRACTITEM', 'PRICE', 'UNIT');"></td>
      </tr>	
    </table>
   </td>
   
  </tr>

 </table>
</div>

</form>
</body>
</html>

Morpheus#2005 · Fevereiro 1, 2013

Vê se te ajuda.

http://tableless.github.com/exemplos/carrinho-compras/

Good Luck!!!

xanburzum · Fevereiro 1, 2013

a utilização do método cloneNode para poder transferir todos os atributos de um elemento pra outro, pode te ajudar, tente usar assim:



function replaceHtml(element, html) {
        var oldElement =
                        (typeof element === "string" ? document.getElementById(element): element);
        /*@cc_on // innerHTML puro e mais rápido em IE
                oldElement.innerHTML = html;
                return oldElement;
        @*/
        var newElement = oldElement.cloneNode(false);
        newElement.innerHTML = html;
        oldElement.parentNode.replaceChild(newElement, oldElement);
        /* Como acabamos de remover o elemento antigo do DOM, retornar uma referenca
        ao novo elemento, o qual pode ser utilizado para restaurar referencias da variable */
        return newElement;
};

Morpheus#2005 · Fevereiro 1, 2013

Esse eu nao conhecia...vlw Xan

xanburzum · Fevereiro 1, 2013

muitas vezes ao utilizar a propriedade innerHTML de um elemento se perde muito tempo limpando os elementos filhos em comparação a criação dos novos.

Luiz Diniz · Fevereiro 4, 2013

Substituí de:

formSRM.innerHTML += '<input type="hidden" name="NEW_ITEM-DESCRIPTION[' + j + ']" value = "' + objDescricao.value + '">';

Para:

 formSRM.insertAdjacentHTML ('BeforeEnd','<input type="hidden" name="NEW_ITEM-DESCRIPTION[' + j + ']" value = "' + objDescricao.value + '">');

E tive um grande ganho de performance.

Obrigado

Bruno Augusto · Fevereiro 4, 2013

Dica sensacional. Eu não conhecia e fui pesquisar a respeito para ver o motivo e a compatibilidade, que é até que bem decente.

:seta: MDN

Entrar

Arquivado

Lentidão utilizando innerHTML

Recommended Posts

Luiz Diniz 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Morpheus#2005 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Morpheus#2005 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Luiz Diniz 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante