javascript - hacer - interfaz web php
Las aplicaciones sencha se ralentizan al renderizar en el hilo de la interfaz de usuario (3)
Estoy creando la aplicación web sencha usando sencha touch 2.2.1. En mi aplicación tengo una pantalla que consiste en un contenedor donde agregué varios paneles. Un solo panel consta de dos paneles, un panel superior y el panel interior.
Al inicializar la página, estoy llamando a ajax api para obtener una lista de datos para el panel superior de cada elemento en el contenedor. y en el panel superior al hacer clic, estoy llamando a api para ese elemento para obtener datos para el panel interno. Al finalizar la llamada a la API, estoy renderizando los datos en el panel interno y haciendo visible ese panel. Este código es el mismo para todos los elementos en un contenedor en el panel superior al que se hace clic.
También hay un botón en la parte superior para ''expandir todo'' que llamará api para todos los elementos en un bucle for uno tras uno y datos de procesamiento para cada panel interno. Primero llamo a una api y luego, cuando obtengo una respuesta, la estoy almacenando en la tienda y procesando en la pantalla, luego llamo a la siguiente api, así para todos los artículos.
getDetailData:function(params){
var detailStore=Ext.getStore(''DetailData'');
detailStore.load({
callback:function(data,opt,success) {
detailStore.storeDetailData(data);
_this.onShowDetailData(data);
// now call next api from here until all items data fetched and displayed
}
});
}
En este caso, la obtención de todos los datos de elementos y la representación en el subproceso de la interfaz de usuario lleva más tiempo y la aplicación se ralentiza.
Además, al renderizar datos, debo aplicar filtros en la tienda para filtrar los datos antes de representar los datos cada vez.
Quería saber cómo debo hacer este trabajo de procesamiento y procesamiento. Como ajax api call y la captura de datos desde el servidor no está tomando más tiempo, pero el procesamiento y la renderización están tomando más tiempo.
Cualquier sugerencia sobre esto,
Gracias
En primer lugar, yo haría el perfil como se sugirió anteriormente. Debe averiguar si las llamadas a la API o la presentación del diseño es lenta.
Según mi experiencia, la mayoría de los problemas de rendimiento provienen de la compleja estructura DOM. Sencha está agregando un gran número de DIV para cada componente que agrega a la pantalla (solo verifique la fuente resultante). Esto tiene un efecto significativo en el rendimiento de la aplicación.
Si encuentra que su diseño complejo es la causa de los problemas de rendimiento, puede reconsiderar sus diseños de pantalla o reemplazar algunos de los controles de sencha con HTML simple representado en el tpl de un contenedor.
Pensaría separar la creación de su panel de su población de datos. Es decir, cree sus paneles cuando su aplicación se está cargando, luego, cuando haga su XHR, puede simplemente insertar los datos en los paneles y mostrarlos, en lugar de la sobrecarga de la llamada AJAX, la creación del panel y la representación del widget al mismo tiempo.
Puede intentar resolver el problema creando un perfil de JavaScript con la pestaña Perfiles de las Herramientas de desarrollo de Chrome o con herramientas externas como el generador de perfiles de Compuware (lo usé cuando era dynaTrace):
Sin embargo, según mi experiencia, es probable que dediques mucho tiempo a los métodos de Sencha, lo que dificulta ver qué cambios son necesarios.
Por último, los navegadores más antiguos realizarán esta representación mucho más lento que los navegadores más nuevos. Si puede evitar el soporte de IE 6, 7 y 8, ¡su aplicación Sencha será mucho más receptiva!
Sugiero no usar paneles, a menos que usted también tenga. Con un gran número de elementos, será mejor con una lista de vista de datos con infinito marcado como verdadero . Esto se renderizará mucho más rápido y puede vincular sus interacciones con cada elemento en la lista. Si solo estás haciendo un marcado, debería ser mucho más rápido. De lo contrario, cada adición requerirá diseño.