1

He realizado pruebas con dos codigos que hacen lo mismo, cargar un select definido con las opciones de una peticion que se realiza bd. codigo php:

<div id="Contenedor" style="position:absolute; height: 0px; width: 0px; opacity: 0;">
 <select class="ui-keyboard-input ui-widget-content ui-corner-all ui-keyboard-input-current" size='9'; style="text-align: left; width: 250px; height: 180px" id="Select" disabled="disabled" aria-haspopup="true" role="textbox" type="text">

 <?php
 $query= "SELECT `id`,`name` FROM `lista`";
    $data=SQL($query);
    while ($fila = mysql_fetch_assoc($data)) {
        $code= $fila['id'];
        $name= $fila['name'];
        $conc= $id.": ".$name; 
        ?>
        <option value="<?php echo $code;?>"><?php echo $conc;?></option>
        <?php 
    }
?>        
        </select>
</div>

codigo Javascript para el mismo select:

$.get('/pedirLista.php',{
funcion:'listar'
 }).done(function(data){
  var sele=(JSON.parse(data));
  for(x=0; x<sele.length;x++){
   $("#Select").append(new Option(x+': '+sele[x],x));  
 }

});

Pongo el codigo completo pero lo que consume tiempo en cada una de las rutinas es el bucle de relleno de los options, el While en caso de php y el for en caso de javascript. Realizando diferentes pruebas resulta que el codigo javascript tarda un minuto en cargar 4000 registros mientras que php tarda unos 800 milisegundos, ¿como es posible tal diferencia?, ¿hay algo que pueda mejorar en javascript?. Mi pregunta esta justificada por tema que haciendolo mediante javascript, el select queda cargado y no tengo que volver a cargar cada vez que entro en la seccion, mientras que por php, cada vez que se carga la seccion estoy realizando una llamada a bd.

1 respuesta 1

3

Hay una gran diferencia entre un código y otro. En php en el bucle simplemente estás modificando una cadena, mientras que en javascript lo que estás haciendo es añadir opciones a un elemento que se encuentra en el DOM de la página que está mostrando el navegador. El acceso al DOM siempre implica un rendimiento bajo.

Una optimización sencilla que podrías hacer en tu código javascript es la de no añadir las opciones a un select ya añadido en el DOM, si no añadirlas a un select en memoria y añadir después este elemento select al DOM.

Mira este ejemplo con las dos opciones:

var data=[];
for (var i=0 ; i<4000; data.push('Opción ' + ++i));


$(function(){
  var cont = new Date();
  for(x=0; x<data.length;x++){
   $("#Select").append(new Option(x + ': ' + data[x], x));
  }
  console.log('Opción 1: ' + (new Date() - cont)); 
  
  cont = new Date();
  var $select2 = $('<select></select>');
  for(x=0; x<data.length;x++){
   $select2.append(new Option(x + ': ' + data[x], x));
  }
  $('body').append($select2);
  console.log('Opción 2: ' + (new Date() - cont)); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Select"></select>

2
  • ok, entiendo, si hago esto, var $select2 = $('#select'); for(x=0; x<data.length;x++){ $select2.append(new Option(x + ': ' + data[x], x)); } $('body').append($select2); tendria que tener el mismo rendimiento que el caso 2, ¿no?
    – Quarkbite
    el 25 oct. 2017 a las 11:18
  • No, porque el elemento #select ya está añadido al DOM, es decir ya está en el árbol de elementos de la página, por lo que al añadir las opciones sigues añadiéndoselas a un elemento que ya está en la página. Es el hecho de tener que acceder a este árbol de elementos lo que penaliza tanto el rendimiento. el 25 oct. 2017 a las 11:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.