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

Mariko Kosaka

CPU, GPU, bộ nhớ và cấu trúc đa tiến trình

Trong loạt blog gồm 4 phần này, chúng ta sẽ tìm hiểu về trình duyệt Chrome, từ kiến trúc cấp cao cho đến những thông tin cụ thể về quy trình kết xuất. Nếu có bao giờ bạn thắc mắc làm thế nào trình duyệt chuyển mã của bạn thành một trang web đang hoạt động hoặc bạn không chắc chắn tại sao một kỹ thuật cụ thể lại được đề xuất để cải thiện hiệu suất thì loạt video 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à thuật ngữ kiến trúc đa tiến trình.

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 tôi cần hiểu vài linh kiện của máy tính và chức năng của chúng.

CPU

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

Đầu tiên là tập trung Tũng P Nhật ký Unit - hay CPU. CPU có thể được coi là trí não của máy tính. Lõi CPU, minh hoạ ở đây là một nhân viên văn phòng, có thể xử lý nhiều công việc từng bản ghi khi họ vào. Nó 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 đến một cuộc gọi của khách hàng. Trước đây, hầu hết CPU chỉ là một chip. Một lõi giống như một CPU khác sống trong cùng một khối. 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 cao hơn đến điện thoại và máy tính xách tay của bạn.

GPU

GPU
Hình 2: Nhiều lõi GPU với cờ lê gợi ý chúng xử lý một tác vụ giới hạn

Graphics Pro hệ thống 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 lúc. Như tên cho thấy nó được phát triển đầu tiên để xử lý đồ hoạ. Đó là lý do tại sao trong ngữ cảnh đồ hoạ "sử dụng GPU" hoặc "dựa trên GPU" liên quan đến việc kết xuất nhanh và tương tác mượt mà. Trong những năm gần đây, nhờ có điện toán tăng tốc GPU, ngày càng có nhiều việc tính toán trở nên dễ dàng hơn Chỉ có 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 yếu tố cung cấp năng lượng ứng dụng. Thông thường, các ứng dụng chạy trên CPU và GPU sử dụng cơ chế do Hệ điều hành.

Phần cứng, hệ điều hành, ứng dụng
Hình 3: 3 lớp kiến trúc máy tính. Phần cứng máy ở dưới cùng, Đang hoạt động Hệ thống ở giữa và Ứng dụng ở trên cùng.

Thực thi chương trình theo Quy trình và luồng

quy trình và luồng
Hình 4: Quy trình như một hộp giới hạn, các luồng như 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ỹ 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 tồn tại bên trong quy trình và thực thi bất kỳ phần nào trong chương trình của 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 này có thể tạo(các) chuỗi để giúp nó có thể thực hiện được, nhưng đó là tuỳ chọn. Hệ điều hành tạo ra một "sáng" cho quy trình bộ nhớ để hoạt động với và tất cả trạng thái của ứng dụng được lưu giữ trong không gian bộ nhớ riêng tư đó. Khi bạn đóng , quá trình này cũng biến mất và Hệ điều hành sẽ giải phóng bộ nhớ đó.

tiến trình và bộ nhớ
Hình 5: Sơ đồ của một quy trình sử dụng không gian 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 các tác vụ khác. Khi việc này xảy ra thì các phần khác nhau của bộ nhớ sẽ được phân bổ cho quy trình mới. Nếu hai quy trình cần CANNOT TRANSLATE Nhiều ứng dụng được thiết kế để hoạt động theo cách này để nếu một quy trình worker không phản hồi, 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 của nhân viên và IPC
Hình 6: Sơ đồ các quy trình riêng biệt giao tiếp qua IPC

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

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

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

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

Để thực hiện loạt blog này, chúng tôi sử dụng kiến trúc gần đây của Chrome, được mô tả trong Hình 8.

Ở trên cùng là quy trình của trình duyệt phối hợp với các quy trình khác thực hiện các phần của ứng dụng. Đối với quá trình kết xuất đồ hoạ, nhiều quá trình được tạo và gán 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ể; bây giờ, hệ thống sẽ cố gắng đưa ra mỗi trang web có quy trình riêng, bao gồm cả iframe (xem Cách ly trang web).

cấu trúc trình duyệt
Hình 8: Sơ đồ kiến trúc đa tiến trình của Chrome. Nhiều lớp được hiển thị bên dưới Quy trình kết xuất biểu thị cho Chrome chạy nhiều Quy trình kết xuất cho mỗi 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 quy trình mà quy trình này kiểm soát:

