window.{hello}에서 blink 렌더링 엔진까지

<div id="hello">i'm div footer</div>

위 내용이 브라우저에서 실행 시 개발자도구의 콘솔 창에서 window.hello로 접근이 가능하다.

결론

html5의 legacy spec이다

과정

1. http 요청을 통해 html, css, js를 수신한다.

2. 브라우저의 렌더링 엔진은 parser를 사용하여 HTML 문서를 파싱한다.
   window 객체는 이 때 만들어진다.

3. parser는 HTML 태그를 발견 시 DOM node 를 생성하고 트리 구조를 만든다. 이 때 DOM node object 도 만들어진다.
   개발자는 이 객체를 통해서 dom 요소에 접근하고 수정할 수 있게 된다.
   Dom node object 는 blink 엔진이 생성한다.
   이것은 c++ 객체이다.

4. 이 Dom node object는 window 객체의 document에 포함된다.

5. blink 엔진은 id attribute를 가진 dom node를 발견하면 해당 id와 같은 이름의 프로퍼티로 요소에 대한 dom node object (javascript binding)을 window 객체에 추가한다.

6. html 문서를 구문 분석 하면서 script 태그를 만나면 v8엔진이 동작한다.

7. v8 엔진이 script 태그를 분석하면서 js 실행환경을 초기화한다.
   이 과정에서 전역 실행 컨텍스트를 생성한다.
   blink에서 생성한 window 객체 를 전역 실행 컨텍스트로 설정 한다.
   (blink는 window object에 대한 참조를 v8에 전달한다. v8은 이를 실행 컨텍스트에서 전역 객체로 설정한다.)

8. 이제 브라우저의 전역 컨텍스트는 window가 됐다. window.hello에 접근하면 dom node object에 접근할 수 있다.

lagacy spec 이다

https://html.spec.whatwg.org/multipage/nav-history-apis.html#named-access-on-the-window-object
다만 lagacy spec으로 위 방식으로 접근하는 것을 금지하고있다.

javascript binding이 뭘까 ?

JavaScript와 blink 엔진 내부 C++ 코드 간의 인터페이스 역할을 한다.
즉, 자바스크립트 바인딩은 자바스크립트 코드가 C++로 구현된 브라우저의 기본 기능과 상호 작용할 수 있도록 하여 웹 페이지에서 이러한 기능을 사용할 수 있는 방법을 제공한다.
개발자가 js로 window 객체와 상호작용하는 document와 getElementById의 메소드 등 브라우저가 제공하는 web api의 모든 구현체는 실제로 브라우저 엔진 내부에 C++로 구현되어있다.
https://github.com/chromium/chromium/tree/main/third_party/blink/renderer/bindings/core/v8

틀린 내용에 대한 지적은 환영입니다 :D