¿CSS puro con un elemento li de 1000 líneas con texto más rápido que JavaScript puro crea un elemento li con texto?

Creo que te refieres a una salida HTML pura de 1000 elementos li , no CSS puro.

Como está en el documento base que carga, en lugar de ser generado por JavaScript después de la carga, es probable que los elementos de su lista sean más rápidos para estar en el documento base. Sin embargo, su servidor debe tener esos 1000 elementos pregenerados o utilizar un script para generarlos. Si es lo último, la diferencia de velocidad general puede no ser tan grande.

Su JavaScript tendrá que obtener los datos para esos elementos de 1000 li de algún lugar, ya sea una matriz en el script o mediante una llamada AJAX. La matriz en el script simplemente significará que el tamaño total de su documento será similar al de la versión ‘1000 elementos li en HTML’. La llamada AJAX será más lenta, pero debido a que está separando los datos de su documento, podría decirse que es una implementación “mejor”, especialmente en ocasiones donde solo hay unos pocos elementos de la lista en lugar de 1000.

Hay otras consideraciones. Si su documento HTML inicial es pequeño, puede mostrarle algo al usuario mientras carga los elementos de la lista con AJAX. A menudo, la percepción de velocidad es diferente de la realidad, y mostrar que su sitio está haciendo algo le da al usuario una sensación de velocidad que no es la realidad. Poner una lista de 1000 elementos en una sola página también puede ser visualmente malo, y lo que puede hacer es ‘paginar’ la lista de alguna manera, nuevamente ofreciendo oportunidades para cargar solo 25, 50 o 100 elementos a la vez en lugar de todos 1000, y así proporcionan una mayor percepción de la velocidad.

Por cierto, si tiene código para trabajar en esos elementos de la lista, busque controladores de eventos delegados. Es mejor tener un único controlador de eventos para toda la lista que 1000 controladores de eventos.

Sí, es aproximadamente 100 veces más rápido procesar 1000 elementos (div, li, etc.) desde static-html en lugar de desde javascript. ¿Cómo puedo determinar su 100 veces más rápido ? inspeccionando las siguientes 2 páginas web con el navegador Chrome (después de que ambas hayan sido almacenadas en caché).

1. esta página web estática con 9,000 divs se procesa instantáneamente (o al menos menos de 50 ms por lo que mis ojos pueden ver).

2. Esta página web de JavaScript que genera dinámicamente 6,000 divs tarda unos 6 segundos en procesarse (y sí, se ha optimizado utilizando fragmentos dom).

6000ms / 50ms ~ = 100x más rápido