브라우저에서 웹 사이트 콘텐츠를로드하는 방법에 대한 시각적 표현

Question

브라우저에서 콘텐츠를로드하는 방법을 시각적으로 알 수 있습니까? JS 파일의로드 방법과 같은 여러 시나리오를 설명 할 수있는 몇 가지 비디오. html로드를 먼저 수행 한 다음 JS로드를 수행합니까?

일반적으로 내 JS가 페이지 하단에 추가되는 표준을 따르지만 브라우저에서 콘텐츠를로드하는 방법을 전혀 알지 못했고 슬로우 모션과 같은 시각적 표현을보고 싶습니다. 종류의 비디오 예.

감사합니다.

Answer 1

나는 YSlow presentation이 원하는 것이라고 생각합니다. 저는 직접 다른 버전을 보았습니다. 그래서 당신은 정말로 훌륭한 비주얼을 가진 것을 찾을 수 있는지보기 위해 약간 파고들 것입니다. 또한 YSlow 플러그인이나 Safari의 Web Inspector과 같은 다른 분석기를 사용해보세요.

Answer 2

Firebug 또는 Chrome's Dev Tools의 네트워크 탭을 사용하면로드되는 물의 폭포가 표시됩니다.

또한 매우 느린 연결을 통해 Charles과 같은 페이지로드를 테스트하고 연결 속도를 조절할 수 있습니다.