¿Por qué un UpdatePanel es lento?
Y Bueno esta vez es regresando de Huancayo. Y sigo escribiendo sobre Ajax y el Updatepanel esta vez.
Las razones de motivarme a escribir sobre este tema vienen como ya comentaba de las cosas que encuentro con clientes y desarrollos propios en 3Dev.
Espero aportar algunos tips que ayuden a los desarrolladores a mejorar sus aplicaciones.
Pero todavia queda mucho material por mostrar sobre este tema. En los siguientes posts los veran.
¿Por qué un UpdatePanel es lento?
Cuando el UdpatePanel tiene varios controles, se siente una baja significativa en la perfomance, puesto que se tarda más tiempo en renderizar. Regularmente este escenario es visto con el uso del GridView.
Después de retornar de un postback asíncrono, todos los componentes asociados con elementos en el UpdatePanel son eliminados (disposed)
Cuando el viejo HTML es reemplazado por el nuevo, todos los elementos DOM en el Panel son examinados por Microsoft Ajax, es decir todo control.
Para evitar perder memoria, los componentes asociados con elementos DOM son eliminados (disposed) y entonces destruidos cuando el HTML es reemplazado.
Solución
Lo que debemos hacer es suscribir al evento pageLoading, entonces podemos conseguir la referencia del control y removerlo.
Como resultado el PageRequestManager no iterará a través de los elementos en el GridView. Y el nuevo HTML reemplazará al viejo.
Agregar esta rutina en la pagina aspx donde se encuentra el Gridview
<script type="text/javascript">
var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
pageRequestManager.add_pageLoading(onPageLoading);
function onPageLoading()
{
var gv = $get("GridView1");
if(gv!=null)
{
gv.parentNode.removeNode(gv);
}
}
</script>
Solo para entender mejor, el codigo que se estaria evitando seria el que viene en el archivo MicrosoftAjaxWebForms.debug.js
-
- function Sys$WebForms$PageRequestManager$_updatePanel(updatePanelElement, rendering) {
this._destroyTree(updatePanelElement);
updatePanelElement.innerHTML = rendering;
}
function Sys$WebForms$PageRequestManager$_destroyTree(element) {
if (element.nodeType === 1) {
var childNodes = element.childNodes;
for (var i = childNodes.length - 1; i >= 0; i--) {
var node = childNodes![Idea [I]](/emoticons/emotion-55.gif)
;
if (node.nodeType === 1) {
if (node.dispose && typeof(node.dispose) === “function”) {
node.dispose();
}
else if (node.control && typeof(node.control.dispose) === “function”) {
node.control.dispose();
}
var behaviors = Sys.UI.Behavior.getBehaviors(node);
for (var j = behaviors.length - 1; j >= 0; j–) {
behaviors[j].dispose();
}
this._destroyTree(node);
}
}
}
}
Para terminar he encontrado un enlace interesante sobre el mismo tema pero realizado sobre controles de lista.
Joel