Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » AJAX » $.getJSON optimizar carga

AJAX - $.getJSON optimizar carga

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de txema
Val: 19
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

$.getJSON optimizar carga

Publicado por txema (3 intervenciones) el 10/07/2014 23:58:39
Buenas noches:

Desde mis pruebas en versión alfa estoy trasladando con google maps diversos marcadores que me llegan desde archivos distintos.

Los tres archivos en cuestión, que generan los correspondientes JSON, son:

A.- xxx.json generado manualmente con 109 registros
B.- json-xxx.php generado desde base de datos (MySQL) con 72 registros y que en el javascript pasará hasta 20 condicionales o filtros ( if ($("#XXX").is(":checked") && data[i].tipo == "XXX"){ /* codigo */}; ) etc.
C.- xxx.php que recoge desde excel 9183 registros

Al abrir los tres archivos para ver los JSON generados, el tiempo de carga es inapreciable en los tres casos.

Al procesarlos en el javascrpt correspondiente mediante $.getJSON('ruta/de_archivo.extension', function (data) { /* código */ });, los tiempos de demora en la carga final de los marcadores son:

En local (XAMPP): A: fracción de segundo; B +/- 1 segundo ; C: unos 4 segundos de promedio
En Hosting 1: A: ¿1/2 segundo?; B: 4 segundos; C: sobre 10 segundos.
En Hosting 2: Se duplican los tiempos de hosting 1.
Siempre promediado a diferentes horas.

Descartado el Hosting 2 (será motivo de mucha conversación con los técnicos del servicio), ¿tienen ustedes alguna sugerencia hacia la depuración del código ó forma de analizar/mejorar los tiempos de carga?

Saludos
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 90
Oro
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

$.getJSON optimizar carga

Publicado por xve (222 intervenciones) el 11/07/2014 09:43:22
Hola Txema, la verdad es que hay cosas que pueden hacer que vaya mas o menos lento, como el momento de ejecución, si espera a que cargue la pagina o no, la carga del servidor, etc...

No he visto tu código ni se como lo haces, pero si son paginas PHP, yo lo que haría seria cargar los archivos desde el PHP, no esperar a que se cargue la pagina en el navegador, y luego realizar otra petición al servidor para cargarlos los archivos. Yo los cargaría desde PHP directamente, de esta manera, te ahorras una segunda petición al servidor.

Espero que te sirva...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 19
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

$.getJSON optimizar carga

Publicado por txema (3 intervenciones) el 11/07/2014 12:22:06
Las variables que he utilizado me dan en estimación de carga,más o menos el mismo resultado (tiempo).

De entrada he probado tanto con
<script src="//code.jquery.com/jquery-1.7.2.min.js"></script>
como con
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

En ambos casos, también van (además de otros archivos y librerias de Google Maps ...)
<script src="http://www.google.com/jsapi"></script>

En el javascript, siendo los enlaces hacia páginas internas, las llamadas a los tres archivos, de acuerdo a tres funciones distintas, he probado con los dos métodos (se reiteera del mismo modo la petición de los archivos, cambiando (data)) por (datos), (resultados) aunque forme parte de funciones diferentes (no debería afectar).

Una muestra, en este caso, para ver webcams
1
2
3
4
5
6
7
8
9
10
11
12
13
function verWebcam() {
  if ($("#webcam").is(":checked")) {
    $.getJSON("js/camaras.json", function (data) {
    for (var i = 0; i < data.length; i++) {
/* Recorro el archivo y voy mostrando marcadores y con la opción de ver las cámaras en las ventanas de información */
/* En array var fiestas = new Array(); declarado previamente me permite limpiar el mapa cuando desmarco el checkbox */
        camaras.push(marker);
      }
    });
  } else {
    clearCamaras(); // Llamada a la función para borrar los marcadores de cámaras.

  };
};

Una segunda prueba con el método $.ajax (sirven los mismos comentarios que en el anterior):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function verWebcam() {
    if ($("#webcam").is(":checked")) {
        $.ajax({
            type: "POST",  //  type: "GET",  arroja el mismo resultado

            url: "js/camaras.json",
            dataType: "json",  // Por defecto, se supone async: true,

            success: function (data) {
                for (var i = 0; i < data.length; i++) {
/* Desarrollo del código como en el anterior */
                    camaras.push(marker);
                }
            }
        });
    } else {
        clearCamaras();
    };
};

He probado (aunque la automacización sea muy importante) a generar manualmente archivos .json de los .php generados de base de datos y excle pero el nivel de respuesta apenas mejora mínimamente.

(Tal vez queremos lo imposible, sabiendo que de exel a json mediante php consume muchos recursos).

De todos modos, gracias xve.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 19
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

$.getJSON optimizar carga

Publicado por txema (3 intervenciones) el 11/07/2014 14:00:05
Hola xve:

Basado en tu lógica y revisando mi código, ¡Eureka!, la carga de los marcadores se reduce más del 50 %.

¿Cómo?:
Simplemente cambiando el orden en el control del checkbox:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* Inicialmente, en la carga de página hay una llamada a la función verWebcam() */
/* Por su parte, los checkbox llaman a la función mediante onchange="verWebcam();"

function verWebcam() {

    $.ajax({

        type: "POST",

        url: "js/camaras.json",

        dataType: "json",

        success: function (data) {

            if ($("#webcam").is(":checked")) {  // compruebo en checkbox después de cargar la página

                for (var i = 0; i < data.length; i++) { 

				/* Desarrollo del código */
                    camaras.push(marker);

                }

            } else {

                clearCamaras();

            };

        }

    });

};

Ahora, el clearCamaras(); se hace más lento, pero compensa con creces.

Gracias xve por abrirme a una reflexión obvia.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 90
Oro
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

$.getJSON optimizar carga

Publicado por xve (222 intervenciones) el 12/07/2014 10:56:25
Gracias por compartirlo Txema!!!... me alegro que te haya servido!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar