(Tiểu luận) đồ á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 ĐỒÁNCƠSỞ4 ĐỀ 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 ĐỒÁNCƠSỞ4 ĐỀ 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, khn khổ Framework khác nhau, chúng em bước hoà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 cô 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 tốn 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 2.1 Cốt lõi máy tính: 2.1.1 CPU: 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 Q 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 tố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 tố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à: - o o o o 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: Phân giải DNS Truyền HTTP Hiển thị 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: o o Các công nghệ khác kèm sử dụng như: Express 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ừ tố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, q 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 yê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 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 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 trình kết xuất để tiếp tục hiển thị trang web Vì 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 q 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, 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 để q 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 q trình kết xuất, điều hướng hồ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 hoà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 q 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 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 q 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 ngun bên ngồi 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