1

Qual a melhor maneira para deixar esse script menos lento com ou sem jquery, a função original tem mais de 200 linhas de alterações, e é aplicado em uma página onde há em média de 1000 a 1500 tags para mudar.

tem como deixar a comparação para criar link mais rápida?

                    function crLink(){
                var $tbl = $('#frame').find("table[title^='TITULO']");
                $tbl.find("b:contains(CNF)").html(" - LINK <a href='http://www.minasgerais.com.br' target='_blank'><b><font color='blue'>CONFINS </font></b></a>");
                $tbl.find("b:contains(BSB)").html(" - LINK <a href='http://www.df.com.br' target='_blank'><b><font color='blue'>BRASILIA </font></b></a>");
                $tbl.find("b:contains(SSA)").html(" - LINK <a href='http://www.bahia.com.br' target='_blank'><b><font color='blue'>SALVADOR </font></b></a>");
                $tbl.find("b:contains(CGH)").html(" - LINK <a href='http://www.saopaulo.com.br' target='_blank'><b><font color='blue'>CONGONHAS </font></b></a>");
                $tbl.find("b:contains(SDU)").html(" - LINK <a href='http://www.riodejaneiro.com.br' target='_blank'><b><font color='blue'>RIO DE JANEIRO </font></b></a>");
                $tbl.find("b:contains(JTC)").html(" - LINK <a href='http://www.saopaulo.com.br' target='_blank'><b><font color='blue'>BAURU </font></b></a>");
                $tbl.find("b:contains(PMW)").html(" - LINK <a href='http://www.tocantins.com.br' target='_blank'><b><font color='blue'>PALMAS </font></b></a>");
                }

Quando executado na pagina com mais de 1000 tags para alterar está com um atraso de até 15 segundos para ser aplicado. Segue pagina exemplo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
	<head>
	<script type="text/javascript" src="inc/jquery.js"></script>
	<script>
	function crLink(){
	var $tbl = $('#frame').find("table[title^='TITULO']");
	$tbl.find("b:contains(CNF)").html(" - LINK <a href='http://www.minasgerais.com.br' target='_blank'><b><font color='blue'>CONFINS </font></b></a>");
	$tbl.find("b:contains(BSB)").html(" - LINK <a href='http://www.df.com.br' target='_blank'><b><font color='blue'>BRASILIA </font></b></a>");
	$tbl.find("b:contains(SSA)").html(" - LINK <a href='http://www.bahia.com.br' target='_blank'><b><font color='blue'>SALVADOR </font></b></a>");
	$tbl.find("b:contains(CGH)").html(" - LINK <a href='http://www.saopaulo.com.br' target='_blank'><b><font color='blue'>CONGONHAS </font></b></a>");
	$tbl.find("b:contains(SDU)").html(" - LINK <a href='http://www.riodejaneiro.com.br' target='_blank'><b><font color='blue'>RIO DE JANEIRO </font></b></a>");
	$tbl.find("b:contains(JTC)").html(" - LINK <a href='http://www.saopaulo.com.br' target='_blank'><b><font color='blue'>BAURU </font></b></a>");
	$tbl.find("b:contains(PMW)").html(" - LINK <a href='http://www.tocantins.com.br' target='_blank'><b><font color='blue'>PALMAS </font></b></a>");
	}
	</script>
	</head>
	<body>
		<button onclick="crLink()">BOTAO</button>
		<div id="frame">
	<table title="TITULO">
		<tbody>
						<tr>
				<td><b>joao xx xxxxx</b></td><td><b>150</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>maria xx xxxxx</b></td><td><b>110</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>ana xx xxxxx</b></td><td><b>190</b></td><td><b>SSA</b></td>
			</tr>		<tr>
				<td><b>mario xx xxxxxxx</b></td><td><b>100</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>claudia xxxxxxx</b></td><td><b>170</b></td><td><b>SDU</b></td>
			</tr>		<tr>
				<td><b>ricardo xx xxxxxx</b></td><td><b>160</b></td><td><b>SDU</b></td>
			</tr>		<tr>
				<td><b>eder xx xxxxxx</b></td><td><b>300</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>julia xx xxxxx</b></td><td><b>130</b></td><td><b>SSA</b></td>
			</tr>		<tr>
				<td><b>mara xxx xxxxx</b></td><td><b>200</b></td><td><b>JTC</b></td>
			</tr>		<tr>
				<td><b>lara xxx xxxxx</b></td><td><b>100</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>beto xxx xxxxx</b></td><td><b>150</b></td><td><b>JTC</b></td>
			</tr>		<tr>
				<td><b>fabio xxx xxxxx</b></td><td><b>170</b></td><td><b>PMW</b></td>
			</tr>		<tr>
				<td><b>juliano xxx xxxxx</b></td><td><b>110</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>marisa xxx xxxxx</b></td><td><b>400</b></td><td><b>CGH</b></td>
			</tr>		<tr>
				<td><b>selena xxx xxxxx</b></td><td><b>160</b></td><td><b>JTC</b></td>
			</tr>
		</tbody>
	</table>
	</div>
	</body>
	</html>

0

1 Resposta 1

1

Ao meu ver a performance neste caso tem menos peso em comparação a facilidade de organizar, manter os dados e evitar repetições, deixando o código mais limpo.

Sugiro criar um objeto onde você pode mais facilmente alterar os valores criando entradas com os dados (URL e nome) e usando apenas um for...in para inserir os links:

