웹의 특별한 능력 중 하나는 구성 가능성입니다. 웹페이지에는 여러 출처의 다양한 리소스가 포함될 수 있습니다.
Blink는 Chrome, Android WebView, Microsoft Edge, Opera, Brave를 비롯한 Chromium 기반 브라우저의 렌더링 엔진 역할을 합니다.
렌더링 엔진은 HTML, CSS, JavaScript 코드와 이미지 및 기타 리소스를 함께 볼 수 있고 상호작용할 수 있는 웹페이지로 변환하는 웹브라우저의 구성요소입니다.
Blink는 웹페이지를 어떻게 렌더링하나요?
Blink는 HTML, CSS, JavaScript, 동영상, 이미지와 같은 필요한 모든 리소스를 수집하여 렌더링 프로세스를 시작합니다. 이러한 리소스를 검색하기 위해 Blink는 Chromium 및 기본 운영체제에서 네트워크 스택과의 상호작용을 관리합니다.
CSS와 HTML이 로드되는 즉시 Blink는 텍스트 형식의 코드를 작동할 수 있는 표현으로 변환할 수 있습니다. 이를 파싱이라고 합니다. JavaScript도 파싱한 후 실행해야 합니다.
모든 작업이 완료되면 Blink에서 사용자가 보고 상호작용할 수 있는 웹페이지를 레이아웃하고 표시할 수 있습니다. 이를 렌더링이라고 합니다.
다음 다이어그램은 렌더링 작업 파이프라인의 각 단계와 각 단계에 관련된 구성요소, 프로세스, 리소스를 보여줍니다. Blink에는 할 일이 많습니다.
그래픽 렌더링
Blink는 오픈소스 Skia 그래픽 엔진을 사용하여 컴퓨터 또는 휴대기기의 기본 그래픽 하드웨어와 상호작용합니다.
Skia는 다양한 하드웨어 및 소프트웨어 플랫폼에서 작동하는 공통 API를 제공합니다. Google Chrome 및 기타 여러 제품의 그래픽 엔진으로 사용됩니다.
Skia는 플랫폼 변경사항을 따라가면서 다양한 운영체제와 기기를 지원하려고 하지 않고 OpenGL, Vulkan, DirectX 등의 그래픽 라이브러리를 사용합니다. Skia에서 사용하는 라이브러리는 실행 중인 플랫폼(예: 모바일의 Android 또는 데스크톱의 Windows)에 따라 다릅니다.
JavaScript 파싱 및 실행
Blink는 JavaScript 및 WebAssembly 코드를 파싱하고 실행하기 위해 Chromium 프로젝트에서 개발한 오픈소스 엔진인 V8을 사용합니다.
V8을 사용하면 개발자가 JavaScript 또는 WebAssembly 코드를 사용하여 기본 브라우저의 기능에 액세스할 수 있습니다. 예를 들어 Blink가 HTML 코드에서 빌드하는 문서의 내부 표현인 문서 객체 모델을 조작합니다.
V8은 ECMAScript라는 JavaScript 표준에 따라 JavaScript를 처리합니다.
표준에 맞게 렌더링
V8은 ECMAScript라고 하는 JavaScript 표준에 따라 JavaScript를 처리합니다. Blink와 같은 렌더링 엔진은 상호 운용성 있게 웹 표준을 구현하도록 설계되었습니다. 웹 표준을 사용하면 개발자와 최종 사용자가 어떤 브라우저를 사용하든 웹페이지가 제대로 작동한다고 확신할 수 있습니다.
Blink는 HTML, CSS, DOM을 비롯한 웹 표준에 정의된 브라우저 및 언어 기능 사양을 따릅니다.
HTML 및 DOM
HTML 표준은 브라우저 엔지니어가 HTML 요소를 구현하는 방법을 정의합니다. 각 HTML 요소의 사양에는 요소의 DOM 인터페이스를 정의하는 섹션이 포함되어 있습니다. 여기에서는 브라우저에서 JavaScript를 구현하여 기기와 플랫폼 전반에서 표준화된 방식으로 요소와 상호작용할 수 있도록 하는 방법을 자세히 설명합니다.
인터페이스 사양은 웹 인터페이스 정의 언어인 WebIDL로 작성됩니다. 다음 WebIDL은 HTML 표준의 HTMLImageElement 정의의 일부입니다.
[Exposed=Window,
LegacyFactoryFunction=Image(optional unsigned long width, optional unsigned
long height)]
interface HTMLImageElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute DOMString alt;
[CEReactions] attribute USVString src;
[CEReactions] attribute USVString srcset;
[CEReactions] attribute DOMString sizes;
[CEReactions] attribute DOMString? crossOrigin;
[CEReactions] attribute DOMString useMap;
[CEReactions] attribute boolean isMap;
[CEReactions] attribute unsigned long width;
[CEReactions] attribute unsigned long height;
readonly attribute unsigned long naturalWidth;
readonly attribute unsigned long naturalHeight;
readonly attribute boolean complete;
readonly attribute USVString currentSrc;
[CEReactions] attribute DOMString referrerPolicy;
[CEReactions] attribute DOMString decoding;
[CEReactions] attribute DOMString loading;
[CEReactions] attribute DOMString fetchPriority;
Promise<undefined> decode();
// also has obsolete members
};
WebIDL은 대부분의 웹 표준을 구성하는 것과 같은 기능 인터페이스를 설명하는 표준화된 방법입니다.
기능을 구현하기 위해 엔지니어는 해당 WebIDL 코드를 파일에 배치하고 Blink에서 자동으로 변환하여 개발자에게 해당 기능의 인터페이스를 제공합니다. 인터페이스가 WebIDL로 정의되면 엔지니어는 인터페이스 호출에 응답하는 구현을 빌드할 수 있습니다.
html_image_element.idl제3자 라이브러리
Blink는 여러 서드 파티 라이브러리를 사용합니다. 예를 들어 WebGL은 양방향 2D 및 3D 그래픽을 렌더링하는 데 사용됩니다.
WebGL과 같은 라이브러리는 고도로 최적화되고 신중하게 테스트됩니다. 이를 통해 Blink는 새로운 솔루션을 개발하지 않고도 중요한 기능을 사용할 수 있습니다. WebGL IDL이 정의되고 Blink 엔지니어가 이 웹 인터페이스를 여러 요소를 렌더링하는 데 사용되는 백엔드의 코드 및 라이브러리와 연결합니다 .
WebGL이 작동하는 모습을 보려면 WebGL을 사용하는 프랙탈 렌더링 앱인 Fractious를 확인하세요.
크로스 플랫폼 렌더링
Chrome이 모든 운영체제와 기기에서 Blink를 사용하는지 궁금하실 수 있습니다.
iOS 및 iPadOS에서 Chrome은 렌더링 엔진으로 WebKit을 사용합니다. WebKit은 사실 1998년으로 거슬러 올라가는 다른 프로젝트인 KDE의 포크였습니다. 실제로 Safari와 Chromium은 모두 처음에 WebKit을 기반으로 했습니다. 현재 Apple의 App Store 요구사항에 따라 Safari 및 Apple 생태계의 모든 브라우저는 WebKit을 사용합니다.
시간이 지남에 따라 Chromium 프로젝트는 하나의 코드베이스에 두 개의 별도 아키텍처를 유지하는 것이 문제가 되기 시작하여 다른 멀티프로세스 소프트웨어 아키텍처를 개발했습니다.
또한 Chromium은 WebKit에 빌드되지 않은 기능을 사용하고자 했습니다. 이에 따라 버전 28부터 Chromium 엔지니어는 자체 렌더링 엔진을 개발하기로 결정했습니다. WebKit에서 코드를 포크하여 Blink라고 이름을 지었습니다. Blink는 Netscape Navigator 브라우저에서 텍스트를 깜박이게 하는 데 사용할 수 있었던 (그다지 인기가 없는) <blink> 태그에서 이름을 따온 것이라는 소문이 있습니다.
요약하자면 Chrome, Microsoft Edge, Opera, Vivaldi, Arc, Brave 및 기타 Chromium 기반 브라우저와 프레임워크는 Blink를 사용합니다. Safari 및 일부 다른 브라우저는 Chrome을 비롯한 iOS 및 iPadOS의 모든 브라우저와 함께 WebKit을 사용합니다. Firefox는 Gecko라는 렌더링 엔진을 사용합니다.
다음 단계
Blink 인텐트란 무엇인가요?를 확인하세요.