2012-03-29 14 views
42

Tengo una página grande y compleja que depende en gran medida de knockout.js. El rendimiento comienza a ser un problema, pero examinar el stack de llamadas y tratar de encontrar los cuellos de botella es un verdadero desafío.Ajuste del rendimiento de una aplicación nocaut: directrices para mejorar los tiempos de respuesta

me di cuenta en otra pregunta (Knockout.js -- understanding foreach and with) que la respuesta aceptada tiene el comentario:

... y yo no sugiere el uso de with donde es necesario alto rendimiento debido a la sobrecarga ...

Suponiendo que la afirmación es verdadera, esta información es realmente útil y no he encontrado una fuente para dichos consejos de rendimiento.

Por lo tanto, mi pregunta es:

¿Existen directrices generales extremidades superiores/que puedo aplicar para ayudar a la realización de mi solicitud antes de adentrarse en la optimización del rendimiento clásico.

+0

que tienen una serie de consejos para compartir , pero no hay tiempo Publicaremos esta noche. –

+0

@RPNiemeyer - Gracias Ryan. Eso seria genial. –

+1

No tengo ninguna sugerencia general, pero es posible que desee probar la versión beta de 2.1, ya que los comentarios sugieren que se han producido algunas mejoras generales de rendimiento. – ShaneBlake

Respuesta

37

Creo que sería demasiado diseñar los consejos que tengo en mente en una respuesta.

Empecé una serie de publicaciones en el blog sobre este tema. La primera publicación es here.

En esta publicación se describe un poco cómo funciona if/with (copia los elementos secundarios como plantilla y vuelve a dibujar utilizando la plantilla cada vez que se activa el enlace) y explica cómo estos enlaces pueden causar repeticiones mucho más a menudo de lo esperado.

Voy a actualizar esta respuesta en futuras publicaciones.

+4

Excelente publicación de blog, Ryan. Implementar las sugerencias en torno a la reordenación de enlaces 'si' ya ha hecho una diferencia medible en mi aplicación. Estoy ansioso por futuras publicaciones de blog sobre este tema. –

+2

[Aquí] (http://www.knockmeout.net/2012/04/knockoutjs-performance-gotcha.html) y [aquí] (http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html) son las últimas publicaciones sobre este tema. – Sherlock

+0

Hola, y gracias por la publicación. Tengo una pregunta. Estoy recuperando una matriz observable de ajax, pero el rendimiento es muy lento para cargar los datos en una tabla. podrías recomendarme de otra manera, por favor? – UserEsp

6

Una de las trampas más grandes que he encontrado (y que no se ve discutido en otra parte) es que Knockout reevalúa cada vinculante en un elemento cada vez cualquier vinculante sobre el elemento cambia.

Normalmente no es un gran problema, pero para enlaces que suelen ser caros (por ejemplo, template), puede crear problemas de rendimiento significativos.

Acople enlaces que representan el contenido/hijos (template, foreach, etc.) a un elemento virtual (utilizando el containerless control flow syntax) si no son la única unión en el elemento.

+1

Esta prueba jsperf muestra cuán caro es el direccionamiento indirecto de una plantilla. http://jsperf.com/knockout-template-binding-performance/2 –

+0

RP Niemeyer hizo una publicación en un blog sobre este tema: http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3- all-bindings.html –

+3

Knockout 3.0 corrige este problema, por cierto: http://blog.stevensanderson.com/2013/07/09/knockout-v2-3-0-released-v3-0-0-beta-available/ – Jonathan

0

Creo mapeo puede ayudar también puede seguir esta prueba y ver la diferencia entre el uso de jquert mapa, mapa nocaut knockout-map-vs-jquery-map

Cuando empiece a usar la cartografía en gran medida ObservableArrays vuelto crucial

Cuestiones relacionadas