KnockoutJS: Diferencia entre IF y VISIBLE

Hace unas semanas, trabajando en un proyecto con KnockoutJS me hicieron notar que una lista de items que mostraba y ocultaba (si la misma tenía demasiados ítems) demoraba en mostrarlos.

Acá hay una reproducción del problema, con el botón "add 500 ítems" pueden agregar de a 500 rows a una tabla. Ojo, no carguen demasiados ítems, dependiendo del browser y la PC puede colgarse por un buen rato.

En el ejemplo tienen dos links que muestran o la lista de ítems o un texto fijo, un botón para agregar grupos de 500 rows a una tabla. Con 2000 filas debería alcanzar para que noten el efecto de demora. Si cambian a la vista 2, la tabla deja de verse, y si luego vuelven a la vista 1, vuelve a mostrar la tabla... es en este punto que la página "se cuelga".

El problema es como se oculta la lista; estoy usando un binding if de KnockoutJS. Según la documentación de KO, el proposito de el IF es para mostrar una sección del documento (justo lo que quiero hacer), y señala que esto es similar a utilizar el binding visible, salvo que el if elimina los objetos del DOM mientras que el visible utiliza atributos CSS para ocultarlo, por lo que, si tienen un DOM complejo para armar, lo mejor es utilizar visible en lugar de if.

Acá dejo el ejemplo anterior corregido para que funcione más rápido:

Tip KnockoutJS: Si al ocultar / mostrar algo se te cuelga la página, utilizá el binding visible en lugar del if.