Tìm hiểu về trình duyệt web hiện đại (phần 1)

Mariko Kosaka

CPU, GPU, Bộ nhớ và kiến trúc đa quá trình

Trong loạt blog gồm 4 phần này, chúng ta sẽ tìm hiểu bên trong trình duyệt Chrome, từ cấu trúc cấp cao đến các nội dung cụ thể của quy trình kết xuất. Nếu bạn đã từng thắc mắc cách trình duyệt biến mã của bạn thành một trang web đang hoạt động, hoặc bạn không chắc tại sao một kỹ thuật cụ thể được đề xuất để cải thiện hiệu suất, thì loạt bài viết này là dành cho bạn.

Trong phần 1 của loạt bài này, chúng ta sẽ xem xét thuật ngữ điện toán cốt lõi và kiến trúc đa tiến trình của Chrome.

Phần cốt lõi của máy tính là CPU và GPU

Để hiểu môi trường mà trình duyệt đang chạy, chúng ta cần hiểu một số bộ phận máy tính và chức năng của chúng.

CPU

CPU
Hình 1: 4 nhân CPU trong vai trò nhân viên văn phòng ngồi tại mỗi bàn và xử lý công việc khi họ vào

Trước tiên là Cnit Cnit – hay C trung tâm.C CPU có thể được xem là bộ não của máy tính. Lõi CPU, trong hình là một nhân viên văn phòng, có thể xử lý lần lượt nhiều tác vụ khác nhau khi có công việc. AI của Google có thể xử lý mọi thứ, từ toán học đến nghệ thuật, đồng thời biết cách trả lời cuộc gọi của khách hàng. Trước đây, hầu hết CPU đều là một chip duy nhất. Lõi giống như một CPU khác sống trong cùng một chip. Trong phần cứng hiện đại, bạn thường có nhiều lõi, mang lại khả năng tính toán nhiều hơn cho điện thoại và máy tính xách tay.

GPU

GPU
Hình 2: Nhiều lõi GPU có cờ lê cho biết chúng xử lý một tác vụ hạn chế

Graphics P cấu thành Unit – hay GPU là một phần khác của máy tính. Không giống như CPU, GPU xử lý tốt các tác vụ đơn giản nhưng trên nhiều lõi cùng một lúc. Đúng như cái tên cho thấy, phiên bản đầu tiên của thư viện này được phát triển để xử lý đồ hoạ. Đây là lý do tại sao trong ngữ cảnh đồ hoạ "sử dụng GPU" hay "dựa trên GPU" thì có liên quan đến khả năng kết xuất nhanh và tương tác mượt mà. Trong những năm gần đây, với việc điện toán được tăng tốc GPU, ngày càng có thể thực hiện nhiều phép tính hơn chỉ với GPU.

Khi bạn khởi động một ứng dụng trên máy tính hoặc điện thoại, CPU và GPU là những bộ phận cung cấp năng lượng cho ứng dụng. Thông thường, các ứng dụng chạy trên CPU và GPU bằng các cơ chế do Hệ điều hành cung cấp.

Phần cứng, hệ điều hành, ứng dụng
Hình 3: Ba lớp cấu trúc máy tính. Phần cứng máy ở dưới cùng, Hệ điều hành ở giữa và Ứng dụng ở trên cùng.

Thực thi chương trình về quy trình và luồng

xử lý và luồng
Hình 4: Quy trình như một hộp giới hạn, các luồng như một con cá trừu tượng bơi bên trong một quy trình

Một khái niệm khác cần nắm bắt trước khi tìm hiểu kỹ hơn về cấu trúc trình duyệt là Quy trình và Luồng. Quy trình có thể được mô tả là chương trình thực thi của một ứng dụng. Luồng là luồng sống bên trong quy trình và thực thi bất kỳ phần nào của chương trình quy trình.

Khi bạn khởi động một ứng dụng, một quy trình sẽ được tạo. Chương trình có thể tạo(các) luồng để giúp nó hoạt động, nhưng điều đó là không bắt buộc. Hệ điều hành cung cấp cho quy trình một "lớp" bộ nhớ để hoạt động và tất cả trạng thái của ứng dụng đều được lưu giữ trong không gian bộ nhớ riêng đó. Khi bạn đóng ứng dụng, quá trình này cũng sẽ biến mất và Hệ điều hành sẽ giải phóng bộ nhớ.

xử lý và bộ nhớ
Hình 5: Sơ đồ của một quy trình sử dụng dung lượng bộ nhớ và lưu trữ dữ liệu ứng dụng

Một quy trình có thể yêu cầu Hệ điều hành bắt đầu một quy trình khác để chạy nhiều tác vụ. Khi điều này xảy ra, nhiều phần của bộ nhớ sẽ được phân bổ cho quy trình mới. Nếu hai quy trình cần trao đổi, chúng có thể thực hiện việc này bằng cách sử dụng giao thức Tiêm hài lần (IPC). Nhiều ứng dụng được thiết kế để hoạt động theo cách này để nếu quy trình worker không phản hồi, thì nó có thể được khởi động lại mà không dừng các quy trình khác đang chạy các phần khác nhau của ứng dụng.

