none
PROBLEMAS DE LENTITUD AL MOSTRAR MAS DE 500 REGISTROS A EN UNA DATATABLE RRS feed

  • Pregunta

  • buenos dias. tengo un problema con lo siguiente.

    tengo una funcion que me carga todas las IP que estan en mi base de datos:

    // LISTAR IPs CAPA DATOS
            public List<Ips> Listar_IPs()
            {
                List<Ips> Lista = new List<Ips>();
                SqlConnection con = null;
                SqlCommand cmd = null;
                SqlDataReader dr = null;
                try
                {
                    con = Conexion.getInstance().ConnDB();
                    cmd = new SqlCommand("Listar_Ips", con);
                    cmd.CommandType = CommandType.StoredProcedure;
                    con.Open();
                    dr = cmd.ExecuteReader();
                    while (dr.Read())
                    {
                        //crear objetos de tipo de documento
                        Ips objip = new Ips();
                        objip.Codigo = Convert.ToInt32(dr["Codigo"].ToString());
                        objip.Ip = dr["Ip"].ToString();
                        objip.CodFun =Convert.ToInt32(dr["CodFun"].ToString());
                        objip.Tecnico = dr["Tecnico"].ToString();
                        objip.Enuso =Convert.ToBoolean(dr["Enuso"].ToString());

                        //añadir a la lista de objetos
                        Lista.Add(objip);
                    }
                }
                catch (Exception ex)
                {
                    throw ex;
                }
                finally
                {
                    con.Close();
                }
                return Lista;
            }

    //LISTAR IPs  LOGICA DEL NEGOCIO
            public List<Ips> Listar_Ips()
            {
                try
                {
                    return IpsDAO.getInstance().Listar_IPs();
                }
                catch (Exception ex)
                {
                    throw ex;
                }
            }

           //METODO QUE LISTA LAS IPs ESTE ES MI METODO QUE UTILIZO PARA ENVIAR LA INFORMACION A JAVASCRIPT
            [WebMethod]
            public static List<Ips> Listar_IPs()
            {
                List<Ips> Lista = null;
                try
                {
                    Lista = IpsLN.getInstance().Listar_Ips();
                }
                catch (Exception ex)
                {
                    Lista = new List<Ips>();
                    throw ex;
                }
                return Lista;
            }

    en mi archivo JS tengo la siguiente funcion para llenar mi datatable con los datos

                

    function sendDataAjaxIPs() {
        $.ajax({
            type: "POST",
            url: "ControlIPs.aspx/Listar_IPs",
            data: {},
            contentType: 'application/json; charset=utf-8',
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(xhr.status + " \n" + xhr.responseText, "\n" + thrownError);
            },
            success: function (data) {            
                addRowDT(data.d);

            }
        });
    }

    function addRowDT(data) {
        tabla = $("#tbl_ips").DataTable({
            "aaSorting": [[0, 'desc']],
            "bSort": true,
            "bDestroy": true,
            "aoColumns": [
                null,
                null,
                null,
                null,
                null,
                { "bSortable": false }
            ]
        });

        tabla.fnClearTable();
        var usosino;
        for (var i = 0; i < data.length; i++) {
            if (data[i].Enuso === true) {
                usosino = "Si";
            }
            else {
                usosino = "No";
            }
            tabla.fnAddData([
                data[i].Codigo,
                data[i].Ip,
                data[i].CodFun,
                data[i].Tecnico,
                usosino,
                '<button type="button" value="Actualizar" title="Actualizar" class="btn btn-primary btn-edit"><i class="fa fa-check-square-o" aria-hidden="true"></i></button>' +
                '<button type="button" value="Eliminar" title="Eliminar" class="btn btn-danger btn-delete"><i class="fa fa-minus-square-o" aria-hidden="true"></i></button>'
            ]);
        }
    }

    el tema es que cuando cargo mas de 500 registros, el proceso se demora mas de 2 minutos.

    necesito ayuda para saber como optimizar este proceso sin necesidad de limitar el numero de registros

    Gracias

    miércoles, 27 de noviembre de 2019 13:56

