Anteriormente, utilicé React + AntDesign para implementar una tabla de sincronización simple, pero luego tenía requisitos más complejos y requerí la visualización de 2,000 tareas al mismo tiempo, lo que involucraba problemas de rendimiento. Una demostración que básicamente satisface las siguientes necesidades, pero el mecanismo de representación de React ha causado grandes problemas de rendimiento. muy atascado. Después de pensarlo, decidí usar la banda sonora original JS+CSS+HTML para implementarlo, porque el rendimiento en la banda sonora original JS es la mejor. Hablemos sobre los requisitos de la nueva versión:
La tarea se muestra en una estructura de árbol a la izquierda, plegable
El lado derecho muestra el tiempo que lleva la tarea para ejecutarse
Necesita usar líneas para vincular la relación entre tareas
Puede acercar el derecho de ver el estado de tarea detallado
Al zoom, los gráficos permanecen en una cierta proporción con ambos extremos con el mouse como el centro.
Al escalar el gráfico, significa que el tiempo tardado para la tarea y las coordenadas deben cambiar en consecuencia de acuerdo con la proporción de ampliación de imágenes.
Cuando el mouse se mueve en la tabla de sincronización, una línea parece solicitar la hora y la información actuales.
Dificultades de implementación
Zoom del ratón, zoom del eje X
El zoom del mouse genera la escala del eje x del gráfico de sincronización. La escala de los cuadros de sincronización proporciona tres ideas aquí:
Hacer intercepción de datos, interceptar los datos antes y después de acuerdo con cierto algoritmo, y luego volver a renderizar toda la página
Use la escalax de CSS3 para escalar el DOM de la tabla de sincronización
El cambio real del ancho de la tabla de sincronización DOM, la longitud de la tarea en ejecución, la longitud de las líneas de conexión y el tiempo esperado requerido para la tarea en ejecución se muestran en porcentajes.
Ventajas y desventajas de tres ideas:
Ventajas: no hay necesidad de operar los atributos CSS del DOM, y es más conveniente volver a renderizarlo entre ellos. Desventajas: para usar DOM Redraw, consume un rendimiento severo y es muy lento al renderizar con una gran cantidad de tareas.
Ventajas: simplemente cambie el CSS del DOM, cargue rápidamente y procese más. Desventajas: la informática es problemática.
Ventajas: carga rápida y muy suave. Desventajas: habrá ciertos errores al usar cálculos porcentuales, y los verá cuando se acerca hasta cierto punto. (Se considera todo el asunto, estoy usando el tercer tipo)
// función que calcula el porcentaje de ancho // tiempo de finalización: tiempo de finalización de la tarea // tiempo de inicio: hora de inicio de la tarea // Maxte: valor máximo de todas las tareas // Mintime: valor mínimo de todas las tareas Tiempo de inicio // Tiempo: Todo el orden ascendente de tiempo de inicio de la tarea y tiempo de finalización // task_width: longitud de la tarea, longitud de la línea de conexión horizontal, valor izquierdo de la línea de conexión vertical constthfun = function (endtime, starttime, maxtime, mintime) {const task_width = (((((((((((((( Number (endTime) - Number (startTime)) / ((maxTime || time[time.length - 1]) - (minTime || time[0])) * (body_width - tree_box_dom.offsetWidth)) / dom.offset Width )* 100;Zoom del mouse, mantenga el mouse como centro, se acerca a ambos lados
Ponamos primero el diagrama de proceso de inferencia:
// Explanation of the above figure// dom = dom element of the timing chart// domL1, domeL2 = dom.scrollLeft;// domeL1 represents the previous dom.scrollLeft;// domeL2 represents the current dom.scrollLeft;// scale represents the current The scale of the magnification // scale1 represents the magnification of the last time // tree_dom.offsetWidth represents the width of the tree on the left // clientX1 represents the distance from the left side of the mouse position of the last time = e.clientX - tree_dom.offsetWidth// clientX2 represents the distance from the current mouse position to the timing chart // Scaling with the mouse as the center, the formula is: domL2 = domeL1(scale/scale1) + clientX1(scale/ scale1) - e.clientX + tree_dom.offsetWidth// Formula explanation: // 1. scale/scale1 represents the scaling ratio of this time except for the scaling ratio of the previous one, indicating the current scaling ratio// The width of the left volume will also scale during the second scaling, so the width on the left needs to be Multiply by the scaling scale // The width on the left side of the mouse position distance from the timing chart will also be scaled when zooming, so you should also multiply by the scaling scale // The actual distance on the left side of the mouse position distance from the timing chart at the end is equal to the scaling The length of the left scroll // Page code time_box_parent.scrollLeft = (time_box_parent. scrollleft + e.clientx - tree_box_dom.offsetwidth) * (scale_x / scale_x1) - e.clien tx + tree_box_dom.offsetwidth;
Use conexiones para representar relaciones entre tareas
plan:
Cuando se usa, CSS3 + JS + HTML5 se dibuja con pseudo-elementos.
Envuelva imágenes de ángulo recto con DOM y establezca su posición y altura.
Dibujar con etiquetas
Pros y contras:
Ventajas: No se agregan etiquetas adicionales, lo cual es beneficioso para la representación. Desventajas: la tarea principal genera múltiples tareas infantiles, y es difícil agregar pseudo-clases y establecer la altura y el ancho de las pseudo-clases.
Ventajas: conveniente, simplemente calcule la altura de la tarea infantil desde la tarea principal. Desventajas: cuando hay demasiadas tareas, habrá muchas imágenes, lo que afectará en gran medida el rendimiento.
Ventajas: la altura y la posición de cada elemento se controlan individualmente, con alta capacidad de control y color de retroalimentación.缺点：添加了较多的元素，对渲染产生影响（本人使用的是第三种，这是一个笨方法，有更好方法的大佬，可以提供建议，多谢）
Ideas de implementación:
Use una variable para registrar la profundidad de la jerarquía de cada tarea. Use las variables acumuladas para obtener la altura de la línea vertical y el valor superior de la línea horizontal en una determinada proporción. (Use la función de porcentaje de ancho anterior)
Unidad de tiempo: día, hora, minuto, segundo
Esto es relativamente simple, idea de implementación:
Debido a que la escala del tiempo 4 de esta demostración es una escala, determine si la diferencia entre la marca de tiempo mínima y la marca máxima de tiempo se divide por 4, si todavía hay un día (60 * 60 * 24, convertido a segundos), descendiendo, descendiendo Ordene de una unidad de tiempo grande a pequeña.