0
174
ViewsMejore el rendimiento de procesamiento en html grande al transformar (HTML/CSS/JS)
Construí un componente de cronograma para una empresa de construcción en HTML/JS/CSS.
Demostración de trabajo aquí: https://www.conova24.de/performancetest/index.php
El cronograma puede ser grande (el ejemplo tiene 15700 x 7500 píxeles). Por lo tanto, tiene que ser interactivo para que pueda acercar/alejar y desplazarse. Lo logro transformando el div del cronograma con js utilizando DOMMatrix.
¡Hasta aquí todo bien! Cuando se amplía (50 % - 100 %), el renderizado se ejecuta sin problemas. El problema es que la representación en el navegador se ralentiza cuando se aleja y se ve todo el cronograma. Cuando se aleja, el renderizado consume mucha CPU y es muy lento.
¿Tienes alguna idea de cómo puedo mejorar el renderizado? También agregué el atributo "will-change" al div principal y reduje parte del código no utilizado en la programación. ¿Hay otros trucos? ? ¡¿No puedo imaginar que la mayoría de las PC modernas puedan ejecutar juegos 3D pero no pueden manejar un documento html grande?!
1 answers
Answer question0
Noté que agregaste la etiqueta JavaScript a la publicación. ¿Tiene su JavaScript en línea o en un archivo diferente? Si lo tiene en un archivo diferente, asegúrese de incluirlo en el HTML justo encima de la etiqueta </body> . Casi todo el camino hacia abajo debajo de todo el otro contenido. Dado que JavaScript se lee de abajo hacia arriba, ralentizará su sitio si lo vincula en la etiqueta <head> .
Además, aquí hay algunos consejos para optimizar su HTML.
Comprimir HTML del lado del servidor
La compresión GZIP o un modelo de compresión similar permite enviar menos datos al navegador de un usuario final para construir la misma página. El tamaño total de la página comprimida es aproximadamente la mitad del tamaño en MB que el tamaño de la página sin comprimir.
Si no está comprimiendo HTML y otros archivos, es probable que su sitio sea más lento que el de la competencia.
Minificación
La minificación elimina todos los espacios en blanco innecesarios y todos los caracteres de nueva línea, y no es una práctica común en HTML. Si bien puede minimizar HTML si lo desea, puede hacer que el documento sea más difícil de leer, especialmente si la página cambia con frecuencia.
almacenamiento en caché
El almacenamiento en caché tampoco siempre se usa para HTML, porque los archivos HTML tienden a cambiar con frecuencia.
Dicho esto, es posible almacenar HTML en caché. Las reglas de almacenamiento en caché le permiten dictar de dónde solicitarán el documento los navegadores de los usuarios: el caché o el servidor. Tenga cuidado, porque no desea ofrecer una versión antigua de un sitio web. Las páginas HTML estáticas, como las publicaciones de blog, generalmente se pueden almacenar en caché sin efectos adversos.