Todas las respuestas

  • El primer paso es buscar dónde está el cuello de botella, cronometrando cuánto tarda cada uno de los pasos que sigue la obtención de tu tabla.

    Lo primero, mira cuánto tarda el SP que invocas en la base de datos. En principio, si solo extrae datos de una tabla, no hay motivo para que se demore con solo 500 registros. Pero no obstante, compruébalo.

    El siguiente paso es la carga de datos en el List<Ips>. En principio, con solo 500 registros, cabría esperar que esto fuese rapidísimo, pero merece la pena comprobarlo porque a veces te llevas sorpresas, así que pon en el fuente algo de código de "logueo" que te indique el tiempo que tarda en total.

    Después los datos van al WebMethod que te transfiere los datos al navegador. No creo que pierda tiempo aquí, en principo no hace nada costoso.

    Después está el tiempo de transmisión de los datos al navegador. Esto puedes medirlo con la función de "captura de red" de la F12 en el navegador. Ahí te dirá cuál es el volumen de datos y cuánto tardó en descargarlos.

    Finalmente, si todo lo anterior es razonablemente rápido (y cabe espear que lo sea, salvo error no hay nada en ese circuito que daba tardar más de una fracción de seguno con solo 500 registros), entonces solo nos queda el código javascript. Aquí sí que es posible que pierda tiempoñ generar dinámicamente una tabla de 500 registros en el navegador puede ser costoso, sobre todo si la está renderizando sobre la marcha a cada cambio que le aplicas. Pero llegados a este punto ya se vuelve meramente un problema de código cliente, no es ya una cuestión de ASP.NET. Si efectivamente tus mediciones confirman que el cuello de botella está en esta parte, entonces probablemente sería adecuado plantear una consulta en algún foro especializado en javascript, acerca de cómo crear una tabla dinámicamente lo más rápido posible.

    miércoles, 27 de noviembre de 2019 15:46
  • la lentitud se evidencia en el llenado de la tabla, la cual se realiza a traves de Javascrip

    function sendDataAjaxIPs() {
        $.ajax({
            type: "POST",
            url: "ControlIPs.aspx/Listar_IPs",
            data: {},
            contentType: 'application/json; charset=utf-8',
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(xhr.status + " \n" + xhr.responseText, "\n" + thrownError);
            },
            success: function (data) {            
                addRowDT(data.d);

            }
        });
    }

    function addRowDT(data) {
        tabla = $("#tbl_ips").DataTable({
            "aaSorting": [[0, 'desc']],
            "bSort": true,
            "bDestroy": true,
            "aoColumns": [
                null,
                null,
                null,
                null,
                null,
                { "bSortable": false }
            ]
        });

        tabla.fnClearTable();
        var usosino;
        for (var i = 0; i < data.length; i++) {
            if (data[i].Enuso === true) {
                usosino = "Si";
            }
            else {
                usosino = "No";
            }
            tabla.fnAddData([
                data[i].Codigo,
                data[i].Ip,
                data[i].CodFun,
                data[i].Tecnico,
                usosino,
                '<button type="button" value="Actualizar" title="Actualizar" class="btn btn-primary btn-edit"><i class="fa fa-check-square-o" aria-hidden="true"></i></button>' +
                '<button type="button" value="Eliminar" title="Eliminar" class="btn btn-danger btn-delete"><i class="fa fa-minus-square-o" aria-hidden="true"></i></button>'
            ]);
        }
    }

    aqui es donde todo se hace lento

    jueves, 9 de enero de 2020 21:51
  • hola

    >> el tema es que cuando cargo mas de 500 registros, el proceso se demora mas de 2 minutos.

    tiene sentido cargar 500 registros ? que persona humana va a tener la capacidad de trabajar o serle util esa cantidad de datos

    cuando la informacion es mucha deberias paginar los datos y aplicar mejores filtros para que sume valor al usuario de la aplicacion, listar 500 registros no sirve para nada, solo para que la app demore

    No se el procedure como lo has creado, pero deberia pasarle como dato el nro de pagina y la cantidad de items por pagina que quieres recuperar y solo recuperar y enviar al cliente ese grupo de datos

    Tampoco se porque creas una tabla de sa forma en lugar de usar algo orientado a jquery, como ser

    datatables

    jsGrid

    usa un grid basado en jquery al cual le asignas directo el json, no renderices una tabla de esa forma creando el html por cada linea, no es performante

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    jueves, 9 de enero de 2020 23:41