Chrome Devtools 타임 라인에서 "Parse HTML"이벤트 란 무엇입니까

Question

Chrome devtools의 Timeline 탭에있는 "Parse HTML"이벤트에 대한 이해는 Chrome에서 html 문자열, 토큰 화, 렉싱 및 DOM 작성을 완료했을 때를 나타냅니다 그것으로부터의 노드.

하지만 타임 라인을 살펴보면 이것이 사실 인 것처럼 보입니다.

"파스 HTML"(파란색 막대) 이벤트가 매우 느립니다. 그것은이 분석의 기원은 어디에서 오는

조사하기 위해 특정 이벤트에 대한 1.07 초 ... 여기

있는 세부 사항을 소요, 나는 (링크를 클릭 VM16602 : 6161) 놀랍게도 일부 HTML 파일을 가리 키지 않습니다. 페이지의 <script> 태그에 삽입 된 일부 자바 스크립트 코드를 가리 킵니다.

DevTools에 표시되는 javascript 파일의 일부 (여기서는 일부)를 보여 드리겠습니다.

나는 혼란 스러워요.

1. 이유는 스크립트 -tag의 내용에 이벤트 포인트 "HTML 구문 분석"을합니까? 나는 약간의 HTML를 가리 키도록 기다리고 있었다 .... 생각 스크립트는 자신이 자신의 이벤트 "스크립트 평가"와 관련된 모든 스크립트는 오렌지해야한다,하지 않는 어떤이 파란색 "구문 분석 HTML"

2. 관련이 있었다 타임 라인에 "Evalute script"이벤트 위에 "Parse HTML"이 표시된다는 의미입니다. 병렬 이벤트가 실행 중임을 의미합니까? 또는 "Parse HTML"이벤트가 이러한 모든 스크립팅 이벤트의 래퍼 역할을하는 "Umbrella 이벤트"일 뿐이라는 것을 의미합니까? 크롬은 ParseHTML 이벤트의 "부분을"인 것으로 스크립팅 이벤트를 제시 것처럼 보인다 내 이벤트의 세부 사항을 더 찾고

... 사실

합니까 <script> 블록을 구문 분석하면 주로 스크립트 평가 이벤트로 구성된 ParseHTML 이벤트가 발생합니까? 아니면 내가 여기서보고 있니?

Answer 1

당신은 당신의 HTML에 인라인 JS를 포함, 또는 일반적인 방법으로 외부 스크립트를 사용하는 경우 :

<script src="foo.js"></script> 

이것은 렌더링 차단 작업입니다. 브라우저는이 스크립트를 계속 실행해야 HTML 구문 분석을 계속할 수 있습니다. 그래서 Parse HTML 이벤트 내에서 JS 실행을 볼 수 있습니다. Parse HTML 이벤트가 (스크립트가 HTML에 포함 되었기 때문에) JS 실행을 트리거했으며 Parse HTML 이벤트는 모든 스크립트가 실행될 때까지 완료되지 않았으며 토큰 화, 렉싱 등도 완료되었습니다.인라인 주입 스크립트를

<script src="foo.js" async></script> 

또는 리팩토링 그들은 단지 load 화재, 또는 나중에 이벤트 있도록 : 그들은 페이지로드를 차단하지 않도록

사용 async 스크립트를 연기한다.

페이지로드 최적화에 대한 자세한 내용은 중요 렌더링 경로 문서의 Adding Interactivity With JS을 참조하십시오.