La meta:

Optimice una página web que necesita mostrar una gran cantidad de datos de texto (25mb +) en untextarea o contenido editablediv, sin perder demasiado rendimiento.

Actualmente, cargar un archivo de 10 MB lleva unos 3 segundos en Chrome. Me gustaría que esto sea 1 segundo máximo.

Ideas e intentos:

Estoy cargando archivos de texto locales desde la computadora de un usuario usando<input type="file"> y no tengo problemas para cargar archivos grandes directamente en la memoria. Sin embargo, tan pronto como intento mostrar estos datos de texto en un área de texto, naturalmente me encuentro con problemas de rendimiento.

Tengo el corrector ortográfico, el uso de mayúsculas automático y la función de autocompletar todo deshabilitado, y esto sin duda ayudó, sin embargo, me gustaría minimizar la cantidad de retraso al intentar renderizar archivos grandes (los archivos de más de 10 mb, máximo de 100 mb serían ideales).

<textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">

Una idea que tuve fue renderizar solo 100 líneas antes y 100 líneas después de la línea actual, y cuando los usuarios desplazan el área de texto, simplemente cambiaría los datos que se muestran. Puedo intercambiar unos cientos de líneas sin ningún retraso notable, pero cientos de miles bloquean toda la página.

También estaba mirando proyectos comoCodeMirror que se usa en algunos editores de texto basados en JavaScript y herramientas de desarrollo de Chrome. Sin embargo, una prueba rápida mostró problemas de rendimiento similares al cargar inicialmente grandes cantidades de texto.

Otra idea era usarhighlight.js para representar los elementos dom de texto, pero también noté grandes cantidades de grandes cuando se trata de miles de elementos DOM.

Este sitio parece abordar un ejemplo similar creando y mostrando dinámicamente los elementos dom, en lugar de intentar renderizarlos todos a la vez.

Descubrí que si el número de registros en la cuadrícula aumenta más que unos pocos miles, la cuadrícula se vuelve muy lenta porque la velocidad de representación está directamente relacionada con el número de nodos en el DOM. Si el número de nodos en el DOM es más de 40-50k (dependiendo de la configuración de su computadora y la cantidad de memoria), su navegador se bloqueará o dejará de responder.

Entonces, decidí emprender una búsqueda para hacer dos cosas: (1) crear dinámicamente registros a medida que el usuario se desplaza (2) optimizar la cuadrícula para manejar grandes conjuntos de datos. Después de algunas semanas de trabajo, la red estaba optimizada y lista para la prueba.

Creo que esto es similar a mi primera idea, pero aún no he probado este enfoque.

Espero que alguien que tenga experiencia con algo similar pueda ofrecer algún consejo sobre qué camino tomar u ofrecer algunas ideas adicionales.

Antes de que alguien pregunte, no puedono muestra estos datos, debe ser editable por el usuario, no necesita resaltar código ni mostrar números de línea. Por último, todo el archivo de texto se está cargando con un FileReader en una variable.

Me gustaría evitar subir el archivo a mi servidor web si es posible por cuestiones de privacidad y NDA del usuario final.

Configuración del servidor: Ubuntu 16.04 LAPP Stack con Laravel 5.4, abierto a soluciones NodeJS. El uso de jQuery está permitido.

Soluciones propuestas):

Carga lenta - solo se muestran, por ejemplo, 300 fragmentos de línea a la vez a medida que el usuario se desplaza. Sin embargo, necesitaría hacer que la barra de desplazamiento tenga la altura adecuada de antemano en este caso. - Además, debe descargar estos "fragmentos" a medida que los usuarios se desplazan para reducir la carga total de representación DOM.

Código Pseduo:

c_chunk = scrollpos / scrollheight * totalChunks;
chunk_block = chunk[c_chunk--] + chunk[c_chunk] + chunk[c_chunk++];
my_textarea.val(chunk_block);

¿Alguna idea sobre este método?

Gracias a todos.