jquery - El rendimiento se deteriora después de la devolución de datos asincrónica: el desplazamiento se vuelve horrible

asp.net updatepanel (3)

El rendimiento de obtener los datos está absolutamente bien, ese no es mi problema.
Mi problema ahora es cuando me desplazo hacia arriba y abajo, el rendimiento de la página está comenzando a degradarse.

¿Estás seguro de que esto se debe a la devolución de datos asincrónica? ¿Cuántos datos intenta mostrar en la página al mismo tiempo?

Si el navegador está realizando varias devoluciones de datos, entonces los paneles de actualización probablemente sean los culpables. Pero parece que la página se carga y se actualiza bien, y el navegador está teniendo problemas para renderizar el documento. No hay forma de que podamos saberlo sin detalles más específicos sobre la página.

Mi sugerencia es que posiblemente no sea un problema del panel de actualización, sino un problema de paginación. ¿Tiene alguna opción para dividir sus datos y solo mostrar algunos fragmentos a la vez?

Me han asignado la tarea de ayudar a mejorar el rendimiento en una aplicación de formularios web asp.net (4.5) que, lamentablemente, utiliza los paneles de actualización. Son realmente malvados. Pero deshacerse de ellos no es tan simple como el sistema está atado a un montón de cosas. He podido deshacerme de algunos de los paneles de actualización que eran innecesarios.

En cualquier caso, este es un sistema de tipo CRM, así que imagine que va a una página de detalles de, por ejemplo, un cliente. Dentro de esta página de detalles de un cliente tiene información general sobre el cliente. En la parte inferior de la página hay pestañas. Por ejemplo, una página de detalles del cliente puede tener pestañas para "Contactos" que funcionan para ese cliente, "Productos" que el cliente vende, "Calificaciones" para el cliente, etc. Cada una de estas pestañas es básicamente un div y se envuelve alrededor de un panel de actualización. Inicialmente solo se carga la primera pestaña. Al hacer clic en la pestaña, se realiza una llamada asíncrona que carga la pestaña con datos. Básicamente tienes una página que se parece a esto: pseudocódigo:

updatepanel for entire page html  updatepanel for contacts sub panel contacts html /updatepanel updatepanel for products sub panel products html /update panel updatepanel for ratings sub panel ratings html /update panel /updatepanel end the entire page

Las pestañas mencionadas son divs y son básicamente pestañas de jQuery. Al principio, me di cuenta de que cada panel de actualización en la página tenía su modo de updatemode configurado para always . Inmediatamente cambié el modo de updatemode a conditional y llamé explícitamente a Update() cuando necesitaba que se actualizara el panel de actualización. Una mejora muy pequeña. Luego noté que el panel de actualización inicial (el que se usó para toda la página) tenía su propiedad ChildrenAsTrigger establecida en verdadero ... así que cambié eso a falso. Mejora muy pequeña.

Luego comencé a probar la página de nuevo para ver cómo el rendimiento era ... todavía muy malo. De hecho, cuando la página se carga por primera vez y la primera pestaña carga la página es muy rápida. Cuando hago clic en otra pestaña (carga los datos del panel secundario a través de un proceso asíncrono llamando a un evento del lado del servidor de botones ocultos para cargar los datos). Así que esto definitivamente no es cierto ajax pero hey es lo que tenemos. Básicamente, el evento del lado del servidor simplemente vincula algunos datos a una cuadrícula en esa pestaña. El rendimiento de obtener los datos está absolutamente bien, ese no es mi problema.

Mi problema ahora es cuando me desplazo hacia arriba y abajo, el rendimiento de la página está comenzando a degradarse. Una vez que hago clic en otra pestaña u otras 2-3 pestañas, el rendimiento para obtener los datos sigue siendo increíble ... pero después de obtener los datos y desplazar la página es horrible. La barra de desplazamiento incluso salta a veces, ya que no puede seguir la velocidad con la que quiero navegar por la página.

No sé qué más hacer para acelerar esta página, aparte de desechar los paneles de actualización por completo, sin embargo, hay mucho trabajo y tiempo para hacerlo. Hasta ahora he intentado lo siguiente:

Se eliminaron tantos paneles de actualización como no se necesitaba.
Cambio del modo de actualización de always a conditional
Cambiamos los childrenastriggers a los false
solucionado cualquier error / optimizado tanto como pude en el lado de asp.net / js

¿Qué más puedo hacer para solucionar esto o qué más podría estar causando el retraso lento? Como se mencionó, la obtención de datos es muy rápida, es cuando me muevo hacia arriba y hacia abajo (desplazar) la página es lo que está muy entrecortado. Seguí la recomendación de msdn sobre cómo se actualizan los paneles de actualización.

Editar actualización

Todavía estoy trabajando en esto para tratar de encontrar una mejor manera. Intenté usar esto:

http://aspadvice.com/blogs/robertb/archive/2005/11/16/13835.aspx

Lo que me permite tratar el estado de vista en el lado del servidor. El efecto es que el marcado html se ha eliminado de toda la información del estado de la vista, sin embargo, el problema que todavía no se ha resuelto es el hecho de que a medida que continúo realizando devoluciones de datos asincrónicas por eventos de activación en la página, mi página se ralentiza. Lo que quiero decir con ralentización es que a medida que me desplazo hacia arriba / abajo de la página, el rendimiento es realmente malo. La barra de desplazamiento básicamente tiene que alcanzarme mientras me desplazo. Así que incluso deshaciéndome de la información del estado de visualización generado en la página del lado del cliente todavía me encuentro con el problema de que la barra de desplazamiento es muy lenta. Esto nuevamente ocurre debido a eventos en la página, como un filtro / evento de clic o una ordenación o un cambio de índice de página en una cuadrícula (básicamente cualquier cosa que cause una devolución de datos asíncrona).

Si alguien tiene ideas adicionales, siéntase libre de participar.

Bueno, finalmente conseguí este trabajo ... el problema estaba relacionado con otra pregunta reciente que había encontrado aquí: ¿Por qué le dice a jQuery que haga clic en el botón de enlace que ralentiza mi página?

La idea principal era que estaba suscribiendo eventos en controles que estaban fuera de mi panel de actualización. En efecto, duplicar, triplicar o adjuntar n eventos basados en la reinscripción en mi jquery. Ver mi enlace publicado.

Tuve grandes problemas de rendimiento con vistas en árbol con datos de gran tamaño dentro de un panel de actualización. Si tiene vistas en árbol, puede "hacer" que la página obtenga una devolución completa después de la devolución deseada. El rastreo contará la historia. En última instancia, escribí un envoltorio de ajax e hice las devoluciones parciales a mí mismo. Treeview puede ser un punk.

Si no tienes una vista en árbol, por favor ignórala.

edición: si importa, tuve alrededor de 250 elementos en la vista de árbol de hasta 4 de profundidad.