function crLink(){
   var $tbl = $("table[title^='TITULO']", '#frame');

   var l1 = " - LINK <a href='http://www.";
   var l2 = "' target='_blank'><b><font color='blue'>";
   var l3 = "</font></b></a>";
   
   var links = {
      // você pode inclusive organizar por ordem alfabética
      // como fiz abaixo
      BSB: { urls: "df.com.br",           nome: "BRASILIA" },
      CGH: { urls: "saopaulo.com.br",     nome: "CONGONHAS" },
      CNF: { urls: "minasgerais.com.br",  nome: "CONFINS" },
      JTC: { urls: "saopaulo.com.br",     nome: "BAURU" },
      PMW: { urls: "tocantins.com.br",    nome: "PALMAS" },
      SDU: { urls: "riodejaneiro.com.br", nome: "RIO DE JANEIRO" },
      SSA: { urls: "bahia.com.br",        nome: "SALVADOR" }
   }
   
   for(var i in links){
      $("b:contains('"+i+"')", $tbl).html(
         l1
         +links[i].urls
         +l2
         +links[i].nome
         +l3
      );
   }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="crLink()">BOTAO</button>
<div id="frame">
	<table title="TITULO">
		<tbody>
						<tr>
				<td><b>joao xx xxxxx</b></td><td><b>150</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>maria xx xxxxx</b></td><td><b>110</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>ana xx xxxxx</b></td><td><b>190</b></td><td><b>SSA</b></td>
			</tr>		<tr>
				<td><b>mario xx xxxxxxx</b></td><td><b>100</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>claudia xxxxxxx</b></td><td><b>170</b></td><td><b>SDU</b></td>
			</tr>		<tr>
				<td><b>ricardo xx xxxxxx</b></td><td><b>160</b></td><td><b>SDU</b></td>
			</tr>		<tr>
				<td><b>eder xx xxxxxx</b></td><td><b>300</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>julia xx xxxxx</b></td><td><b>130</b></td><td><b>SSA</b></td>
			</tr>		<tr>
				<td><b>mara xxx xxxxx</b></td><td><b>200</b></td><td><b>JTC</b></td>
			</tr>		<tr>
				<td><b>lara xxx xxxxx</b></td><td><b>100</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>beto xxx xxxxx</b></td><td><b>150</b></td><td><b>JTC</b></td>
			</tr>		<tr>
				<td><b>fabio xxx xxxxx</b></td><td><b>170</b></td><td><b>PMW</b></td>
			</tr>		<tr>
				<td><b>juliano xxx xxxxx</b></td><td><b>110</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>marisa xxx xxxxx</b></td><td><b>400</b></td><td><b>CGH</b></td>
			</tr>		<tr>
				<td><b>selena xxx xxxxx</b></td><td><b>160</b></td><td><b>JTC</b></td>
			</tr>
		</tbody>
	</table>
</div>

Usando JavaScript puro

function crLink(){
   var tbl = document.querySelectorAll("#frame table[title^='TITULO'] tr td:nth-child(3) b");

   var l1 = " - LINK <a href='http://www.";
   var l2 = "' target='_blank'><b><font color='blue'>";
   var l3 = "</font></b></a>";
   
   var links = {
      BSB: { urls: "df.com.br",           nome: "BRASILIA" },
      CGH: { urls: "saopaulo.com.br",     nome: "CONGONHAS" },
      CNF: { urls: "minasgerais.com.br",  nome: "CONFINS" },
      JTC: { urls: "saopaulo.com.br",     nome: "BAURU" },
      PMW: { urls: "tocantins.com.br",    nome: "PALMAS" },
      SDU: { urls: "riodejaneiro.com.br", nome: "RIO DE JANEIRO" },
      SSA: { urls: "bahia.com.br",        nome: "SALVADOR" }
   }
   
   for(var i of tbl){
      i.innerHTML = l1
      +links[i.textContent].urls
      +l2
      +links[i.textContent].nome
      +l3;
   }
   
}
<button onclick="crLink()">BOTAO</button>
<div id="frame">
	<table title="TITULO">
		<tbody>
						<tr>
				<td><b>joao xx xxxxx</b></td><td><b>150</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>maria xx xxxxx</b></td><td><b>110</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>ana xx xxxxx</b></td><td><b>190</b></td><td><b>SSA</b></td>
			</tr>		<tr>
				<td><b>mario xx xxxxxxx</b></td><td><b>100</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>claudia xxxxxxx</b></td><td><b>170</b></td><td><b>SDU</b></td>
			</tr>		<tr>
				<td><b>ricardo xx xxxxxx</b></td><td><b>160</b></td><td><b>SDU</b></td>
			</tr>		<tr>
				<td><b>eder xx xxxxxx</b></td><td><b>300</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>julia xx xxxxx</b></td><td><b>130</b></td><td><b>SSA</b></td>
			</tr>		<tr>
				<td><b>mara xxx xxxxx</b></td><td><b>200</b></td><td><b>JTC</b></td>
			</tr>		<tr>
				<td><b>lara xxx xxxxx</b></td><td><b>100</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>beto xxx xxxxx</b></td><td><b>150</b></td><td><b>JTC</b></td>
			</tr>		<tr>
				<td><b>fabio xxx xxxxx</b></td><td><b>170</b></td><td><b>PMW</b></td>
			</tr>		<tr>
				<td><b>juliano xxx xxxxx</b></td><td><b>110</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>marisa xxx xxxxx</b></td><td><b>400</b></td><td><b>CGH</b></td>
			</tr>		<tr>
				<td><b>selena xxx xxxxx</b></td><td><b>160</b></td><td><b>JTC</b></td>
			</tr>
		</tbody>
	</table>
</div>

1
  • 1
    vou testar, e posto o resultado da melhoria na performance pela manhã Commented 29/05/2018 às 23:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .