Blink là gì?

Sam Dutton

Một trong những sức mạnh đặc biệt của web là khả năng kết hợp. Trang web bao gồm nhiều tài nguyên khác nhau, có thể đến từ nhiều nguồn gốc.

Blink đóng vai trò là công cụ kết xuất cho các trình duyệt dựa trên Chromium, bao gồm Chrome, Android WebView, Microsoft Edge, Opera và Brave.

Công cụ kết xuất là thành phần của trình duyệt web, giúp chuyển đổi mã HTML, CSS và JavaScript cùng với hình ảnh và các tài nguyên khác thành các trang web mà bạn có thể xem và tương tác.

Blink kết xuất trang web như thế nào?

Blink bắt đầu quá trình kết xuất bằng cách thu thập tất cả tài nguyên cần thiết như HTML, CSS, JavaScript, video và hình ảnh. Để truy xuất các tài nguyên này, Blink quản lý các hoạt động tương tác với ngăn xếp mạng, trong Chromium và hệ điều hành cơ bản.

Ngay khi CSS và HTML được tải, Blink có thể chuyển đổi mã đó, ở dạng văn bản, thành một bản trình bày mà nó có thể hoạt động cùng – đó được gọi là phân tích cú pháp. JavaScript cũng cần được phân tích cú pháp rồi thực thi.

Sau khi hoàn tất tất cả các bước đó, Blink có thể bắt đầu công việc bố trí và hiển thị các trang web mà bạn có thể xem và tương tác. Đây là quá trình kết xuất.

Sơ đồ sau đây cho thấy các giai đoạn trong quy trình kết xuất tác vụ, bao gồm các thành phần, quy trình và tài nguyên liên quan đến từng giai đoạn. Blink còn rất nhiều việc phải làm!

Quy trình kết xuất Blink, với các mũi tên cho biết tiến trình qua các giai đoạn.
Quy trình kết xuất Blink có trình tải tài nguyên, API tập lệnh và phân tích cú pháp HTML/CSS. Quá trình này diễn ra qua nhiều giai đoạn để vẽ các pixel trên màn hình.

Kết xuất đồ hoạ

Blink sử dụng công cụ đồ hoạ Skia nguồn mở để tương tác với phần cứng đồ hoạ cơ bản của máy tính hoặc thiết bị di động.

Skia cung cấp các API phổ biến hoạt động trên nhiều nền tảng phần cứng và phần mềm. Đây là công cụ đồ hoạ cho Google Chrome và nhiều sản phẩm khác.

Thay vì cố gắng hỗ trợ nhiều hệ điều hành và thiết bị, đồng thời theo kịp các thay đổi về nền tảng, Skia sử dụng các thư viện đồ hoạ bao gồm OpenGL, Vulkan và DirectX. Thư viện mà Skia sử dụng phụ thuộc vào nền tảng mà thư viện đó đang chạy, chẳng hạn như Android trên thiết bị di động hoặc Windows trên máy tính.

Phân tích cú pháp và thực thi JavaScript

Để phân tích cú pháp và thực thi mã JavaScript và WebAssembly, Blink sử dụng V8, một công cụ nguồn mở do các dự án Chromium phát triển.

V8 cho phép nhà phát triển sử dụng mã JavaScript hoặc WebAssembly để truy cập vào các chức năng của trình duyệt cơ bản. Ví dụ: để thao tác với Mô hình đối tượng tài liệu (Document Object Model – DOM). Đây là bản trình bày nội bộ của một tài liệu mà Blink tạo từ mã HTML.

V8 xử lý JavaScript theo tiêu chuẩn JavaScript, còn gọi là ECMAScript.

Kết xuất theo tiêu chuẩn

V8 xử lý JavaScript theo tiêu chuẩn JavaScript, còn gọi là ECMAScript. Các công cụ kết xuất như Blink được thiết kế để triển khai các tiêu chuẩn web một cách tương tác. Các tiêu chuẩn web giúp nhà phát triển và người dùng cuối tự tin rằng trang web hoạt động tốt, bất kể họ đang sử dụng trình duyệt nào.

Blink tuân theo các thông số kỹ thuật cho các tính năng ngôn ngữ và trình duyệt được xác định trong các tiêu chuẩn web, bao gồm HTML, CSS và DOM.

