WebKit과 Blink 이해하기: 당신의 웹 브라우저 뒷면의 엔진

WebKit과 Blink는 모두 웹 브라우저의 렌더링 엔진입니다.

 

WebKit은 최초로 애플에서 개발되어, 애플의 사파리 브라우저에서 사용되었습니다.

이후 구글에서도 이를 기반으로 하는 Chromium 브라우저를 개발하면서 많은 사용자들에게 알려졌습니다.

WebKit은 HTML, CSS 및 JavaScript와 같은 웹 요소를 렌더링하는 역할을 합니다.

WebKit은 각각의 웹 요소들을 렌더링하기 위한 렌더 트리를 구성하고, 이를 화면에 표시하는 역할을 합니다.

 

Blink는 구글이 Chromium 브라우저를 위해 개발한 렌더링 엔진이고

WebKit 과 마찬가지로 HTML, CSS 및 JavaScript와 같은 웹 요소들을 렌더링하는 역할을 합니다.

Blink는 WebKit을 포크(fork)하여 만들어졌으며, WebKit의 문제점을 개선하고 추가 기능을 구현하였습니다.

Blink는 렌더링 엔진으로서 최근 대부분의 크롬 기반 브라우저인 크롬, Microsoft Edge, Opera 등에서 사용됩니다.

렌더링 엔진이란

렌더링 엔진은 웹 브라우저에서 웹 페이지를 화면에 렌더링하기 위해 사용되는 소프트웨어 컴포넌트입니다.

웹 페이지는 HTML, CSS 및 JavaScript와 같은 웹 기술로 작성됩니다.

이러한 웹 기술로 작성된 페이지는 렌더링 엔진에 의해 분석되고, 이를 기반으로 화면에 표시됩니다.

 

렌더링 엔진은 HTML 및 CSS와 같은 웹 페이지의 다양한 구성 요소를 파싱하고,

그것들의 레이아웃을 계산하여 화면에 표시될 위치를 결정합니다.

 

이후 렌더링 엔진은 그래픽 처리 및 렌더링 과정을 수행하고, 웹 페이지를 화면에 렌더링합니다.

렌더링 엔진의 코드 예시

Blink 의 소스코드중 일부분을 보겠습니다.

https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/core/dom/events/event.cc 

third_party/blink/renderer/core/dom/events/event.cc - chromium/src - Git at Google

 

void Event::preventDefault() {
  if (handling_passive_ != PassiveMode::kNotPassive &&
      handling_passive_ != PassiveMode::kNotPassiveDefault) {
    const LocalDOMWindow* window =
        event_path_ ? event_path_->GetWindowEventContext().Window() : nullptr;
    if (window && handling_passive_ == PassiveMode::kPassive) {
      window->PrintErrorMessage(
          "Unable to preventDefault inside passive event listener invocation.");
    }
    return;
  }
  if (cancelable_)
    default_prevented_ = true;
  else
    prevent_default_called_on_uncancelable_event_ = true;
}

해당 코드는 위 링크중 preventDefault() 메서드입니다.

 

이 메서드는 이벤트의 기본 동작을 취소하는 기능을 수행합니다.

이벤트가 cancelable 속성을 가지고 있으면 default_prevented_ 값을 true로 설정하여

이벤트가 기본 동작을 취소했음을 나타냅니다.

 

그렇지 않으면 prevent_default_called_on_uncancelable_event_ 값을 true로 설정하여

이벤트가 cancelable 속성을 가지지 않았음을 나타냅니다.