event loop explorer

이벤트 루프 탐색기

프로젝트에 대해

Event Loop Explorer는 브라우저에서 JavaScript 코드가 어떻게 실행되는지 이해하는 데 도움이되는 도구입니다. 통화 스택, 웹 API, 작업, 마이크로 마스크 및 렌더링 단계를 시각화합니다.

스크린 샷 :

데모:

https://vault-developer.github.io/event-roop-explorer/에서 자유롭게 시도하십시오.

알려진 한계 및 단순화 :

• JavaScript 코드는 Acorn Parser를 사용하여 AST로 구문 분석 한 다음 이벤트 순서가 생성됩니다. 모든 기본 예제는 예상대로 작동하며 코드를 수정하고 작동 방식을 확인할 수 있습니다. 그러나 모든 사례가 보장되는 것은 아닙니다. 비동기/기다려, 복잡한 약속, SetInterval, 과제 연산자는 예상대로 작동하지 않습니다.
• 렌더 단계는 일반적으로 16.66ms (60fps)마다 트리거되지만이 프로젝트에서는 두 번째 이벤트 루프 서클마다 단순화됩니다. 우리는 단순성을 위해 모든 원을 360ms로 계산하고 있으므로 렌더 단계는 720ms마다 트리거됩니다.
• UI는 모바일 친화적이지 않으므로 데스크탑 장치 만 사용하십시오.

기부금:

기여하려면이 저장소를 자유롭게 포크하고 풀 요청을 작성하십시오.
"미래 계획"섹션에는 많은 주제가 있습니다.
질문이나 아이디어가 있습니까?
토론 세션에서 자유롭게 제기 하시겠습니까?

로컬 출시 :

 git clone [email protected]:vault-developer/event-loop-explorer.git

cd event-loop-explorer

yarn install

yarn dev

향후 계획 :

• 이벤트 루프 휠에서 지연 애니메이션 수정;
• 스텝 포워드 기능을 추가하십시오.
• PR을 확인하려면 GitHub 조치를 추가하십시오.
• 모바일 레이아웃을보다 사용자 친화적으로 만듭니다.
• 코드 유효성 검사 구문 추가;
• new Promise((res) => {res(console.log(4))}) ;
• Console.log 출력 및 모든 단계에 대한 포괄적 인 로그를 전환하려면 콘솔에 토글을 추가하십시오.
• 단위 테스트 추가;
• 코드를 정리하고 Todos를 제거하십시오.

영감 :

• Andrew Dillon의 JS Visualiser
• Jake Archibald가 JSConf.asia 2018에서 발표 한 "In the Loop"