이전에는 REACT + AntDesign을 사용하여 간단한 타이밍 차트를 구현했지만 나중에 더 복잡한 요구 사항이 있었으며 동시에 2,000 개의 작업을 표시해야했습니다. 기본적으로 다음 요구 사항을 충족하지만 React의 렌더링 메커니즘은 Chrome의 자체 성능을 사용하여 주요 성능 문제를 일으켰습니다. 첫 번째 데모 렌더링은 10 초 정도로 높으며 후속 작업이 전체 페이지를 매우 많이 만듭니다. 갇힌. 그것에 대해 생각한 후, 나는 원본 사운드 트랙 JS+CSS+HTML을 사용하여 구현하기로 결정했습니다. 원래 사운드 트랙 JS의 성능이 가장 좋기 때문입니다. 새 버전의 요구 사항에 대해 이야기 해 봅시다.
작업은 왼쪽의 트리 구조에 표시되고 접을 수 있습니다.
오른쪽은 작업이 실행하는 데 걸리는 시간을 보여줍니다.
작업 간의 관계를 연결하기 위해 라인을 사용해야합니다.
상세한 작업 상태를 볼 수 있도록 오른쪽을 확대 할 수 있습니다.
축소하면 그래픽이 중앙으로 마우스를 사용하여 양쪽에 일정 비율이 유지됩니다.
그래프를 확장 할 때는 작업에 취한 시간과 좌표가 이미지 확대의 비율에 따라 그에 따라 그에 따라 변경해야한다는 것을 의미합니다.
마우스가 타이밍 차트에서 이동하면 현재 시간과 정보를 제출하는 선이 나타납니다.
구현 어려움
마우스 줌, X 축 줌
마우스 줌은 타이밍 차트의 x 축 스케일링을 생성합니다. 타이밍 차트의 스케일링은 여기에 세 가지 아이디어를 제공합니다.
데이터 가로 채기를하고 특정 알고리즘에 따라 데이터를 가로 채고 전체 페이지를 다시 렌더링합니다.
CSS3의 scalex를 사용하여 타이밍 차트의 DOM을 확장하십시오.
타이밍 차트 DOM의 폭의 실제 변경, 작업 실행 길이, 연결 라인의 길이 및 실행중인 작업에 필요한 예상 시간은 모두 백분율로 표시됩니다.
세 가지 아이디어의 장점과 단점 :
장점 : DOM의 CSS 속성을 작동 할 필요가 없으며, 그들 사이에 다시 렌더링하는 것이 더 편리합니다. 단점 : Dom Redraw를 사용하기 위해서는 심각한 성능을 소비하며 많은 작업으로 렌더링 할 때 매우 느립니다.
장점 : DOM의 CSS를 변경하고 빠르게로드하고 더 많은 처리를하십시오. 단점 : Computing은 x 축을 확대 할 때 수직 연결 라인이 넓어지고 글꼴이 수평으로 늘어날 것이며 모든 것이 역전되어야한다는 것을 알 수 있습니다.
장점 : 빠른 로딩과 매우 매끄럽게 요소의 비율을 한 번에 계산하면 후속 작업을 계산할 필요가 없습니다. 단점 : 백분율 계산을 사용할 때 특정 오류가 발생하며 특정 범위로 확대 할 때이를 볼 수 있습니다. (모든 문제가 고려됩니다. 세 번째 유형을 사용하고 있습니다)
// 폭 작업 시작 시간 및 종료 시간의 모든 오름차순 순서 : 작업 길이, 수평 연결 라인의 길이, 왼쪽 값 const widthfun = function (endtime, starttime, maxtime, mintime) {const task_width = ((() 숫자 (endtime) - 번호 (starttime)) / ((Maxtime || time [time.length -1]) - (Mintime || time [0]) * (body_width -tree_box_dom.offsetwidth)) / dom.offset 너비 )* 100;마우스 확대 / 축소, 마우스를 중심으로 유지하고 양쪽을 확대하십시오.
추론 프로세스 다이어그램을 먼저 넣어 봅시다.
// 위의 그림의 설명 // dom = dom = dom 요소 // doml1, domel2 = dom.scrollleft; // domel1은 이전 dom.scrollleft; // domel2를 나타냅니다. 전류를 나타내는 배율의 척도 // scale1은 마지막 시간의 배율을 나타냅니다. // tree_dom.offsetwidth는 왼쪽의 트리 너비를 나타냅니다. clientx1은 마지막 시간의 마우스 위치의 왼쪽으로부터의 거리를 나타냅니다. = e.clientx -tree_dom.offsetwidth // clientx2는 현재 마우스 위치에서 타이밍 차트까지의 거리를 나타냅니다. // 마우스로 마우스로 스케일링하는 것은 다음과 같습니다. scale1) -.clientx + tree_dom.offsetwidth // 공식 설명 : // 1. scale/scale1은 이전의 스케일링 비율을 나타내는이 시간의 스케일링 비율을 나타냅니다. 두 번째 스케일링 중에도 왼쪽 볼륨이 스케일링되므로 왼쪽의 너비는 스케일링 스케일을 곱해야합니다. // 타이밍 차트에서 마우스 위치의 왼쪽의 너비는 확대 시절에도 스케일링됩니다. 또한 스케일링 스케일을 곱해야합니다. // 끝의 타이밍 차트로부터 마우스 위치의 왼쪽의 실제 거리는 왼쪽 스크롤의 길이와 동일합니다. scrollleft + e.clientx -tree_box_dom.offsetwidth) * (scale_x / scale_x1) -E.Clien tx + tree_box_dom.offsetWidth;
연결을 사용하여 작업 간의 관계를 나타냅니다
계획:
사용될 때, CSS3 + JS + HTML5는 의사 요소로 그려집니다.
Dom으로 오른쪽 앵글 사진을 감싸고 위치와 높이를 설정하십시오.
레이블로 그리십시오
장단점 :
장점 : 추가 태그가 추가되지 않아 렌더링에 유리합니다. 단점 : 부모 작업은 여러 자식 작업을 생성하며 의사 클래스를 추가하고 의사 클래스의 높이와 너비를 설정하기가 어렵습니다.
장점 : 편리하고, 부모 작업에서 자녀 작업의 높이를 계산하십시오. 단점 : 작업이 너무 많으면 많은 사진이있어 성능에 큰 영향을 미칩니다.
장점 : 각 요소의 높이와 위치는 개별적으로 제어되며 제어 성이 높고 피드백 색상을 추가 할 수 있습니다. 단점 : 렌더링에 영향을 미치는 더 많은 요소가 추가되었습니다 (저는 멍청한 방법 인 세 번째 유형을 사용하고 있습니다. 더 나은 방법을 가진 큰 사람은 제안을 제공 할 수 있습니다. 감사합니다).
구현 아이디어 :
변수를 사용하여 각 작업의 계층 깊이를 기록하십시오. 계층 깊이는 현재 작업의 상위 작업, 즉 작업이 발생하는 현재 작업 및 동일한 레벨의 하위 작업이 누적 된 작업을 수행합니다. 누적 된 변수를 사용하여 수직 선의 높이와 수평선의 최고 값을 특정 비율로 얻으십시오. (위의 너비 백분율 기능 사용)
시간 단위 : 일, 시간, 분, 두 번째
이것은 비교적 간단한 구현 아이디어입니다.
이 데모의 시간 4 척도는 스케일이기 때문에 최소 타임 스탬프와 최대 타임 스탬프의 차이가 4로 나뉘어 지는지 여부를 결정합니다. 대형에서 작은 것까지 주문 시간 단위를 얻습니다.