quy trình worker và IPC
Hình 6: Sơ đồ các quy trình riêng biệt giao tiếp qua IPC

Cấu trúc trình duyệt

Vậy trình duyệt web được tạo bằng các quy trình và luồng như thế nào? Đó có thể là một quy trình có nhiều luồng hoặc nhiều quy trình, trong đó có vài luồng giao tiếp qua IPC.

cấu trúc trình duyệt
Hình 7: Các cấu trúc trình duyệt khác nhau trong quy trình / sơ đồ luồng

Điều quan trọng cần lưu ý ở đây là những cấu trúc này là chi tiết triển khai. Không có thông số chuẩn về cách tạo trình duyệt web. Phương pháp tiếp cận của một trình duyệt có thể hoàn toàn khác với các trình duyệt khác.

Nhằm phục vụ loạt blog này, chúng tôi đang sử dụng cấu trúc gần đây của Chrome, như mô tả trong Hình 8.

Ở trên cùng là quy trình trình duyệt phối hợp với các quy trình khác xử lý nhiều phần của ứng dụng. Đối với quy trình kết xuất, nhiều quy trình được tạo và chỉ định cho từng thẻ. Cho đến gần đây, Chrome đã cung cấp cho mỗi thẻ một quy trình khi có thể; hiện tại, Chrome cố gắng cung cấp cho mỗi trang web một quy trình riêng, bao gồm cả iframe (xem phần Cách ly trang web).

cấu trúc trình duyệt
Hình 8: Sơ đồ cấu trúc đa tiến trình của Chrome. Nhiều lớp được hiển thị trong Quy trình kết xuất để thể hiện rằng Chrome đang chạy nhiều Quá trình kết xuất cho từng thẻ.

Quy trình nào kiểm soát điều gì?

Bảng sau đây mô tả từng quy trình của Chrome và các chức năng kiểm soát quy trình đó:

Quy trình và nội dung kiểm soát
Trình duyệt Kiểm soát phần "chrome" của ứng dụng, bao gồm cả thanh địa chỉ, dấu trang, nút quay lại và nút tiến.
Đồng thời xử lý cả những phần đặc quyền, không ẩn được của trình duyệt web, chẳng hạn như yêu cầu mạng và quyền truy cập vào tệp.
Trình kết xuất Kiểm soát mọi nội dung bên trong thẻ hiển thị trang web.
Trình bổ trợ Kiểm soát bất kỳ trình bổ trợ nào mà trang web sử dụng, chẳng hạn như flash.
GPU Xử lý các nhiệm vụ GPU tách biệt với các quy trình khác. Nó được tách thành các quy trình khác nhau vì GPU xử lý yêu cầu từ nhiều ứng dụng và vẽ các yêu cầu đó trên cùng một nền tảng.
Các quá trình của Chrome
Hình 9: Các quy trình khác nhau trỏ đến các phần khác nhau trên giao diện người dùng của trình duyệt

Có nhiều quy trình khác giống như Quy trình mở rộng và các quy trình làm việc tiện ích. Nếu bạn muốn xem có bao nhiêu quy trình đang chạy trong Chrome, hãy nhấp vào biểu tượng trình đơn tuỳ chọn ở góc trên cùng bên phải, chọn Công cụ khác, rồi chọn Trình quản lý tác vụ. Thao tác này sẽ mở ra một cửa sổ có danh sách các quy trình hiện đang chạy và dung lượng CPU/Bộ nhớ mà các quy trình đó đang sử dụng.

Lợi ích của kiến trúc đa tiến trình trong Chrome

Trước đó, tôi đã đề cập rằng Chrome sử dụng nhiều quá trình kết xuất đồ hoạ. Trong trường hợp đơn giản nhất, bạn có thể hình dung mỗi thẻ có quy trình kết xuất riêng. Giả sử bạn đang mở 3 thẻ và mỗi thẻ do một quy trình kết xuất độc lập chạy.

Nếu một thẻ không phản hồi, bạn có thể đóng thẻ không phản hồi và tiếp tục trong khi vẫn duy trì các thẻ khác. Nếu tất cả các thẻ đang chạy trong một quy trình, thì khi một thẻ không phản hồi, thì tất cả các thẻ đều không phản hồi. Thật buồn.

nhiều trình kết xuất đồ hoạ cho các thẻ
Hình 10: Sơ đồ cho thấy nhiều quy trình chạy mỗi thẻ

Một lợi ích khác của việc phân tách công việc của trình duyệt thành nhiều quy trình là tính bảo mật và hộp cát. Vì hệ điều hành đưa ra cách hạn chế đặc quyền của quy trình, nên trình duyệt có thể tạo hộp cát cho một số quy trình từ một số tính năng nhất định. Ví dụ: Trình duyệt Chrome hạn chế quyền truy cập tệp tuỳ ý đối với các quy trình xử lý hoạt động đầu vào tuỳ ý của người dùng, chẳng hạn như quy trình kết xuất đồ hoạ.

