Đồ án cơ sở 4 đề tài xây dựng trình duyệt web

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH ĐỒ ÁN CƠ SỞ ĐỀ TÀI: XÂY DỰNG TRÌNH DUYỆT WEB Giảng viên hướng dẫn: ThS NGUYỄN VĂN BÌNH Sinh viên thực : NGUYỄN NHƯ KHÁNH PHAN TRUNG NGUYÊN Lớp : 20SE3 Đà Nẵng, tháng 11 năm 2022 ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT - HÀN ĐỒ ÁN CƠ SỞ ĐỀ TÀI: XÂY DỰNG TRÌNH DUYỆT WEB Đà Nẵng, tháng 11 năm 2022 LỜI NÓI ĐẦU Vào năm 90 kỉ XX, trình duyệt web đầu tiên, gọi WorldWideWeb phát minh Sir Tim Berners-Lee Năm 1993 năm đầy ấn tượng với việc phát hành Mosaic, công nhận "Trình duyệt phổ biến giới" Đó bước tiến sơ khai trình duyệt Web, đánh giấu bước tiến quan trọng cho sau này! Pixel Browser, trình duyệt web miễn phí, phát triển ngơn ngữ Python Framework khác Pixel Browser nhắm đến đơn giản, ổn định, tốc độ xử lí, tính tìm kiếm, đa tiến trình giao diện người dùng, Với việc học mơ hình, khuôn khổ Framework khác nhau, chúng em bước hồn thành đề tài giao, cịn nhiều thiếu sót cần hồn thiện tiếp tục phát triển LỜI CẢM ƠN Để dự án đạt kết tốt đẹp, chúng em nhận hỗ trợ, giúp đỡ thầy Với tình cảm sâu sắc, chân thành, cho phép chúng em bày tỏ lòng biết ơn sâu sắc đến tất quý thầy cô tạo điều kiện giúp đỡ trình học tập nghiên cứu phát triển đề tài Trước hết chúng em xin gửi tới thầy cô Trường Đại học Công nghệ thông tin Truyền thông Việt – Hàn lời chào trân trọng, lời chúc sức khỏe lời cảm ơn sâu sắc Với quan tâm, dạy dỗ, bảo tận tình chu đáo giảng viên truyền tải kĩ cần thiết, đến chúng hồn thành đồ án môn học Đặc biệt chúng em xin gửi lời cảm ơn chân thành tới thầy giáo – ThS Nguyễn Văn Bình quan tâm giúp đỡ, giúp đỡ tận tình chúng em hồn thành tốt đồ án thời gian qua Với điều kiện thời gian kinh nghiệm hạn chế, đồ án khơng thể tránh thiếu sót Chúng em mong nhận bảo, đóng góp ý kiến thầy để em có điều kiện bổ sung, nâng cao ý thức mình, phục vụ tốt công tác thực tế sau Chúng em xin chân thành cảm ơn! MỤC LỤC Chương Tìm hiểu xác định toán .6 1.1 Giới thiệu chung: 1.2 Bài tốn trình duyệt web: 1.3 Các công nghệ: 1.3.1 PyQt5: 1.3.2 NodeJS: 1.3.3 MySQL: 1.3.4 Và số công nghệ khác: Chương Kiến trúc trình duyệt .8 2.1 Cốt lõi máy tính: .8 2.1.1 CPU: .8 2.1.2 GPU 2.2 Thực thi chương trình theo quy trình luồng 2.3 Kiến trúc trình duyệt 10 2.4 Quá trình kiểm sốt gì? 12 2.5 Lợi ích kiến trúc đa trình Pixel .12 2.6 Điều xảy điều hướng? 13 2.6.1 Điều hướng đơn giản: 14 2.6.2 Điều hướng đến trang web khác: 18 2.6.3 Service Worker: 19 2.6.4 Điều hướng tải trước: 20 2.7 Các quy trình kết xuất xử lý nội dung web 20 2.8 Phân tích cú pháp 20 2.8.1 Xây dựng DOM: 20 2.8.2 Tải tài nguyên con: 21 2.8.3 JavaScript chặn phân tích cú pháp: 21 2.9 Gợi ý cho trình duyệt cách muốn tải tài nguyên 21 2.10 Tính tốn kiểu .22 2.11 Bố cục 23 2.12 Hiệu suất .23 2.13 Tổng hợp .23 Chương Xử lý Logic 24 3.1 Hiển thị trang Web bản: 24 3.2 Thêm điều hướng số nút điều hướng bản: 25 3.3 Xử lý logic thay đổi url tìm kiếm: 25 3.4 Và số logic khác: 26 Chương Kết Quả & Kết Luận 27 4.1 Kết quả: .27 4.1.1 Trang Home: .27 4.1.2 Một trang bất kì: 27 4.1.3 Trang tìm kiếm Google: 28 4.1.4 Lịch sử duyệt Web: 28 4.2 Kết luận & Hạn chế: 29 4.2.1 Kết quả: 29 4.2.2 Hạn chế: 29 DANH MỤC TÀI LIỆU THAM KHẢO .30 Chương Tìm hiểu xác định toán 1.1 Giới thiệu chung: Trước thưởng thức ăn hay loại sơn hào hải vị đó, cần lên cơng thức chế biến nó, cộng hưởng với gia vị nhân gian Thưởng thức nó, cảm nhận mỹ vị nó… Một sản phẩm web hay app vậy! Chúng ta cần xác định toán cho sản phẩm: “Nó cần gì, đạt gì? Kết nào, có sánh ngang với sơn hào hải vị khơng? ” Sau đó, tìm hiểu công nghệ để chế biến nên sản phẩm hồn hảo… Cịn chờ nữa, vào toán nào! 1.2 Bài toán trình duyệt web: Browser phần mềm hiển thị nội dung trang web Nhiệm vụ tải trang web biểu diễn lại trang để người dùng xem hiểu Về tất biết hoạt động browser đến lúc là: - Người dùng nhập đường dẫn trang web vào địa browser - Browser tải xuống "tài liệu" từ địa hiển thị chúng Nó đảm nhận 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ông việc 1.3 Các công nghệ: 1.3.1 PyQt5: - - - Qt tập hợp thư viện C đa tảng triển khai API cấp cao để truy cập nhiều khía cạnh hệ thống máy tính để bàn thiết bị di động đại Chúng bao gồm dịch vụ định vị định vị, đa phương tiện, kết nối NFC Bluetooth, trình duyệt web dựa Chromium, phát triển giao diện người dùng truyền thống PyQt5 tập hợp toàn diện ràng buộc Python cho Qt v5 Nó triển khai dạng 35 mô-đun mở rộng cho phép Python sử dụng ngôn ngữ phát triển ứng dụng thay cho C tất tảng hỗ trợ bao gồm iOS Android PyQt5 nhúng ứng dụng dựa C phép người dùng ứng dụng cấu hình nâng cao chức ứng dụng 1.3.2 NodeJS: - - NodeJS tảng xây dựng “V8 Javascript Engine” viết C++ Javascript Nền tảng phát triển Ryan Lienhart Dahl vào năm 2009 Node.js đời Developer đời đầu JavaScript mở rộng từ thứ chạy trình duyệt thành thứ chạy máy dạng ứng dụng độc lập 1.3.3 MySQL: - - MySQL hệ thống quản trị sở liệu mã nguồn mở (gọi tắt RDBMS) hoạt động theo mô hình Client-Server Với RDBMS viết tắt Relational Database Management System MySQL tích hợp Apache, PHP MySQL quản lý liệu thông qua sở liệu Mỗi sở liệu có nhiều bảng quan hệ chứa liệu MySQL có cách truy xuất mã lệnh tương tự với ngôn ngữ SQL MySQL phát hành từ thập niên 90s Các ứng dụng web lớn Facebook, Twitter, YouTube, Google, Yahoo! dùng MySQL cho mục đích lưu trữ liệu Kể ban đầu dùng hạn chế tương thích với nhiều hạ tầng máy tính quan trọng Linux, macOS, Microsoft Windows, Ubuntu 1.3.4 Và số công nghệ khác: Các công nghệ khác kèm sử dụng như: o Express o Handelbars… Chương Kiến trúc trình duyệt 2.1 Cốt lõi máy tính: Để hiểu mơi trường mà trình duyệt chạy, cần hiểu vài phận máy tính chúng làm 2.1.1 CPU: Đầu tiên Bộ xử lý trung tâm - hay CPU CPU coi não máy tính Một lõi CPU, xử lý tác vụ khác Nó xử lý thứ từ toán học đến nghệ thuật Trong khứ, hầu hết CPU chip Một lõi giống CPU khác sống chip Trong phần cứng đại, thường nhận nhiều lõi, mang lại nhiều sức mạnh tính tốn cho điện thoại máy tính xách tay 2.1.2 GPU Bộ xử lý đồ họa - hay GPU phận khác máy tính Khơng giống CPU, GPU giỏi việc xử lý tác vụ đơn giản nhiều lõi lúc Đúng với tên nó, phát triển để xử lý đồ họa Đây lý bối cảnh đồ họa "sử dụng GPU" "được hỗ trợ GPU" có liên quan với kết xuất nhanh tương tác mượt mà Trong năm gần đây, với điện toán GPU tăng tốc, ngày có nhiều tính tốn trở nên khả thi GPU Khi khởi động ứng dụng máy tính điện thoại mình, CPU GPU thứ cung cấp lượng cho ứng dụng Thông thường, ứng dụng chạy CPU GPU cách sử dụng chế Hệ điều hành cung cấp 2.2 Thực thi chương trình theo quy trình luồng Một khái niệm khác cần nắm bắt trước sâu vào kiến trúc trình duyệt Process Thread Một q trình mơ tả chương trình thực thi ứng dụng Một luồng luồng sống bên quy trình thực thi phần chương trình quy trình Khi khởi động ứng dụng, trình tạo Chương trình tạo (các) luồng để giúp hoạt động Hệ điều hành cung cấp cho trình nhớ để làm việc tất trạng thái ứng dụng lưu giữ không gian nhớ riêng Khi đóng ứng dụng, q trình biến Hệ điều hành giải phóng nhớ Một q trình u cầu Hệ điều hành thực quy trình khác để chạy tác vụ khác Khi điều xảy ra, phần khác nhớ phân bổ cho q trình Nếu hai quy trình cần nói chuyện, họ làm cách sử dụng Inter Process Communication (IPC) Nhiều ứng dụng thiết kế để hoạt động theo cách “worker process” khơng phản hồi, khởi động lại mà khơng dừng quy trình khác chạy phần khác ứng dụng (CORB) xảy để đảm bảo liệu chéo trang web nhạy cảm khơng đưa vào q trình kết xuất d) Tìm quy trình kết xuất Khi tất kiểm tra thực luồng mạng tự tin trình duyệt điều hướng đến trang web yêu cầu, luồng Mạng cho luồng giao diện người dùng biết liệu sẵn sàng Chủ đề giao diện người dùng sau tìm thấy q trình kết xuất để tiếp tục hiển thị trang web Vì yêu cầu mạng vài trăm mili giây để lấy lại phản hồi, nên việc tối ưu hóa để tăng tốc trình áp dụng Khi chuỗi giao diện người dùng gửi yêu cầu URL đến luồng mạng bước 2, biết họ điều hướng đến trang web Chủ đề giao diện người dùng cố gắng chủ động tìm bắt đầu trình kết xuất song song với yêu cầu mạng Bằng cách này, tất diễn mong đợi, q trình kết xuất vị trí chờ luồng mạng nhận liệu Quy trình chờ khơng sử dụng điều hướng chuyển hướng chéo trang web, trường hợp cần quy trình khác e) Cam kết điều hướng: Bây liệu trình kết xuất sẵn sàng, IPC gửi từ trình trình duyệt đến trình kết xuất để cam kết điều hướng Nó truyền luồng liệu để trình kết xuất tiếp tục nhận liệu HTML Khi trình trình duyệt nghe xác nhận cam kết xảy trình kết xuất, điều hướng hoàn tất giai đoạn tải tài liệu bắt đầu Tại thời điểm này, địa cập nhật giao diện người dùng cảnh báo bảo mật cài đặt trang web phản ánh thông tin trang web trang Lịch sử phiên (lịch sử duyệt web) cho tab cập nhật để nút quay lại, chuyển tiếp bước qua trang web vừa điều hướng đến Để tạo điều kiện khôi phục tab, phiên đóng tab cửa sổ, lịch sử phiên lưu trữ f) Tải hoàn tất: Khi điều hướng thực hiện, trình kết xuất tiếp tục tải tài nguyên hiển thị trang Khi trình kết xuất “kết thúc” kết xuất, gửi IPC trở lại quy trình trình duyệt (đây sau tất kiện onload kích hoạt tất khung trang hoàn thành việc thực thi) Tại thời điểm này, luồng UI dừng quay tải tab 2.6.2 Điều hướng đến trang web khác: Việc điều hướng đơn giản hồn tất! Nhưng điều xảy người dùng đặt lại URL khác vào địa chỉ? Chà, trình trình duyệt trải qua bước tương tự để điều hướng đến trang web khác Nhưng trước làm điều đó, cần kiểm tra với trang web hiển thị họ quan tâm đến beforeunload event (sự kiện trước tải) Nếu điều hướng trình kết xuất, trình kết xuất trước tiên kiểm tra xử lý beforeunload Sau đó, trải qua trình tương tự trình trình duyệt bắt đầu điều hướng Sự khác biệt yêu cầu điều hướng khởi động từ trình kết xuất đến trình trình duyệt Khi điều hướng thực đến trang web khác với trang web hiển thị, quy trình kết xuất riêng biệt gọi đến để xử lý điều hướng trình kết xuất giữ xung quanh để xử lý kiện unload 2.6.3 Service Worker: Khi điều hướng xảy ra, luồng mạng kiểm tra miền so với phạm vi nhân viên dịch vụ đăng ký, service worker (nhân viên dịch vụ) đăng ký cho URL đó, chuỗi UI tìm quy trình kết xuất để thực thi mã service worker Nhân viên dịch vụ tải liệu từ nhớ cache, loại bỏ nhu cầu yêu cầu liệu từ mạng yêu cầu tài nguyên từ mạng 2.6.4 Điều hướng tải trước: Điều hướng tải trước chế để tăng tốc trình, cách tải tài nguyên song song khởi động nhân viên dịch vụ Nó đánh dấu yêu cầu tiêu đề, cho phép máy chủ định gửi nội dung khác cho yêu cầu này; Ví dụ: cập nhật liệu thay tài liệu đầy đủ 2.7 Các quy trình kết xuất xử lý nội dung web Quá trình kết xuất chịu trách nhiệm cho thứ xảy bên tab Trong q trình kết xuất, luồng xử lý hầu hết mã gửi Đôi phần JavaScript xử lý chuỗi nhân viên Compositor raster threads chạy bên renderer process để render trang cách hiệu trơn tru Công việc cốt lõi trình kết xuất biến HTML, CSS JavaScript thành trang web mà người dùng tương tác 2.8 Phân tích cú pháp 2.8.1 Xây dựng DOM: Khi quy trình kết xuất nhận thơng báo cam kết cho điều hướng bắt đầu nhận liệu HTML, luồng bắt đầu phân tích cú pháp chuỗi văn (HTML) biến thành Document Object Model (DOM) DOM đại diện nội trình duyệt trang cấu trúc liệu API mà nhà phát triển web tương tác thông qua JavaScript 2.8.2 Tải tài nguyên con: Một trang web thường sử dụng tài nguyên bên hình ảnh, CSS JavaScript Những tập tin cần tải từ mạng đệm Chủ đề u cầu họ tìm thấy chúng phân tích cú pháp để xây dựng DOM, để tăng tốc, "preload scanner" chạy đồng thời Nếu có thứ tài liệu HTML, preload scanner nhìn trộm mã thơng báo tạo trình phân tích cú pháp HTML gửi yêu cầu đến luồng mạng quy trình trình duyệt 2.8.3 JavaScript chặn phân tích cú pháp: Khi trình phân tích cú pháp HTML tìm thấy thẻ, tạm dừng phân tích cú pháp tài liệu HTML phải tải, phân tích cú pháp thực thi mã JavaScript Tại sao? JavaScript thay đổi hình dạng tài liệu cách sử dụng thứ document.write() thay đổi toàn cấu trúc DOM Đây lý trình phân tích cú pháp HTML phải đợi JavaScript chạy trước tiếp tục phân tích cú pháp tài liệu HTML 2.9 Gợi ý cho trình duyệt cách muốn tải tài nguyên Có nhiều cách để nhà phát triển web gửi gợi ý đến trình duyệt để tải tài nguyên cách độc đáo Nếu JavaScript khơng sử dụng document.write(), thêm thuộc tính async defer vào thẻ Sau đó, trình duyệt tải chạy mã JavaScript khơng đồng khơng chặn phân tích cú pháp Chúng ta sử dụng mơ-đun JavaScript điều phù hợp cách để thơng báo cho trình duyệt tài nguyên chắn cần thiết cho điều hướng muốn tải xuống sớm tốt 2.10 Tính tốn kiểu Có DOM khơng đủ để biết trang trơng tạo kiểu cho phần tử trang CSS Luồng phân tích CSS xác định kiểu tính tốn cho nút DOM Đây thông tin loại kiểu áp dụng cho phần tử dựa chọn CSS Ngay không cung cấp CSS nào, nút DOM có kiểu tính tốn hiển thị lớn thẻ lề xác định cho phần tử Điều trình duyệt có biểu định kiểu mặc định 2.11 Bố cục Bố cục trình để tìm hình học phần tử Luồng qua DOM kiểu tính tốn tạo bố cục có thơng tin tọa độ x,y kích thước hộp giới hạn Cây bố cục có cấu trúc tương tự DOM, chứa thơng tin liên quan đến hiển thị trang 2.12 Hiệu suất Điều chỉnh hiệu suất khác trang web khác nhau, điều quan trọng phải đo lường hiệu suất trang web định điều phù hợp với trang web 2.13 Tổng hợp Tổng hợp kỹ thuật để tách phần trang thành lớp, xếp chúng cách riêng biệt tổng hợp dạng trang chuỗi riêng biệt gọi chuỗi tổng hợp Nếu cuộn xảy ra, lớp rasterized, tất phải làm ghép khung Hoạt cảnh đạt theo cách tương tự cách di chuyển lớp ghép khung hình Chương Xử lý Logic 3.1 Hiển thị trang Web bản: Trong thư viện PyQt5 có cung cấp hàm QWebEngineView(), tải Url cách sử dụng phương thức setUrl() với đối số truyền vào tương ứng Và phương thức GET sử dụng để tải Url Hoặc sử dụng hàm currentWidget() phương thức setUrl() 3.2 Thêm điều hướng số nút điều hướng bản: Về bản, thư viện PyQt5 tương tự số thư viện khác Dưới “nút trở lại trang web trước” Bằng cách hình phía dưới, thêm vài nút khác sử dụng phương thức forward(), reload(),… để thay thế! 3.3 Xử lý logic thay đổi url tìm kiếm: Khi người dùng nhập từ khố tìm kiếm nhấn enter Chúng ta gọi đến hàm update_urlbar() Nếu trang khơng việc phải tải lại trang Nhưng trang web an tồn, set Icon người dùng biết trang web an toàn! Việc lưu vào Database cách gọi hàm save_history() ngược lại Đây chế hàm save_history() chúng ta! 3.4 Và số logic khác: Hiển thị lịch sử duyệt Web Xố, Tìm kiếm lịch sử duyệt Web Dừng tải trang… Chúng ta tham khảo mã nguồn nhé: https://github.com/KWalkerNNK/pixel-browser Chương Kết Quả & Kết Luận 4.1 Kết quả: 4.1.1 Trang Home: 4.1.2 Một trang bất kì: 4.1.3 Trang tìm kiếm Google: 4.1.4 Lịch sử duyệt Web: 4.2 Kết luận & Hạn chế: 4.2.1 Kết quả:  Về bản, thành phần trình duyệt Web phát triển theo lộ trình, có khả ứng dụng thực tế cao  Nắm bước việc phát triển mộ trình duyệt Web với Python, với NodeJS công cụ kèm  Nắm cách lập trình mạng với Python, MySQL NodeJS  Xây dựng hệ thống hoàn chỉnh 4.2.2 Hạn chế:  Giao diện chưa bắt mắt  Thiếu số tính DANH MỤC TÀI LIỆU THAM KHẢO Tham khảo mã nguồn tại: Pixel Browser Tham khảo tài liệu thiết kế tại: Qt for Python Tham khảo tài liệu NodeJS tại: Nodejs.org Tham khảo số hình ảnh tại: Kho ảnh miễn phí · Pexels