Tìm hiểu và xác định bài toán
Giới thiệu chung
Trước khi thưởng thức một món ăn ngon, chúng ta cần lên công thức và kết hợp gia vị, tương tự như việc phát triển một sản phẩm web hay app Đầu tiên, cần xác định rõ bài toán cho sản phẩm: nó cần gì và sẽ đạt được những gì? Kết quả ra sao, có thể sánh ngang với những món ăn ngon miệng không? Tiếp theo, tìm hiểu công nghệ phù hợp để chế biến sản phẩm hoàn hảo Hãy cùng nhau khám phá bài toán này ngay bây giờ!
Bài toán về trình duyệt web
Trình duyệt là phần mềm hiển thị nội dung trang web, có nhiệm vụ tải và biểu diễn trang web để người dùng có thể xem và hiểu Tất cả kiến thức hiện tại về cách hoạt động của trình duyệt đều xoay quanh những chức năng này.
- Người dùng nhập đường dẫn trang web vào thanh địa chỉ của browser.
- Browser tải xuống các "tài liệu" từ địa chỉ đó và hiển thị chúng.
Nó sẽ đảm nhận các công việc sau: o Phân giải DNS. o Truyền HTTP. o Hiển thị. o Lặp lại các công việc trên.
Các công nghệ
Qt là bộ thư viện C đa nền tảng cung cấp API cao cấp cho việc truy cập các tính năng của hệ thống máy tính để bàn và thiết bị di động hiện đại Nó hỗ trợ các dịch vụ như định vị, đa phương tiện, kết nối NFC và Bluetooth, trình duyệt web dựa trên Chromium, cùng với phát triển giao diện người dùng truyền thống.
- PyQt5 là một tập hợp toàn diện các ràng buộc Python cho Qt v5.
Nó được triển khai với hơn 35 mô-đun mở rộng, cho phép Python trở thành ngôn ngữ phát triển ứng dụng thay thế cho C trên tất cả các nền tảng hỗ trợ, bao gồm cả iOS và Android.
PyQt5 có khả năng tích hợp vào các ứng dụng C, giúp người dùng có thể tùy chỉnh hoặc mở rộng chức năng của những ứng dụng này.
- NodeJS là một nền tảng được xây dựng trên “V8 Javascript Engine” được viết bằng C++ và Javascript Nền tảng này được phát triển bởi Ryan Lienhart Dahl vào năm 2009.
Node.js được phát triển khi các lập trình viên JavaScript đầu tiên mở rộng khả năng của nó từ việc chỉ chạy trên trình duyệt sang việc có thể hoạt động như một ứng dụng độc lập trên máy tính.
MySQL là hệ thống quản trị cơ sở dữ liệu mã nguồn mở (RDBMS) hoạt động theo mô hình Client-Server, viết tắt của Relational Database Management System Nó được tích hợp với Apache và PHP, cho phép quản lý dữ liệu thông qua các cơ sở dữ liệu, mỗi cơ sở dữ liệu có thể chứa nhiều bảng quan hệ MySQL sử dụng cú pháp và lệnh tương tự như ngôn ngữ SQL và đã được phát hành từ thập niên 90.
Các ứng dụng web lớn như Facebook, Twitter, YouTube, Google và Yahoo! đều sử dụng MySQL để lưu trữ dữ liệu Mặc dù ban đầu MySQL chỉ được sử dụng hạn chế, nhưng hiện nay nó đã tương thích với nhiều hệ điều hành quan trọng như Linux, macOS, Microsoft Windows và Ubuntu.
1.3.4 Và một số công nghệ khác:
Các công nghệ khác đi kèm được chúng tôi sử dụng như: o Express o Handelbars…
Kiến trúc của một trình duyệt
Cốt lõi của máy tính
Để hiểu môi trường mà trình duyệt đang chạy, chúng ta cần hiểu một vài bộ phận máy tính và những gì chúng làm.
2.1.1 CPU: Đầu tiên là Bộ xử lý trung tâm - hay CPU CPU có thể được coi là bộ não của máy tính Một lõi CPU, có thể xử lý từng tác vụ khác nhau Nó có thể xử lý mọi thứ từ toán học đến nghệ thuật Trong quá khứ, hầu hết các CPU là một chip duy nhất Một lõi giống như một CPU khác sống trong cùng một con chip Trong phần cứng hiện đại, chúng ta thường nhận được nhiều hơn một lõi, mang lại nhiều sức mạnh về tính toán hơn cho điện thoại và máy tính xách tay của chúng ta.
Bộ xử lý đồ họa (GPU) là một thành phần quan trọng trong máy tính, nổi bật với khả năng xử lý nhiều tác vụ đơn giản đồng thời Được phát triển chủ yếu để xử lý đồ họa, GPU mang lại hiệu suất cao trong việc kết xuất nhanh và tương tác mượt mà Gần đây, với sự phát triển của điện toán tăng tốc bằng GPU, nhiều loại tính toán phức tạp giờ đây chỉ có thể thực hiện hiệu quả trên GPU.
Khi khởi động ứng dụng trên máy tính hoặc điện thoại, CPU và GPU đóng vai trò quan trọng trong việc cung cấp năng lượng cho ứng dụng Các ứng dụng thường hoạt động trên CPU và GPU thông qua các cơ chế do hệ điều hành hỗ trợ.
Thực thi chương trình theo quy trình và luồng
Trước khi tìm hiểu sâu về kiến trúc trình duyệt, cần nắm rõ khái niệm về Process và Thread Process được hiểu là chương trình đang thực thi của một ứng dụng, trong khi Thread là luồng hoạt động bên trong quá trình, đảm nhận việc thực thi các phần khác nhau của chương trình.
Khi khởi động một ứng dụng, một quá trình mới được tạo ra, cho phép chương trình tạo ra các luồng để hoạt động hiệu quả Hệ điều hành cấp phát bộ nhớ cho quá trình, giữ lại toàn bộ trạng thái ứng dụng trong không gian bộ nhớ riêng biệt Khi ứng dụng được đóng, quá trình cũng kết thúc và hệ điều hành sẽ giải phóng bộ nhớ đã được sử dụng.
Hệ điều hành có khả năng khởi chạy các quy trình khác nhau để thực hiện các tác vụ đa dạng, với bộ nhớ được phân bổ cho mỗi quy trình mới Khi hai quy trình cần giao tiếp, chúng có thể sử dụng Inter Process Communication (IPC) Nhiều ứng dụng được thiết kế để hoạt động theo cách này, cho phép khởi động lại một "worker process" không phản hồi mà không ảnh hưởng đến các quy trình khác đang hoạt động trong ứng dụng.
Kiến trúc trình duyệt
Trình duyệt web được xây dựng thông qua các quy trình và luồng khác nhau, có thể bao gồm nhiều luồng hoặc quy trình khác nhau với giao tiếp qua IPC Điều quan trọng là không có tiêu chuẩn cụ thể cho việc xây dựng trình duyệt, dẫn đến sự khác biệt trong cách tiếp cận giữa các trình duyệt Quy trình trình duyệt phối hợp với các quy trình khác để xử lý các phần khác nhau của ứng dụng, trong đó mỗi tab thường được gán cho một quy trình riêng biệt Mục tiêu hiện tại là cung cấp cho mỗi trang web một quy trình độc lập, bao gồm cả iFrame, tương tự như cách mà Chrome thực hiện.
Quá trình nào kiểm soát cái gì?
Bảng sau đây mô tả từng quy trình của Pixel và những gì nó kiểm soát:
Quy trình và những gì nó kiểm soát
Trình duyệt kiểm soát phần "Pixel" của ứng dụng, bao gồm thanh địa chỉ, dấu trang, và các nút quay lại, chuyển tiếp Nó cũng quản lý các phần vô hình và quyền truy cập của trình duyệt như yêu cầu mạng và quyền truy cập tệp.
Rendere Kiểm soát mọi thứ bên trong tab nơi một trang web được hiển r thị.
Plugin Kiểm soát bất kỳ plugin nào được sử dụng bởi trang web, ví dụ: flash.
GPU xử lý các tác vụ một cách tách biệt với các quy trình khác, cho phép nhiều ứng dụng gửi yêu cầu đồng thời Điều này giúp GPU vẽ các yêu cầu trên cùng một bề mặt hiệu quả hơn.
Lợi ích của kiến trúc đa quá trình trong Pixel
Pixel sử dụng nhiều quy trình kết xuất để cải thiện hiệu suất Mỗi tab mở có thể hoạt động với quy trình kết xuất riêng biệt, cho phép người dùng đóng tab không phản hồi mà không ảnh hưởng đến các tab khác Ngược lại, nếu tất cả các tab chia sẻ một quy trình, khi một tab không phản hồi, toàn bộ sẽ bị ảnh hưởng, gây ra sự cố nghiêm trọng.
Một lợi ích quan trọng 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ăng cường bảo mật thông qua hộp cát (sandboxing) Nhờ vào khả năng hạn chế quyền truy cập của hệ điều hành, trình duyệt có thể bảo vệ một số quy trình nhất định khỏi các tính năng không an toàn Chẳng hạn, trình duyệt Chrome giới hạn quyền truy cập vào tệp tin cho các quy trình xử lý đầu vào người dùng, như quy trình trình kết xuất, nhằm ngăn chặn các mối đe dọa tiềm ẩn.
Các quy trình trong Chrome có không gian bộ nhớ riêng, dẫn đến việc chúng thường chứa các bản sao của cơ sở hạ tầng chung như V8, công cụ JavaScript của Chrome Điều này làm tăng mức sử dụng bộ nhớ vì các quy trình không thể chia sẻ tài nguyên như các luồng trong cùng một quy trình Để tiết kiệm bộ nhớ, Chrome giới hạn số lượng quy trình có thể được quay vòng, với giới hạn thay đổi tùy theo dung lượng bộ nhớ và CPU của thiết bị Khi đạt đến giới hạn này, Chrome sẽ bắt đầu chạy nhiều tab từ cùng một trang web trong một quy trình.
Điều gì xảy ra trong điều hướng?
Quá trình trình duyệt xử lý mọi hoạt động bên ngoài tab, bao gồm CPU, GPU, bộ nhớ và kiến trúc đa quy trình Trong đó, các chủ đề của trình duyệt như giao diện người dùng, luồng mạng và luồng lưu trữ đảm nhiệm các nhiệm vụ khác nhau: giao diện người dùng vẽ các nút và trường đầu vào, luồng mạng xử lý ngăn xếp mạng để nhận dữ liệu từ internet, và luồng lưu trữ kiểm soát quyền truy cập vào các tệp Khi người dùng nhập URL vào thanh địa chỉ, đầu vào này được xử lý bởi chuỗi giao diện người dùng của quy trình trình duyệt.
2.6.1 Điều hướng đơn giản: a) Xử lí đầu vào:
Khi người dùng bắt đầu nhập vào thanh địa chỉ, điều đầu tiên mà luồng
UI cần xác định xem đây là truy vấn tìm kiếm hay URL Trong Pixel, thanh địa chỉ hoạt động như một trường nhập tìm kiếm, do đó, luồng UI phải phân tích cú pháp để quyết định có nên dẫn đến công cụ tìm kiếm hay trang web yêu cầu Bắt đầu điều hướng là bước tiếp theo trong quy trình này.
Khi người dùng nhấn enter, giao diện người dùng sẽ khởi động một cuộc gọi mạng để tải nội dung trang web, kèm theo biểu tượng loading spinner hiển thị ở góc tab Quá trình mạng sẽ thực hiện các giao thức cần thiết như tra cứu DNS và thiết lập kết nối TLS cho yêu cầu.
Tại thời điểm này, luồng mạng có khả năng nhận tiêu đề chuyển hướng từ máy chủ, cho phép giao tiếp với luồng UI mà máy chủ yêu cầu Điều này dẫn đến việc khởi động một yêu cầu URL mới để tiếp tục quá trình.
Khi nội dung phản hồi bắt đầu xuất hiện, luồng mạng sẽ kiểm tra vài byte đầu tiên để xác định loại dữ liệu Tiêu đề Content-Type của phản hồi cung cấp thông tin về loại dữ liệu, nhưng do có thể thiếu hoặc không chính xác, nên việc đánh hơi Loại MIME là cần thiết trong trường hợp này.
Nếu phản hồi là tệp HTML, dữ liệu sẽ được chuyển sang quá trình kết xuất Ngược lại, nếu phản hồi là tệp zip hoặc các tệp khác, điều đó có nghĩa là yêu cầu tải xuống và dữ liệu cần được chuyển cho trình quản lý tải xuống Tại đây, cũng diễn ra quá trình kiểm tra SafeBrowsing; nếu miền và dữ liệu phản hồi khớp với trang web độc hại đã biết, chuỗi mạng sẽ cảnh báo để hiển thị trang cảnh báo Đồng thời, kiểm tra Chặn đọc nguồn gốc chéo cũng được thực hiện.
(CORB) xảy ra để đảm bảo dữ liệu chéo trang web nhạy cảm không được đưa vào quá trình kết xuất. d) Tìm quy trình kết xuất
Sau khi hoàn tất tất cả các kiểm tra và luồng mạng xác nhận rằng trình duyệt có thể điều hướng đến trang web mong muốn, luồng mạng sẽ thông báo cho luồng giao diện người dùng rằng dữ liệu đã sẵn sàng Lúc này, chủ đề giao diện người dùng sẽ tìm kiếm một quá trình kết xuất để tiếp tục hiển thị trang web.
Để tối ưu hóa thời gian phản hồi mạng, việc cải thiện tốc độ xử lý là cần thiết Khi chuỗi giao diện người dùng gửi yêu cầu URL đến mạng, nó đã xác định trang web cần truy cập Giao diện người dùng chủ động tìm kiếm và bắt đầu quá trình kết xuất song song với yêu cầu mạng Nhờ đó, nếu mọi thứ diễn ra thuận lợi, quá trình kết xuất sẽ sẵn sàng khi dữ liệu từ mạng được nhận Tuy nhiên, trong trường hợp có chuyển hướng chéo trang web, quy trình chờ này có thể không được áp dụng và cần có phương pháp khác.
Sau khi dữ liệu và quá trình kết xuất đã sẵn sàng, một IPC được gửi từ quá trình trình duyệt đến quá trình kết xuất để cam kết điều hướng, đồng thời truyền luồng dữ liệu để quá trình kết xuất tiếp tục nhận dữ liệu HTML Khi quá trình trình duyệt nhận được xác nhận rằng cam kết đã xảy ra, điều hướng hoàn tất và giai đoạn tải tài liệu bắt đầu.
Tại thời điểm này, địa chỉ thanh được cập nhật và giao diện người dùng hiển thị cảnh báo bảo mật cùng với cài đặt trang web mới Lịch sử phiên sẽ được cập nhật để các nút quay lại và chuyển tiếp hoạt động hiệu quả với trang web vừa truy cập Khi đóng tab hoặc cửa sổ, lịch sử phiên sẽ được lưu trữ để dễ dàng khôi phục tab sau này.
Khi điều hướng được thực hiện, quá trình kết xuất sẽ tải tài nguyên và hiển thị trang Sau khi kết thúc quá trình kết xuất, IPC sẽ được gửi trở lại quy trình trình duyệt, sau khi tất cả các sự kiện onload trên các khung đã được kích hoạt và hoàn tất Lúc này, luồng UI sẽ dừng con quay tải trên tab.
2.6.2 Điều hướng đến một trang web khác:
Quá trình điều hướng đơn giản đã hoàn tất, nhưng nếu người dùng thay đổi URL trong thanh địa chỉ, trình duyệt sẽ thực hiện các bước tương tự để truy cập các trang web khác Trước khi tiếp tục, trình duyệt cần xác minh với trang web hiện tại xem họ có quan tâm đến sự kiện beforeunload hay không.
Khi điều hướng bắt đầu từ quá trình kết xuất, quá trình này sẽ kiểm tra xử lý beforeunload trước tiên Sau đó, nó tiếp tục với quy trình tương tự như khi trình duyệt khởi động điều hướng Điểm khác biệt duy nhất là yêu cầu điều hướng được khởi động từ quá trình kết xuất đến trình duyệt.
Khi điều hướng đến một trang web mới, một quy trình kết xuất riêng biệt được khởi động để xử lý điều hướng, trong khi đó, quá trình kết xuất hiện tại vẫn được duy trì để quản lý các sự kiện như unload.
Khi điều hướng xảy ra, luồng mạng kiểm tra miền với phạm vi của nhân viên dịch vụ đã đăng ký Nếu có một service worker cho URL đó, quy trình kết xuất sẽ thực thi mã service worker Nhân viên dịch vụ có khả năng tải dữ liệu từ bộ nhớ cache, giúp giảm thiểu yêu cầu dữ liệu từ mạng, hoặc có thể yêu cầu tài nguyên mới từ mạng.
Các quy trình kết xuất xử lý nội dung web
Quá trình kết xuất đảm nhận mọi hoạt động bên trong tab, trong đó luồng chính xử lý hầu hết mã gửi đi Đôi khi, một số phần của JavaScript được xử lý bởi các chuỗi nhân viên Để đảm bảo việc render trang diễn ra hiệu quả và mượt mà, compositor và raster threads cũng hoạt động trong quá trình kết xuất.
Công việc cốt lõi của quá trình kết xuất là biến HTML, CSS và JavaScript thành một trang web mà người dùng có thể tương tác.
Phân tích cú pháp
Khi quy trình kết xuất nhận được thông báo cam kết cho điều hướng và bắt đầu nhận dữ liệu HTML, luồng chính sẽ phân tích cú pháp chuỗi văn bản HTML, chuyển đổi nó thành Document Object Model (DOM).
DOM là đại diện nội bộ của trình duyệt cho trang web, bao gồm cấu trúc dữ liệu và API mà các nhà phát triển web có thể sử dụng để tương tác thông qua JavaScript.
Một trang web thường sử dụng các tài nguyên bên ngoài như hình ảnh, CSS và JavaScript, và những tập tin này cần được tải từ mạng hoặc bộ đệm Để tăng tốc quá trình, "preload scanner" được chạy đồng thời với trình phân tích cú pháp HTML, giúp phát hiện các thẻ như hoặc Khi phát hiện, preload scanner sẽ gửi yêu cầu đến luồng mạng, tạo ra các mã thông báo cần thiết để xây dựng DOM một cách hiệu quả hơn.
2.8.3 JavaScript có thể chặn phân tích cú pháp:
Khi trình phân tích cú pháp HTML gặp thẻ , nó sẽ tạm dừng việc phân tích tài liệu để tải, phân tích và thực thi mã JavaScript Điều này là cần thiết vì JavaScript có khả năng thay đổi cấu trúc của tài liệu thông qua các phương thức như document.write(), ảnh hưởng đến toàn bộ DOM Do đó, trình phân tích cú pháp HTML phải chờ mã JavaScript hoàn thành trước khi tiếp tục quá trình phân tích tài liệu HTML.
Gợi ý cho trình duyệt cách chúng ta muốn tải tài nguyên
Các nhà phát triển web có nhiều phương pháp để gửi gợi ý đến trình duyệt nhằm tải tài nguyên một cách hiệu quả Nếu không sử dụng document.write() trong JavaScript, họ có thể áp dụng thuộc tính async hoặc defer để tối ưu hóa quá trình tải.
Trình duyệt sẽ tải và thực thi mã JavaScript không đồng bộ mà không làm chặn quá trình phân tích cú pháp Chúng ta có thể sử dụng mô-đun JavaScript nếu cần thiết Thẻ cho phép thông báo cho trình duyệt rằng tài nguyên này rất quan trọng cho điều hướng hiện tại, do đó, chúng ta muốn tải nó xuống càng sớm càng tốt.
Tính toán kiểu
Một DOM đơn giản không đủ để hình dung giao diện trang, vì các phần tử có thể được định dạng qua CSS Trình phân tích chính sẽ xử lý CSS và tính toán kiểu dáng cho từng nút DOM Thông tin này cho biết kiểu nào được áp dụng cho từng phần tử dựa trên bộ chọn CSS.
Mặc dù không cung cấp CSS, mỗi nút DOM vẫn có kiểu tính toán riêng, với thẻ hiển thị lớn hơn thẻ
và lề được xác định cho từng phần tử Điều này xảy ra do trình duyệt áp dụng một biểu định kiểu mặc định.Bố cục
Bố cục là quá trình xác định hình học của các phần tử trên trang web Luồng chính đi qua DOM, nơi các kiểu được tính toán để tạo ra cây bố cục, cung cấp thông tin về tọa độ x, y và kích thước hộp giới hạn Cây bố cục có cấu trúc tương tự như cây DOM, nhưng chỉ chứa thông tin liên quan đến những gì hiển thị trên trang.
Hiệu suất
Điều chỉnh hiệu suất trang web cần được thực hiện một cách linh hoạt, vì mỗi trang web có đặc điểm riêng Do đó, việc đo lường hiệu suất của trang web là rất quan trọng để xác định những biện pháp tối ưu nhất cho từng trường hợp cụ thể.
Tổng hợp
Tổng hợp là kỹ thuật tách các phần của trang thành các lớp riêng biệt và sắp xếp chúng thành một chuỗi tổng hợp Khi cuộn xảy ra, các lớp đã được raster hóa cho phép ghép một khung mới dễ dàng Hoạt cảnh cũng có thể được tạo ra bằng cách di chuyển các lớp và ghép một khung hình mới.
Xử lý Logic
Hiển thị một trang Web cơ bản
Trong thư viện PyQt5 có cung cấp một hàm QWebEngineView(), nó sẽ tải Url bằng cách sử dụng phương thức setUrl() với một đối số truyền vào tương ứng.
Và phương thức GET luôn được sử dụng để tải Url.
Hoặc sử dụng hàm currentWidget() và phương thức setUrl() dưới đây đều được.
Thêm thanh điều hướng và một số nút điều hướng cơ bản
Về cơ bản, thư viện PyQt5 cũng tương tự một số thư viện khác Dưới đây là
Chúng ta có thể thêm nhiều nút khác vào trang web bằng cách sử dụng các phương thức như forward() và reload() để thay thế cho nút "trở lại trang web trước".
Xử lý logic khi thay đổi url trên thanh tìm kiếm
Khi người dùng nhập từ khóa và nhấn enter, hàm update_urlbar() sẽ được gọi Nếu trang hiện tại không thay đổi, không cần tải lại trang Tuy nhiên, nếu trang là an toàn, chúng ta sẽ hiển thị một biểu tượng để người dùng nhận biết Tiếp theo, lịch sử tìm kiếm sẽ được lưu vào cơ sở dữ liệu thông qua hàm save_history() Đây là cách hoạt động của hàm save_history() trong hệ thống.
Và một số logic khác
Hiển thị lịch sử duyệt Web.
Xoá, Tìm kiếm lịch sử duyệt Web.
Chúng ta tham khảo mã nguồn trên này nhé:https://github.com/KWalkerNNK/pixel-browser
Kết Quả & Kết Luận
Kết quả
4.1.3 Trang tìm kiếm của Google:
Kết luận & Hạn chế
Các thành phần của trình duyệt Web đã được phát triển theo lộ trình hợp lý, mang lại khả năng ứng dụng thực tế cao Bài viết này sẽ hướng dẫn bạn những bước đầu tiên trong việc phát triển một trình duyệt Web sử dụng Python, NodeJS và các công cụ hỗ trợ đi kèm.
Nắm được cách lập trình mạng cơ bản với Python, MySQL và NodeJS.
Xây dựng được hệ thống khá hoàn chỉnh.
Giao diện còn chưa được bắt mắt Thiếu một số tính năng.