Quy trình và nội dung kiểm soát
Trình duyệt Chế độ kiểm soát "chrome" của ứng dụng, bao gồm thanh địa chỉ, dấu trang, nút quay lại và nút tiến.
Cũng xử lý các phần ẩn, có đặc quyền của trình duyệt web như yêu cầu mạng và quyền truy cập tệp.
Trình kết xuất đồ hoạ 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 mọi trình bổ trợ mà trang web sử dụng, chẳng hạn như flash.
GPU Xử lý riêng biệt tác vụ GPU với các quy trình khác. Quá trình này được tách thành nhiều quy trình vì GPU xử lý yêu cầu từ nhiều ứng dụng và vẽ chúng 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 của giao diện người dùng của trình duyệt

Có nhiều quy trình khác như quy trình Gia hạn và các quy trình tiện ích. Nếu bạn muốn xem số quá trình đang chạy trong Chrome của bạn, 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, sau đó chọn Task Manager (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 thiết bị đó đ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 quy trình kết xuất đồ hoạ. Trong trường hợp đơn giản nhất, bạn có thể hãy hình dung mỗi tab có quy trình kết xuất đồ hoạ riêng. Giả sử bạn có 3 thẻ đang mở và mỗi thẻ đang chạy thông qua một quy trình kết xuất đồ hoạ độc lập.

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 tiếp tục các thẻ khác vẫn hoạt động. Nếu tất cả các thẻ đang chạy trên một tiến trình, khi một thẻ không phản hồi, tất cả các thẻ không phản hồi. Thật đáng buồn.

nhiều trình kết xuất đồ hoạ cho 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 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. Bởi vì hệ điều hành cung cấp cách thức để hạn chế các quy trình đặc quyền, trình duyệt có thể tạo hộp cát cho một số quy trình nhất định từ một số tính năng. 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 như quy trình kết xuất đồ hoạ.

Do 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ác dữ liệu chung cơ sở hạ tầng (như V8, một công cụ JavaScript của Chrome). Điều này có nghĩa là mức sử dụng bộ nhớ sẽ cao hơn chúng không thể được chia sẻ theo cách sẽ hoạt động nếu chúng là các luồng trong cùng một quy trình. Để tiết kiệm bộ nhớ, Chrome sẽ đặt giới hạn về số lượng quy trình có thể xoay vòng. Giới hạn này sẽ khác nhau tuỳ thuộc vào mức bộ nhớ và công suất CPU của thiết bị, nhưng thời điểm Chrome truy cập thiết bị 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 thêm bộ nhớ – Dịch vụ trong Chrome

Phương pháp này cũng được áp dụng cho quy trình của trình duyệt. Chrome đang thay đổi cấu trúc đối với chạy từng phần của chương trình trình duyệt như một 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.

Ý tưởng chung là khi Chrome đang chạy trên phần cứng mạnh mẽ, trình duyệt này có thể chia từng dịch vụ thành các quy trình khác nhau mang lại độ ổn định cao hơn, nhưng nếu bạn sử dụng thiết bị có hạn chế về tài nguyên, Chrome hợp nhất các dịch vụ vào một quy trình để tiết kiệm bộ nhớ. Phương pháp hợp nhất tương 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 trước khi có thay đổi này.

Dịch vụ Chrome
Hình 11: Sơ đồ dịch vụ của Chrome di chuyển các dịch vụ khác nhau thành nhiều quy trình và một tiến trình trình duyệt duy nhất

Quy trình kết xuất đồ hoạ cho mỗi khung hình – Cách ly trang web

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

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

Việc bật tính năng tách biệt 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 gán các quy trình kết xuất khác nhau; về cơ bản thay đổi cách iframe giao tiếp với khá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 thực hiện công việc hậu trường để quảng cáo hiển thị liền mạch. Thậm chí chỉ cần nhấn tổ hợp phím Ctrl+F đơn giản để tìm từ trong một trang nghĩa là tìm kiếm trong các quá trình kết xuất đồ hoạ khác nhau. Bạn có thể xem lý do Các kỹ sư trình duyệt nói rằng 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ổng kết

Trong bài đăng này, chúng tôi đã đề cập đến góc nhìn tổng thể về cấu trúc trình duyệt và đề cập đến các lợi ích của việc kiến trúc đa tiến trình. Chúng tôi cũng đề cập đến việc Phân tách và cách ly trang web trong Chrome có liên quan sâu sắc đế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ề diễn ra giữa các quy trình và chuỗi 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ó câu hỏi hoặc đề xuất cho bài đăng trong tương lai, tôi rất sẵn lòng tin nhắn của bạn theo địa chỉ @kosamari trên Twitter.

Tiếp theo: Điều gì xảy ra trong quá trình đi theo chỉ dẫn