Vì các quy trình có không gian bộ nhớ riêng nên chúng thường chứa bản sao của cơ sở hạ tầng chung (như V8, công cụ JavaScript của Chrome). Điều này có nghĩa là chúng sẽ sử dụng nhiều bộ nhớ hơn vì không thể được chia sẻ như các luồng khác nếu chúng là các luồng trong cùng một quy trình. Để tiết kiệm bộ nhớ, Chrome đặt giới hạn về số lượng quá trình mà Chrome có thể hoạt động. Giới hạn khác nhau tuỳ thuộc vào bộ nhớ và CPU mà thiết bị của bạn có. Tuy nhiên, khi Chrome đạt đến giới hạn, Chrome sẽ bắt đầu chạy nhiều thẻ từ cùng một trang web trong một tiến trình.

Tiết kiệm nhiều bộ nhớ hơn – Dịch vụ trong Chrome

Phương pháp tương tự được áp dụng cho quy trình của trình duyệt. Chrome đang trải qua các thay đổi về kiến trúc để chạy từng phần của chương trình trình duyệt dưới dạng dịch vụ cho phép chia thành các quy trình khác nhau hoặc tổng hợp thành một quy trình.

Nhìn chung, khi chạy trên phần cứng mạnh, Chrome có thể chia từng dịch vụ thành nhiều quy trình để mang lại độ ổn định cao hơn. Tuy nhiên, nếu đang chạy trên một thiết bị có hạn chế về tài nguyên, thì Chrome sẽ hợp nhất các dịch vụ thành một quy trình giúp tiết kiệm mức sử dụng bộ nhớ. Trước khi có thay đổi này, phương pháp tương tự của việc hợp nhất các quy trình để giảm mức sử dụng bộ nhớ đã được sử dụng trên các nền tảng như Android.

Phân phát Chrome
Hình 11: Sơ đồ quá trình dịch vụ của Chrome chuyển nhiều dịch vụ thành nhiều quy trình và một quy trình trình duyệt

Quy trình kết xuất đồ hoạ trên mỗi khung hình – Tách biệt trang web

Tách biệt trang web là một tính năng mới ra mắt trong Chrome. Tính năng này chạy một quy trình kết xuất đồ hoạ riêng cho từng iframe trên nhiều trang web. Chúng ta đã nói về một quy trình kết xuất cho mỗi mô hình thẻ, cho phép iframe trên nhiều trang web chạy trong một quy trình kết xuất duy nhất với việc chia sẻ không gian bộ nhớ giữa các trang web. Việc chạy a.com và b.com trong cùng một quy trình kết xuất có vẻ không gây ra vấn đề gì. Chính sách cùng nguồn gốc là mô hình bảo mật cốt lõi của web; mô hình này đảm bảo một trang web không thể truy cập vào dữ liệu từ các trang web khác khi chưa có sự đồng ý. Mục tiêu chính của các cuộc tấn công bảo mật là việc bỏ qua chính sách này. Tách biệt quy trình là cách hiệu quả nhất để tách các trang web. Với Meltdown và Spectre, chúng ta càng cần phải tách biệt các trang web bằng các quy trình. Khi tính năng Cách ly trang web được bật trên máy tính theo mặc định kể từ Chrome 67, mỗi iframe trên nhiều trang web trong một thẻ sẽ nhận được một quy trình kết xuất riêng.

cách ly trang web
Hình 12: Sơ đồ cách ly trang web; nhiều quy trình kết xuất đồ hoạ trỏ đến iframe trong một trang web

Việc bật tính năng Cách ly trang web là một nỗ lực kỹ thuật trong nhiều năm. Việc tách biệt trang web không đơn giản như việc chỉ định nhiều quy trình kết xuất đồ hoạ; về cơ bản, tính năng này thay đổi cách các iframe giao tiếp với nhau. Việc mở công cụ cho nhà phát triển trên một trang có iframe chạy trên các quy trình khác nhau có nghĩa là công cụ cho nhà phát triển phải triển khai công việc hậu trường để đảm bảo công cụ đó xuất hiện liền mạch. Ngay cả khi bạn chạy một tổ hợp phím Ctrl+F đơn giản để tìm một từ trong trang, bạn cũng phải tìm kiếm trên nhiều quy trình kết xuất đồ hoạ. Bạn có thể thấy lý do tại sao các kỹ sư trình duyệt nói về việc phát hành tính năng Cách ly trang web là một cột mốc quan trọng!

Tóm tắt

Trong bài đăng này, chúng tôi đã đề cập đến thông tin tổng quan về kiến trúc trình duyệt cũng như các lợi ích của kiến trúc đa quy trình. Chúng tôi cũng đề cập đến Hoạt động phục vụ và Tách biệt trang web trong Chrome có liên quan sâu đến kiến trúc đa quá trình. Trong bài đăng tiếp theo, chúng ta sẽ bắt đầu tìm hiểu về những gì xảy ra giữa các quy trình và các luồng này để hiển thị một trang web.

Bạn có thích bài đăng này không? Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào cho bài đăng trong tương lai, hãy liên hệ với bạn theo địa chỉ @kosamari trên Twitter.

Tiếp theo: Điều gì xảy ra trong quá trình di chuyển