HTML và DOM

Tiêu chuẩn HTML xác định cách các kỹ sư trình duyệt triển khai các phần tử HTML. Quy cách cho mỗi phần tử HTML bao gồm một phần xác định giao diện DOM cho phần tử đó. Phần này trình bày chi tiết cách trình duyệt triển khai JavaScript để cho phép tương tác với phần tử theo cách được chuẩn hoá trên các thiết bị và nền tảng.

Thông số kỹ thuật giao diện được viết bằng WebIDL: Ngôn ngữ định nghĩa giao diện web. WebIDL sau đây là một phần của định nghĩa về HTMLImageElement theo tiêu chuẩn HTML.

[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 là một cách chuẩn hoá để mô tả các giao diện chức năng, chẳng hạn như các giao diện tạo nên hầu hết các tiêu chuẩn web.

Để triển khai một tính năng, các kỹ sư sẽ đặt mã WebIDL đó vào một tệp và Blink sẽ tự động chuyển đổi mã này để cung cấp giao diện cho nhà phát triển cho tính năng đó. Sau khi xác định giao diện bằng WebIDL, kỹ sư có thể xây dựng các phương thức triển khai phản hồi lệnh gọi giao diện.

html_image_element.idl trong nguồn Chromium.

Thư viện bên thứ ba

Blink sử dụng nhiều thư viện của bên thứ ba. Ví dụ: WebGL được dùng để kết xuất đồ hoạ 2D và 3D tương tác.

Thư viện của bên thứ ba trong nguồn Chromium, bao gồm cả WebGL do Blink sử dụng.

Các thư viện như WebGL được tối ưu hoá cao và được kiểm thử kỹ lưỡng. Các lớp này cấp cho Blink quyền truy cập vào các tính năng và chức năng quan trọng mà không cần phải phát minh lại. IDL WebGL được xác định và các kỹ sư Blink kết nối giao diện web đó với mã và thư viện trên phần phụ trợ dùng để hiển thị nhiều phần tử khác nhau .

Nếu bạn muốn xem WebGL hoạt động, hãy xem ứng dụng kết xuất hình ảnh fractal Fractious sử dụng WebGL.

Fractious: một trình xem dựa trên WebGL cho Tập hợp Mandelbrot.

Kết xuất trên nhiều nền tảng

Bạn có thể thắc mắc liệu Chrome có sử dụng Blink ở mọi nơi, trên tất cả hệ điều hành và thiết bị không?

Trên iOS và iPadOS, Chrome sử dụng WebKit làm công cụ kết xuất. WebKit thực sự là một nhánh của một dự án khác, KDE, bắt đầu từ năm 1998. Trên thực tế, Safari và Chromium ban đầu đều dựa trên WebKit. Hiện tại, Safari và tất cả trình duyệt trong hệ sinh thái của Apple đều sử dụng WebKit, theo các yêu cầu của Apple đối với App Store.

Theo thời gian, các dự án Chromium đã phát triển một cấu trúc phần mềm đa quy trình khác, vì việc duy trì hai cấu trúc riêng biệt trong một cơ sở mã đang trở thành vấn đề.

Ngoài ra, Chromium muốn sử dụng các tính năng chưa được tích hợp vào WebKit. Vì vậy, kể từ phiên bản 28, các kỹ sư Chromium đã quyết định bắt đầu làm việc trên công cụ kết xuất của riêng họ. Họ đã phân nhánh mã của mình từ WebKit và đặt tên là Blink. Theo lời đồn, Blink được đặt tên theo thẻ <blink> (không được yêu thích lắm) có trong trình duyệt Netscape Navigator để bật và tắt văn bản.

Tóm lại: Chrome, Microsoft Edge, Opera, Vivaldi, Arc, Brave và các trình duyệt và khung dựa trên Chromium khác sử dụng Blink. Safari và một số trình duyệt khác sử dụng WebKit, cùng với tất cả trình duyệt trên iOS và iPadOS, bao gồm cả Chrome. Firefox sử dụng một công cụ kết xuất có tên là Gecko.

Các bước tiếp theo

Hãy xem bài viết Ý định Blink là gì?.