Tengo una lista que espero mostrar siempre a un usuario, pero no hasta que el usuario genere ciertos eventos (es decir, hacer clic en algo).

 <ol id='list'> <li class='item'></li> <li class='item'></li> <li class='item'></li> </ol>

Una vez que se realiza una determinada acción, tendré textContent para cada uno de los elementos de la lista, que insertaré en ese punto.

Estoy considerando dos opciones:

1. Sirva la estructura html inicialmente con los elementos ocultos, luego rellene dinámicamente textContent y cambie la visualización a contents con javascript. - Llenar

O

2. Cree y rellene elementos dinámicamente con javascript cuando los necesite. - Rellenar y crear

Debido a que espero que este elemento se muestre repetidamente y luego se oculte, mi intuición dice que, en este caso particular, la primera opción es más eficiente que crear el elemento dinámicamente.

Sin embargo, mi pregunta es en realidad más general, ¿cuál es la mejor práctica para determinar si los elementos deben servirse vacíos inicialmente y llenarse dinámicamente, o crearse y llenarse dinámicamente?

Después de buscar en Internet y SO, no pude encontrar una respuesta con respecto a los principios generales de las mejores prácticas. ¿Existe una mejor práctica/teoría general con respecto a tales casos?

Veo dos extremos:

1. Sirva tanta estructura HTML de antemano como sea posible para eventos futuros, ocultando elementos hasta que se necesiten, cambiando dinámicamente su visualización y llenando contenidos.

2. Sirva una estructura HTML mínima para el uso inicial y cree lo más dinámicamente posible cuando ocurran eventos futuros.

# 1 parecería dar como resultado el tiempo de carga de la página inicial más rápido, pero una interfaz de usuario más lenta cuando ocurren eventos.

El n.º 2 parece tener un tiempo de carga de la página inicial más largo, pero crea menos carga del lado del cliente cuando ocurren eventos de la interfaz de usuario, por lo que es más rápido después de la carga de la página inicial.