Một trong những sức mạnh đặc biệt của web là khả năng kết hợp. Các trang web bao gồm nhiều tài nguyên khác nhau, có thể đến từ nhiều nguồn.
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 một trình duyệt web, có chức năng 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ả các tài nguyên cần thiết, chẳng hạn 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ưới dạng văn bản) thành một bản trình bày mà nó có thể xử lý. Đây đượ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 sẽ bắt đầu kết xuất. Kết xuất là quá trình bố trí và hiển thị các trang web mà bạn xem và tương tác.
Sơ đồ sau đây cho thấy các giai đoạn trong pipeline của các tác vụ kết xuất, bao gồm cả 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!
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 chung hoạt động trên nhiều nền tảng phần cứng và phần mềm. Động cơ này đóng vai trò 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 những thay đổi của 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 này đ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, đây là biểu diễn 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 được 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 yên tâm rằng các trang web hoạt động hiệu quả, bất kể họ đang sử dụng trình duyệt nào.
Blink tuân theo các quy cách về trình duyệt và tính năng ngôn ngữ đượ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 nên triển khai các phần tử HTML. Quy cách cho mỗi phần tử HTML đều có một phần xác định giao diện DOM cho phần tử đó. Điều này trình bày chi tiết cách trình duyệt nên 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.
Quy cách 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 trong định nghĩa của tiêu chuẩn HTML về 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 là một cách tiêu chuẩn hoá để mô tả các giao diện chức năng, chẳng hạn như những 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à mã này sẽ tự động được Blink chuyển đổi để cung cấp một giao diện cho nhà phát triển cho tính năng đó. Sau khi giao diện được xác định bằng WebIDL, các kỹ sư có thể tạo những phương thức triển khai phản hồi các 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.
Các thư viện như WebGL được tối ưu hoá cao và kiểm thử kỹ lưỡng. Chúng cung 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 ở phần phụ trợ được dùng để kết xuất 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 phân dạng Fractious sử dụng WebGL.
Kết xuất trên nhiều nền tảng
Có thể bạn đang thắc mắc liệu Chrome có sử dụng Blink ở mọi nơi, trên tất cả các hệ điều hành và thiết bị hay không?
Trên iOS và iPadOS, Chrome sử dụng WebKit làm công cụ kết xuất. WebKit thực ra là một nhánh của một dự án khác, KDE, có từ năm 1998. Trên thực tế, cả Safari và Chromium ban đầu đều dựa trên WebKit. Theo các yêu cầu của App Store, ngày nay, Safari và tất cả trình duyệt trong hệ sinh thái của Apple đều sử dụng WebKit.
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 những tính năng không được tích hợp vào WebKit. Vì vậy, kể từ phiên bản 28, các kỹ sư của Chromium đã quyết định bắt đầu phát triể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à gọi mã đó là Blink. Có tin đồn rằng Blink được đặt tên theo thẻ <blink> (không mấy) được yêu thích có trong trình duyệt Netscape Navigator để làm cho văn bản nhấp nháy.
Tóm lại: Chrome, Microsoft Edge, Opera, Vivaldi, Arc, Brave và các trình duyệt cũng như khung dựa trên Chromium khác đều 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.