Đồ Án Cơ Sở 4 Đề Tài Nghiên Cứu Xây Dựng Một Trình Duyệt Đơn Giản.docx

MẪU ĐỒ ÁN KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ 4 ĐỀ TÀI NGHIÊN CỨU XÂY DỰNG MỘT TRÌNH DUYỆT ĐƠN GIẢN MỞ ĐẦU Trong thời đại công nghệ số hiện nay, i[.]

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

ĐỒ ÁN CƠ SỞ 4

ĐỀ TÀI: NGHIÊN CỨU XÂY DỰNG MỘT TRÌNH DUYỆT ĐƠN GIẢN

MỞ ĐẦU

Trong thời đại công nghệ số hiện nay, internet là một phần tất yếu trongcuộc sống của hầu hết mọi người trên thế giới Từ khi internet ra đời nó đãphát triển một cách nhanh chóng và đem lại nhiều lợi ích mà ta không thể phủnhận được, Internet giúp con người rút ngắn khoảng cách, có thể giao tiếp vớinhau dù ở cách nhau một vòng trái đất, ngoài ra nó cũng mang đến một nguồnthông tin khổng lồ và ta có thể dễ dàng tìm kiếm, hiện nay người ta còn có thểmua hàng trực tuyến ở trên internet và vô số lợi ích mà internet đã, đang và sẽmang đến cho chúng ta Có thể thấy rằng Internet là một phần không thể thiếucủa nhân loại

Và để sử dụng internet thì trình duyệt là công cụ không thể thiếu Và trong

đề tài này tôi sẽ nghiên cứu để xây dựng một trình duyệt đơn giản Với mụctiêu hiểu được cách hoạt động của trình duyệt

LỜI CẢM ƠN

Báo cáo đồ án này là quá trình nghiên cứu và thực hiện của tôi dưới sự giúp đỡ,

hỗ trợ của rất nhiều người người

Lời đầu tiên tôi xin chân thành cảm ơn THS Trần Uyên Trang đã trực tiếp giúp

đỡ tôi tìm hiều và nghiên cứu thực hiện đề tài, cung cấp tài liệu, thông tin cần thiếtcho báo cáo này

Xin cảm ơn ban lãnh đạo trường Đại học Công nghệ thông tin và Truyền thôngViệt Hàn, khoa Kho học máy tính đã tạo điều kiện cho tôi thực hiện đồ án củamình

Cuối cùng tôi xin chân thành cảm ơn gia đình, người thân và bạn bè đã luôn bêncạnh ủng hộ, động viên trong suốt quá trình tôi thực hiện đồ án 4

Tôi xin chân thành cảm ơn!

MỤC LỤC

Trang

MỞ ĐẦU 1

Chương 1 Giới thiệu 7

1.1 Tổng quan 7

1.2 Phương pháp, kết quả 8

1.3 Cấu trúc đồ án 8

Chương 2 Cơ sở lý thuyết 9

2.1 Tổng quan về lập trình mạng 9

2.1.1 Khái niệm về lập trình mạng 9

2.1.2 Các ngôn ngữ lập trình mạng 9

2.1.3 Các mô hình mạng 9

2.1.4 Bộ giao thức TCP/IP 11

2.1.5 TCP 12

2.1.6 UDP 13

2.1.7 Giao thức HTTP và HTTPS 13

2.2 Nghiên cứu về trình duyệt web 15

2.2.1 Tổng quan về trình duyệt web 15

2.2.2 Cách một trình duyệt web hoạt động 16

Chương 3 Triển khai 52

3.1 Code giao diện 52

3.1.1 Phần kéo thả 52

3.1.2 Phần Code 52

3.2 Kết xuất trang web để hiển thị 55

3.2.1 Kết xuất HTML 55

3.2.2 Hiển thị CSS 56

3.2.3 Hiển thị JAVASCRIPT 56

3.3 Code các chức năng 57

3.3.1 Chức năng tìm kiếm 57

3.3.2 Chức năng tải lại trang 57

3.3.3 Chức năng quay lại trang trước 58

3.3.4 Chức năng đi đến trang kế tiếp 58

DANH MỤC TÀI LIỆU THAM KHẢO 60

DANH MỤC CÁC BẢNG

TrangBảng 1: Bảng so sánh HTTP và HTTPS 15Bảng 2: Mô tả stack trình phân tích từ dưới lên 24

DANH MỤC HÌNH

Trang

Hình 1: Các tầng của giao thức TCP/IP 11

Hình 2: TCP header 12

Hình 3: UDP header 13

Hình 4: Giao thức HTTP 13

Hình 5: Trình duyệt 15

Hình 6: Cấu trúc cấp cao của trình duyệt 17

Hình 7: Quy trình của công cụ kết xuất 18

Hình 8: Luồng chính của Webkit 19

Hình 9: Luồng chính của công cụ kết xuất Gecko của Mozilla 19

Hình 10: Nút cây biểu thức toán học 20

Hình 11: Từ tài liệu nguồn đên cây phân tích 21

Hình 12: Quá trình biên dịch 22

Hình 13: Cây DOM của Đánh dấu ví dụ 26

Hình 14: Luồng phân tích cú pháp HTML (lấy từ thông số kỹ thuật HTML5) 27

Hình 15: Ví dụ mã hóa đầu vào 28

Hình 16: Cây cấu trúc của mẫu HTML 30

Hình 17: Phân tích cú pháp CSS của Webkit 33

Hình 18: Cây kết xuất và cây DOm tương ứng "Viewport" là khối chứa ban đầu Trong WebKit, nó sẽ là đối tượng "RenderView" 36

Hình 19: Cây kiểu ngữ cảnh Firefox 38

Hình 20: Cây quy tắc 38

Hình 21: Bố cục tăng dần – chỉ trình kết xuất bẩn và con của chúng được bố trí43 Hình 22: Mô hình hộp CSS2 47

Hình 23: block box 48

Hình 24: Inline box 48

Hình 25: Định dạng Block và Inline 48

Hình 26: Lines 49

Hình 27: Định vị Relative 49

Hình 28: Float 50

Hình 29: Định vị Fixed 50

Hình 30: Định vị Fixed 51

Hình 31: Giao diện 52

Hình 32: Kéo thả giao diện 52

Chương 1 Giới thiệu

1.1 Tổng quan

Interet hay mạng là một hệ thống thông tin toàn cầu có thể truy cập côngcộng gồm các mạng máy tính được liên kết với nhau Hệ thống này truyền thôngtin theo kiểu nói chuyển gói dữ liệu dựa trên một giao thức liên mạng đã đượcchuẩn hóa (giao thức IP) Hệ thống này bao gồm hàng ngàn mạng máy tính nhỏhơn của các doanh nghiệp, của các viện nghiên cứu và các trường đại học, củangười dùng cá nhân và các chính phủ trên toàn cầu, được liên kết, được liên kếtbởi một loạt các công nghệ mạng điện tử, không dây và mạng quang Internetmang theo một loạt các tài nguyên và dịch vụ thông tin, chẳng hạn như các tàilieeujvaf ứng dụng siêu văn bản được liên kết với nhau của World Wide Web(WWW), thư điện tử, điện thoại, và chia sẻ file

Nguồn gốc của Internet bắt nguồn từ sự phát triển của chuyển mạch gói vànghiên cứu do Bộ Quốc phòng Hoa Kỳ ủy quyền thực hiện vào những năm 1960

để cho phép chia sẻ thời gian của máy tính Mạng tiền thân chính, ARPANET, banđầu đóng vai tò là xương sống để kết nối các mạng lưới học thuật và quân sựkhu vực trong những năm 1970 Việc tài trợ cho Mạng lưỡi Quỹ Khoa học QuốcGia như một xương sống mới trong những năm 1980, cũng như tài trợ tư nhâncho các phần mở rộng thương mại khác, dẫn đến sự tham gia trên toàn thế giớitrong việc phát triển các công nghệ mạng mới và sáp nhập nhiều mạng Sự liênkết của các mạng thương mại và doanh nghiệp vào đầu những năm 1990 đãđánh dấu sự khởi đầu của quá trình chuyển đổi sang internet hiện đại, và tạo ra

sự tăng trưởng theo cấp số nhân khi các thế hệ máy tính cá nhân, điện thoại diđộng được kết nối với mạng

Hiện nay, khi công nghệ Internet đã phủ sóng toàn cầu thì nhu cầu sử dụnginternet ngày càng cần thiết và phải được đáp ứng tuy nhiên từ khi Internet rađời thì đi liền với những cơ hội đặt ra còn rất nhiều nhiều thách thức con ngườicần phải giải quyết Internet ra đời đã đánh dấu một bước tiến lớn của nhân loạitrong trong lĩnh vực kết nối thông tin toàn cầu Với những lợi ích to lớn vànhững kiến thức mà nó mang lại trong nhiều lĩnh vực đời sốn xã hội Internet đãtrở thành nhu cầu không thể thiếu, có thể thỏa mãn được rất nhiều nhu cầu củacon người Đối với đời sống của con người trong xã hội hiện đại, sự phủ sóng củamạng lưới Internet đã có thể thâu tóm được rất nhiều hoạt động giải trí, kinhdoanh, sản xuất Chính vì vậy, nếu không có mạng lưới Internet thì sẽ kìm hãm đirất nhiều ngành nghề Mỗi chúng ta khi có sự kết nối mạng lưới Interner thì sẽtìm kiếm được rất nhiều thông tin bổ ích, chia sẻ, giao lưu, kết bạn, trò chuyệnvới nhau Có thể nói mạng xã hội giúp chúng ta mở rộng được nhiều mối quan

hệ Các hoạt động kinh tế, văn hóa, xã hội cũng nhờ có Internet mới có thể đứngvững, tự xây dựng thương hiệu cũng như ngày càng vươn xa hơn

Sự phát triển của Internet kéo theo sự ra đời của các công cụ truy cập

được sử dùng nhiều nhất và phổ biến nhất hiện nay Nó được dùng để truy cậpthông tin trên World Wide Web Mỗi trang web, hình ảnh, video riêng lẻ đượcxác định bằng một URL riêng biệt, cho phép các trình duyệt truy xuất và hiển thịchúng trên thiết bị của người dùng Trình duyệt web đọc định dạng HTML đểhiển thị, do vậy một trang web có thể hiển thị khác nhau trên các trình duyệtkhác nhau Các trình duyệt phổ biến nhất là Chrome, Firefox, Safari, MicrosoftEdge(Edge Chromuim).Những trình duyệt hiện nay ngày càng hoàn thiện đem lạitrải nghiệm tốt hơn cho người dùng.

Nhằm mục đích nghiên cứu và hiểu sâu hơn về cách hoạt động của trìnhduyệt cũng như về mạng Internet, tôi quyết định thực hiện đồ án nghiên cứu vàxây dựng một trình duyệt đơn giản

1.2 Phương pháp, kết quả

Để có thể xây dựng được một trình duyệt ta có thể sử dụng nhiều ngôn ngữlập trình khác nhau, tuy nhiên để dễ tiếp cận hơn thì tôi sẽ chọn ngôn ngữ java

để thực hiện đồ án này vì đây là ngôn ngữ đã được học nên sẽ đỡ tốn thời gian

để học ngôn ngữ mới cũng như tôi có thêm thời gian để nghiên cứu sâu hơn vềcách mà một trình duyệt hoạt động

Sau khi hoàn thành mục tiêu tôi đặt ra là một trình duyệt với giao diện đơngiản, người dùng có thể nhập địa chỉ của trang web sau đó trình duyệt sẽ hiểnthị ra html, css và javascript của trang web đó, trình duyệt cũng có chức năngquay lại back, forward để di chuyển giữa các trang và chức năng reload để tải lạitrang web trong trường hợp có sự cố mạng hoặc trang web không được tải hếthoặc trang web bị lỗi

1.3 Cấu trúc đồ án

Phần này trình bày cấu trúc của đồ án: Chương 2, chương 3, …

Chương 2 Cơ sở lý thuyết

2.1 Tổng quan về lập trình mạng

2.1.1 Khái niệm về lập trình mạng

Vấn đề lập trình mạng liên quan đến nhiều lĩnh vự kiến thức khác nhai Từkiến thức sử dụng ngôn ngữ lập trình, phân tích thiết kế hệ thống, mô hìnhxây dựng chương trình ứng dụng mạng, kiến thức về cơ sở dữ liệu…cho đếnkiến thức truyền thông, các kiến thức các lĩnh vực liên quan như mạng điệnthoại di động, PSTN, hệ thống GPS, các mạng như Bluetueth, WUSB, mạngsensor…Nhưng có thể nói lập trình mạng có 3 vẫn đề chính cốt lõi

Hay nói cách khác, vấn đề lập trình mạng có thể được định nghĩa với côngthức sau:

2.1.3 Các mô hình mạng

Khi bắt tay vào xây dựng một ứng dụng mạng, một trong những vấn đềđầu tiên được đặt ra là lựa chọn mô hình mạng( hay còn được gọi là kiếntrúc mạng) Mặc dù phần mềm mạng rất đa dạng nhưng có thẻ chiachúng vào 2 mô hình cơ bản theo cách thức phân chia vai trò nhiệm vụcủa các thành phần: mô hình chủ-khách ( Client-Server ) và mô hìnhngang hàng ( pear-to-peer, P2P )

- Mô hình chủ khách ( Client-Server )

Trong mô hình chủ khách ứng ụng được chia làm 2 thành phần: mộtthành phần chuyên phục vụ các yêu cầu gửi đến từ các thành phầnkhác, gọi là Server; một hoặc nhiều thành phần đưa ra yêu cầu sửdụng dịch vụ gọi là Client

Server và Client chạy trên các thiết bị đầu cuối khác nhau Thiết bị đầucuối nơi chạy chương trình Server cũng thường được gọi tắt là máychủ

Trong mô hình này Server luôn hoạt động để lắng nghe yêu cầu vàphục vụ các yêu cầu của các thiết bị Client Server phải hoạt động ởtrên máy có địa chỉ IP cố định

Client có thể hoạt động ở chế độ luôn mở hoặc mở không thườngxuyên Các Client không giao tiếp trực tiếp với nhau mà chỉ giao tiếpvới Server Chương trình Client phải biết được địa chỉ IP của máy chủ

Do chương tình Server luôn hoạt động và chạy trên máy tính có IP cốđịnh và được công bố, chường trình khác có thể liên lạc với máy chủbất kỳ khi nào cần sử dụng dịch vụ do máy chủ cung cấp

Việc giao tiếp giữa Client và Server được thực hiện dưới hình thứctrao đổi thông điệp (message):

 Client gửi thông điệp yêu cầu (request message) cho Server

để mô tả công việc cần thực hiện

 Khi nhận được thông điệp này, server sẽ phân tích và xácđịnh công việc cần thực hiện

 Nếu trong quá trình xử lý sinh ra kết quả cần trả cho Clientthì Server sẽ gửi cho Client thông điệp trả lời (replymessage)

 Định dạng và ý nghĩa của các thông điệp trao đổi giữa Client

và Server được quy định bởi giao thức dùng trong ứngdụng

- Mô hình ngang hàng ( peer-to-peer, P2P )

Trong mô hình mạng ngang hàng (còn gọi là kiến trúc peer-to-peer hayviết tắt là P2P), tất cả các thành phần của hệ thống đều thực hiện cácnhiệm vụ giống nhau, không có người phục vụ (server) chuyên biệt

Như vậy trong ứng dụng P2P không có sự phụ thuộc (hoặc phụ thuộcrất ít) vào server Mỗi ứng dụng chạy trên một máy gọi là một peer.Ứng dụng trên mỗi đôi máy (các peer) trực tiếp tiến hành truyềnthông với nhau mà không thông qua một server trung gian nào Vì lý

do này mô hình được gọi là peer-to-peer Các peer này không cho cácnhà cung cấp dịch vụ quản lý mà thực chất là các máy tính cá nhân dongười dùng quản lý

Hiện nay các ứng dụng đòi hỏi lưu lượng dữ liệu lớn thường hoạtđộng theo mô hình peer-to-peer: ứng dụng phân phối file, ứng dụngchia sẻ file, truyền hình IP

- Mô hình lai (hybrid)

Mô hình này là sự kết hợp giữa Client-Server và Peer-to-Peer Phần lớn các mạng máy tính trên thực tế thuộc mô hình này

2.1.4 Bộ giao thức TCP/IP

Bộ giao thức TCP/IP, ngắn gọn là TCP/IP (tiếng Anh: Internet protocol suitehoặc IP suite hoặc TCP/IP protocol suite - bộ giao thức liên mạng), là một bộcác giao thức truyền thông cài đặt tầng giao thức mà Internet và hầu hết cácmạng m|y tính thương mại đang chạy trên đó Bộ giao thức này được đặt têntheo hai giao thức chính của nó là TCP (Giao thức Điều khiển Giao vận) và IP(Giao thức Liên mạng) Chúng cũng là hai giao thức đầu tiên được định nghĩa

Hình 1: Các tầng của giao thức TCP/IP

TCP/IP là một thể hiện thực tế của mô hình OSI Mô hình OSI nguyên bảnchia thành 7 tầng giao thức, tuy nhiên TCP/IP hiện thực và đơn giản hóa đi chỉcòn 4 tầng

 Tầng ứng dụng (Application Layer): Bao gồm các giao thức đóng gói dữliệu từ ứng dụng, người dùng rồi truyền xuống tầng thấp hơn Các giao thức

có thể kể đến ở tầng này là: HTTP, FTP, Telnet, DNS, SSH, SMTP, POP3,…

 Tầng giao vận (Transport Layer): Nhận dữ liệu từ ứng dụng tầng trên vàthông qua tầng dưới, truyền dữ liệu tới ứng dụng ở máy tính đích Tầng nàycung cấp dịch vụ truyền dữ liệu giữa ứng dụng - ứng dụng Các giao thức ởtầng này: TCP, UDP, ICMP

 Tầng liên mạng (Network Layer): Định tuyến và truyền gói tin liên mạng.Tầng này cung cấp dịch vụ truyền dữ liệu là các gói tin giữa các nút mạngtrong cùng một mạng hoặc liên mạng Các giao thức ở tầng này: IPv4, IPv6,…

 Tầng liên kết (Network Acess Layer, Datalink Layer): Truyền dữ liệu giữacác nút mạng trên cùng một nhánh mạng Tầng này làm việc trực tiếp với thiết

bị chịu trách nhiệm chuyển đổi các bit sang một dạng tín hiệu vật lý khác (ánhsáng, điện, điện từ…)

Dữ liệu của người dùng sẽ lần lượt đi qua các tầng trong mô hình, ở mỗitầng, dữ liệu sẽ được thêm phần header để điều khiển và chuyển xuống tầngthấp hơp Bên nhận sẽ lần lượt bóc tách các header từ tầng thấp và chuyểnlên tầng cao, cho đến người dùng

2.1.5 TCP

Transmission Control Protocol – TCP là một giao thức lõi chạy ở tầng giaovận, cung cấp các dịch vụ truyền dữ liệu theo dòng, tin cậy và được sử dụngbởi hẩu hết các ứng dụng hiện nay TCP chạy bên trên IP và chạy bên dướiứng dụng Việc lập trình mạng sẽ chủ yếu sử dụng giao thức này để truyền dữliệu

Giao thức IP cung cấp cơ chế truyền dữ liệu là các gói tin giữa các máy vớinhau, nhưng không có sự đảm bảo về trật tự, mất mát thông tin Trái lại, TCPcung cấp dịch vụ truyền dữ liệu chính xác, theo dòng, và đúng trật tự giữa cácứng dụng trên các máy khác nhau Ngoài ra TCP còn kiểm soát tốc độ truyền,chống nghẽn mạng…

TCP thực hiện chia dữ liệu từ tầng ứng dụng thành các đoạn, mỗi đoạn kíchthước thường không vượt quá kích thước của gói tin IP TCP thêm các thôngtin điều khiển vào phần đầu đoạn và chuyển xuống tầng dưới để gửi đi Dữliệu của các ứng dụng trên cùng một máy tính được phân biệt thông quatrường Port (16 bit) trong header của TCP Nếu nột ứng dụng muốn nhậnthông tin từ mạng, nó sẽ đăng ký một cổng với hệ điều hành, và TCP sẽchuyển dữ liệu tới ứng dụng đó

UDP cũng sử dụng một số 16 bit trong header gọi là cổng để phân biệt giữacác ứng dụng Cấu trúc UDP header đơn giản hơn TCP nhiều.

Hình 3: UDP header

Một vài dịch vụ chạy trên UDP: Phân giải tên miền (DNS:53), RSTP, MMS …

2.1.7 Giao thức HTTP và HTTPS

Http là chữ viết tắt của HyperText Transfer Protocol (giao thức truyền tải

siêu văn bản) Đây là một giao thức ứng dụng được sử dụng thường xuyênnhất trong bộ các giao thức TCP/IP (gồm một nhóm các giao thức nền tảngcho internet)

Http hoạt động dựa trên mô hình Client (máy khách) – Server (máy chủ).

Các máy tính của người dùng sẽ đóng vai trò làm máy khách (Client) Sau mộtthao tác nào đó của người dùng, các máy khách sẽ gửi yêu cầu đến máy chủ(Server) và chờ đợi câu trả lời từ những máy chủ này

Hình 4: Giao thức HTTP

Https là phiên bản an toàn của Http (viết tắt của HyperText Transfer

Protocol Secure – giao thức truyền tải siêu văn bản bảo mật), giao thức màqua đó dữ liệu được gửi giữa trình duyệt và trang web bạn đang kết nối

Mã hóa Không được mã hóa thông

tin Được mã hóa thông tin sử dụng SSL/TSL tiêu chuẩn

công nghệ bảo mật, truyền thông mã hóa giữa máy chủWeb server và trình duyệt.

Hỗ trợ việc xác thực đích danh (bằng cách đăng nhậpvào tài khoản) của website

mà máy khách truy cập thông qua việc kiểm tra xácthực bảo mật

Bảo mật thông tin, an toàn với người dùng

Bảng 1: Bảng so sánh HTTP và HTTPS

2.2 Nghiên cứu về trình duyệt web

2.2.1 Tổng quan về trình duyệt web

Hình 5: Trình duyệt

Trình duyệt web còn gọi là trình duyệt, hay công cụ tìm kiếm là một ứng

dụng được tạo ra nhằm mục đích hỗ trợ người dùng tìm kiếm truy cập thôngtin trên World Wide Web (www) Trình duyệt web sử dụng các thuật toánphân tích và đưa ra các gợi ý nội dung khi người dùng nhập từ khoá, hình ảnhhoặc video tìm kiếm Ngoài ra trình duyệt web còn cung cấp các công cụ hỗtrợ, các plugin hỗ trợ công việc của người dùng Các trang đích mà trình duyệtweb dẫn người dùng tới là các website, hình ảnh, tài liệu, video… Mỗi trangđích được xác định bởi một Url riêng biệt tương tự như địa chỉ nhà; cho phéptrình duyệt hiển thị chúng trên thiết bị thống minh của người dùng

Nguyên lý hoạt động của trình duyệt web tương đối dễ hiểu, tuy vậy chúng

là một cỗ máy vô cùng thông minh và phức tạp Trình duyệt web thực hiện 4bước chính bao gồm: Thu thập dữ liệu; Phân loại, đánh giá dữ liệu, Truy xuất

dữ liệu; Hiển thị nội dung người dung

Đầu tiên trình duyệt web tiến hành thu thập dữ liệu từ các website Nhàphát hành trình duyệt web sẽ đưa ra các công cụ để quản trị viên có thể tíchhợp vào website của mình Mỗi khi quản webstie đăng tải một nội dung mới,trình duyệt web sẽ tiến hành thu thập và đánh giá các thông tin của nội dung

đó một cách tự động

Nghe thì có vẻ đơn giản, nhưng thực tế có hàng trăm triệu website trênmạng internet Hàng ngày có hàng tỉ nội dung mới được cập nhật Việc thuthập và đánh giá dữ liệu thực sự không hề dễ dàng, việc này được thực hiện

tự đông bằng các thuật toán và hệ thống máy chủ vô cùng phức tạp

Sau khi thu thập được thông tin của các website chúng sẽ tiến hành phântích nội dung Mỗi trình duyệt lại có công nghệ phân tích và phân loại dữ liệukhác nhau Quá trình phân tích này quyết định đến tính chính xác của kết quảtìm kiếm Những công nghệ áp dụng ở bước này thực sự mơ hồ với ngườidùng không ai biết chính xác nó hoạt động như thế nào Đồng thời hàng nămcác công nghệ lõi liên tục được cập nhật và cải tiến

Khi người dùng thực hiện một hành động tìm kiếm trên trình duyệt Lậptức hàng ngàn thuật toán đánh giá và xếp hạng được thực thi Nhiệm vụ củachúng là đưa ra những gọi ý sát nhất với người dùng thông qua nhiều yếu tố.Trong đó có 2 yếu tố cố lõi bao gồm: Sự liên quan của từ khoá truy xuất vàhành vi người dùng

Trước kia các thuật toán chỉ đơn thuần cố gắng đưa ra những nội dung sátnhất với từ khoá mà người dùng tìm kiếm Có nghĩa rằng trình duyệt sẽ đưa ranhững gọi ý mà nó cho rằng đó là nội dung mà người dùng cần Thế nhưngnhững năm gần đây với sự phát triển của trí tuệ nhân tạo Các công cụ tìmkiếm đã thu thập và phân tích hành vi người dùng, đưa ra gọi ý dựa trên thóiquen và nhu cầu của bạn

Sau khi người dùng lựa chọn nội dung mà họ muốn, nhiệm vụ cuối cùngcủa trình duyệt là hiển thị nội dung đó Trình duyệt sẽ thực hiện việc tối ưuhoá hình ảnh, nội dung sao cho nó tương thích nhất với thiết bị của bạn Đó lànguyên lý làm việc chính của các trình duyệt ở thời điểm hiện tại

2.2.2 Cách một trình duyệt web hoạt động

i Chức năng chính của một trình duyệt

Chức năng chính của trình duyệt là hiển thị tài nguyên web mà bạn chọn,bằng cách yêu cầu tài nguyên đó từ máy chủ và hiển thị nó trong cửa sổtrình duyệt Tài nguyên thường là tài liệu HTML, nhưng cũng có thể là PDF,hình ảnh hoặc một số loại nội dung khác Vị trí của tài nguyên được chỉ địnhbởi người dùng bằng cách sử dụng URL (Định danh tài nguyên đồng nhất)

Cách trình duyệt diễn giải và hiển thị các tệp HTML được chỉ định trongthông số kỹ thuật HTML và CSS Các thông số kỹ thuật này được duy trì bởi

tổ chức W3C (World Wide Web Consortium), là tổ chức tieu chuẩn cho web.Trong nhiều năm, các trình duyệt chỉ tuân theo một phần thông số kỹ thuật

và phát triển các tiện ích mở rộng của riêng họ Điều đó gây ra vấn đề tươngthích nghiêm trọng cho các tác giả web Ngày nay hầu hết các trình duyệt ítnhiều đều tuân thủ theo các thông số kỹ thuật

Giao diện người dùng trình duyệt có rất nhiều điểm chung vớinhau Trong số các yếu tố giao diện người dùng phổ biến là:

 Thanh địa chỉ để chèn URI

 Nút quay lại và chuyển tiếp

 Tùy chọn đánh dấu trang

 Làm mới và dừng các nút để làm mới hoặc dừng tải các tài liệu hiện tại

 Nút trang chủ đưa bạn đến trang chủ của mình

Thật kỳ lạ, giao diện người dùng của trình duyệt không được chỉ địnhtrong bất kỳ thông số kỹ thuật chính thức nào, nó chỉ xuất phát từ các thựctiễn tốt được hình thành qua nhiều năm kinh nghiệm và do cá c trình duyệtbắt chước lẫn nhau Đặc tả HTML5 không xác định các phần tử giao diệnngười dùng mà một trình duyệt phải có, nhưng liệt kê một số phần tử phổbiến Trong số đó có thanh địa chỉ, thanh trạng thái và thanh công cụ Tấtnhiên, có những tính năng dành riêng cho một trình duyệt cụ thể như trìnhquản lý tải xuống của Firefox

ii Cấu trúc cấp cao của một trình duyệt

Các thành phần chính của một trình duyệt bao gồm:

- Giao diện người dùng: bao gồm thanh địa chỉ, nút quay lại trangtrước, chuyển tiếp trang, menu đánh dấu trang, v.v…

- Công cụ trình duyệt: sắp xếp các hành động giữa giao diện người dùng

và công cụ kết xuất

- Công cụ kết xuất: chịu trách nhiệm hiển thị nội dung được yêu cầu Vídụ: nếu nội dung yêu cầu là HTML, công cụ kết xuất sẽ phân tích cúpháp HTML và CSS sau đó hiển thị nội dung được phân tích cú pháptrên màn hình

- Kết nối mạng: cho các cuộc gọi mạng như HTTP Request, sử dụng cáctriển khai khác nhau cho các nền tảng khác nhau đằng sau một giaodiện độc lập với nền tảng

- UI backend: được sử dụng để vẽ các widget cơ bản như combo box vàwindow Phần phụ trợ này cho thấy một giao diện chung không dànhriêng cho nền tảng bên dưới nó sử dụng các phương pháp giao diệnngười dùng của hệ điều hành

- Trình thông dịch JavaScript: được sử dụng để phân tích cú pháp vàthực thi mã JavaScript

- Lưu trữ dữ liệu: đây là một lớp bền bỉ Trình duyệt có thể cần lưu tất

cả các loại dữ liệu cục bộ, chẳng hạn như cookie Các trình duyệt cũng

hỗ trợ các cơ chế lưu trữ như localStorage, IndexedDB, WebSQL vàFileSystem

Hình 6: Cấu trúc cấp cao của trình duyệt

Các trình duyệt như Chrome chạy nhiều phiên bản của công cụ kết xuất:phiên bản cho mỗi tab Mỗi tab chạy trong một tiến trình riêng

iii Công cụ kết xuất

 Công cụ kết xuất

Trách nhiệm của công cụ kết xuất là kết xuất các tài nguyên sau đóhiển thị nội dung được yêu cầu trong tài nguyên lên màn hình trìnhduyệt

Theo mặc định, công cụ kết xuất có thể hiển thị tài liệu và hình ảnh,HTMl, XML Nó có thể hiển thì các loại tài liệu khác thông qua pluh-inhoặc tiện ích mở rộng, ví dụ: hiển thị tài liệu PDF bằng trình xem PDF

Các trình duyệt khác nhau sử dụng các công cụ kết xuất khác nhau:internet Explorer sử dụng Trident, Firefox sử dụng Gecko, Safari sử dụngWebkit Chrome và Opera (từ phiên bản 15) sử dụng Blink, một nhánhcủa Webkit

Webkit là một công cụ kết xuất mã nguồn mở bắt đầu như một công

cụ cho nền tảng Linux đã được Apple sửa đổi để hỗ trợ cho Mac vàWindows

 Quy trình của công cụ kết xuất

Công cụ kết xuất sẽ bắt đầu lấy nội dung của tài liệu được yêu cầu từlớp mạng Điều này thường sẽ được thực hiện trong các khối 8kB

Hình 7: Quy trình của công cụ kết xuất

Công cụ kết xuất sẽ bắt đầu phân tích cú pháp tài liệu HTML và chuyểnđổi các phần tử thành các nút DOM trong một cây được gọi là “cây nộidung” Công cụ sẽ phân tich cú pháp, kiểu dữ liệu, cả trong các tệp CSSbên ngoài và trong các thẻ style Thông tin về style của các element cùngvới các chỉ dẫn trực quan trong HTMl như tên lớp, id,… sẽ được sử dụng

để tạo một cây khác: Cây kêt xuất

Cây kết xuất chứa các hình chữ nhật với các thuộc tính trực quan nhưmàu sắc và kích thước Các hình chữ nhật theo đúng thứ tự hiển thị trênmàn hình

Sau khi xây dựng cây kết xuất, nó sẽ trải qua một quá trình bố trí Điềunày có nghĩa là cung cấp cho mỗi nút tọa độ chính xác nơi nó sẽ xuất hiệntrên màn hình Giai đoạn tiếp theo là vẽ - cây kết xuất sẽ được duyệt vàmỗi nút sẽ được vẽ bằng cách sử dụng lớp phụ trợ giao diện người dùng

Điều quan trọng là phải hiểu rằng đây là một quá trình mất khá nhiềuthời gian Để có trải nghiệm người dùng tốt hơn, công cụ kết xuất sẽ cốgắng hiển thị nội dung trên màn hình càng sớm càng tốt Nó sẽ không đợicho đến khi tất cả HTML được phân tích trước khi bắt đầu xây dựng và bótrí cây kết xuất Các phần còn lại của nội dung sẽ được phân tích cú pháp

và hiển thị, trong khi quá trình tiếp tục với phần còn lại của nội dung tiếptục đến từ mạng

 Các ví dụ về quy trình của công cụ kết xuất

Hình 8: Luồng chính của Webkit

Hình 9: Luồng chính của công cụ kết xuất Gecko của Mozilla

Gecko gọi cây của các yếu tố được định dạng trực quan là "Câykhung" Mỗi phần tử là một khung WebKit sử dụng thuật ngữ "RenderTree" và nó bao gồm "Render Objects" WebKit sử dụng thuật ngữ "bốcục" để đặt các phần tử, trong khi Gecko gọi nó là "Reflow" "Phần đínhkèm" là thuật ngữ của WebKit để kết nối các nút DOM và thông tin trựcquan để tạo cây kết xuất Một khác biệt nhỏ về ngữ nghĩa là Gecko cóthêm một lớp giữa HTML và cây DOM Nó được gọi là "phần chìm nộidung" và là một nhà máy sản xuất các phần tử DOM

iv Phân tích cú pháp và xây dựng cây DOM

 Phân tích cú pháp

Phân tích cú pháp một tài liệu có nghĩa là dịch nó sang một cấu trúc

mà mã có thể sử dụng Kết quả của việc phân tích cú pháp thường là mộtcây các nút đại diện cho cấu trúc của tài liệu Đây được gọi là cây phântích cú pháp hoặc cây cú pháp

Ví dụ: phân tích cú pháp biểu thức 2 + 3 - 1 có thể trả lại cây này:

Hình 10: Nút cây biểu thức toán học

o Ngữ pháp

Việc phân tích cú pháp dựa trên các quy tắc cú pháp mà tài liệutuân theo: ngôn ngữ hoặc định dạng mà tài liệu được viết Mọi địnhdạng bạn có thể phân tích cú pháp phải có ngữ pháp xác định baogồm các quy tắc từ vựng và cú pháp Nó được gọi là ngữ pháp không

có ngữ cảnh Ngôn ngữ của con người không phải là ngôn ngữ nhưvậy và do đó không thể được phân tích cú pháp bằng các kỹ thuậtphân tích cú pháp thông thường.

o Phân tích cú pháp kết hợp Parser và Lexer

Phân tích cú pháp có thể được tách thành hai quy trình phụ: phântích từ vựng và phân tích cú pháp

Phân tích từ vựng là quá trình chia nhỏ đầu vào thành các mã thôngbáo Token là từ vựng ngôn ngữ: tập hợp các khối xây dựng hợp

lệ Trong ngôn ngữ của con người, nó sẽ bao gồm tất cả các từ xuấthiện trong từ điển cho ngôn ngữ đó

Phân tích cú pháp là việc áp dụng các quy tắc cú pháp ngôn ngữ.Phân tích cú pháp thường chia công việc giữa hai thành

phần: lexer (đôi khi được gọi tokenizer) mà có trách nhiệm phá vỡ các đầu vào vào thẻ hợp lệ, và parser có trách nhiệm xây dựng cây phân

tích cú pháp bằng cách phân tích cấu trúc tài liệu theo các quy tắc cú pháp ngôn ngữ Lexer biết cách loại bỏ các ký tự không liên quan như khoảng trắng và ngắt dòng

Hình 11: Từ tài liệu nguồn đên cây phân tích

Quá trình phân tích cú pháp là lặp đi lặp lại Trình phân tích cú phápthường sẽ yêu cầu lexer cho một mã thông báo mới và cố gắng khớp

mã thông báo với một trong các quy tắc cú pháp Nếu một quy tắcđược khớp, một nút tương ứng với mã thông báo sẽ được thêm vào

Nếu không có quy tắc nào khớp, trình phân tích cú pháp sẽ lưu trữ

mã thông báo nội bộ và tiếp tục yêu cầu mã thông báo cho đến khi tìmthấy quy tắc khớp với tất cả các mã thông báo được lưu trữ nội

bộ Nếu không tìm thấy quy tắc nào thì trình phân tích cú pháp sẽ đưa

ra một ngoại lệ Điều này có nghĩa là tài liệu không hợp lệ và có lỗi cúpháp

o Dịch

Trong nhiều trường hợp, cây phân tích cú pháp không phải là sảnphẩm cuối cùng Phân tích cú pháp thường được sử dụng trong dịchthuật: chuyển đổi tài liệu đầu vào sang định dạng khác Một ví dụ làbiên dịch Trình biên dịch biên dịch mã nguồn thành mã máy trướctiên sẽ phân tích cú pháp nó thành một cây phân tích cú pháp và sau

đó dịch cây thành tài liệu mã máy

3 Một biểu thức được định nghĩa là một "thuật ngữ" theo sau

là một "phép toán" theo sau là một thuật ngữ khác

4 Một hoạt động là một mã cộng hoặc một mã trừ

5 Một thuật ngữ là một mã thông báo số nguyên hoặc mộtbiểu thức

Hãy phân tích đầu vào: 2+3-1

Chuỗi con đầu tiên phù hợp với quy tắc là 2: theo quy tắc số 5 nó làmột thuật ngữ

Chuỗi thứ hai là 2+3: điều này phù hợp với quy tắc thứ 3: Một thuậtngữ được theo sau bởi một phép toán được theo sau bởi một thuậtngữ khác

Chuỗi tiếp theo sẽ chỉ được đánh ở cuối đầu vào 2+3-1 là một biểuthức bởi vì chúng ta biết rằng 2+3 là một thuật ngữ, vì vậy chúng ta

có một thuật ngữ được theo sau bởi một phép toán, vì vậy chúng ta

có một thuật ngữ được theo sau bởi một phép toán được theo saubởi một thuật ngữ khác 2++ sẽ không khớp với bất kỳ quy tắc nào

và do đó nó là đầu vào không hợp lệ

o Các định nghĩa chính thức cho từ vựng và cú pháp

Từ vựng thường được thể hiện bằng biểu thức chính quy

Ví dụ, ngôn ngữ của chúng tôi sẽ được định nghĩa là:

Cú pháp thường được định nghĩa ở định dạng gọi là BNF Ngôn

ngữ của chúng tôi sẽ được định nghĩa là:

Biểu thức: = thuật ngữ hoạt động

Phép toán: = DẤU CỘNG | DẤU TRỪ

Số hạng: = INTEGER | biểu thức

Một ngôn ngữ có thể được phân tích cú pháp bởi trình phân tích cúpháp thông thường nếu ngữ pháp của nó là ngữ pháp không có ngữcảnh Một định nghĩa trực quan về ngữ pháp không có ngữ cảnh làmột ngữ pháp có thể được diễn đạt hoàn toàn trong BNF

o Các loại trình phân tích cú pháp

Có hai loại trình phân tích cú pháp: trình phân tích cú pháp từ trênxuống và trình phân tích cú pháp từ dưới lên Một lời giải thích trựcquan là trình phân tích cú pháp từ trên xuống kiểm tra cấu trúc cấpcao của cú pháp và cố gắng tìm một quy tắc phù hợp Trình phân tích

cú pháp từ dưới lên bắt đầu với đầu vào và dần dần chuyển nó thành

các quy tắc cú pháp, bắt đầu từ các quy tắc cấp thấp cho đến khi đápứng các quy tắc cấp cao.

Hãy xem hai loại trình phân tích cú pháp sẽ phân tích cú pháp ví dụcủa chúng ta như thế nào

Trình phân tích cú pháp từ trên xuống sẽ bắt đầu từ quy tắc cấp caohơn: nó sẽ xác định 2 + 3 như một biểu thức Sau đó nó sẽ xác định 2+ 3 - 1 như một biểu thức (quá trình xác định biểu thức phát triển,khớp với các quy tắc khác, nhưng điểm bắt đầu là quy tắc cấp caonhất)

Trình phân tích cú pháp từ dưới lên sẽ quét đầu vào cho đến khimột quy tắc được khớp Sau đó, nó sẽ thay thế đầu vào phù hợp bằngquy tắc Điều này sẽ tiếp tục cho đến khi kết thúc đầu vào Biểu thứcphù hợp một phần được đặt trên ngăn xếp của trình phân tích cúpháp

-Bảng 2: Mô tả stack trình phân tích từ dưới lên

Loại trình phân tích cú pháp từ dưới lên này được gọi là trình phântích cú pháp shift-giảm, bởi vì đầu vào được dịch chuyển sang bênphải (hãy tưởng tượng một con trỏ trỏ vào đầu tiên đầu vào và dichuyển sang bên phải) và được giảm dần theo các quy tắc cú pháp

o Tự động tạo trình phân tích cú pháp

Có những công cụ có thể tạo trình phân tích cú pháp Bạn cung cấpcho họ ngữ pháp của ngôn ngữ của bạn – các quy tắc từ vựng và cúpháp – và họ tạo ra một trình phân tích cú pháp hoạt động Việc tạomột trình phân tích cú pháp đòi hỏi sự hiểu biết sâu sắc về phân tích

cú pháp và không dễ dàng để tạo một trình phân tích cú pháp được tối

ưu hóa bằng tay, vì vậy trình tạo trình phân tích cú pháp có thể rấthữu ích

WebKit sử dụng hai trình tạo phân tích cú pháp nổi tiếng: Flex đểtạo lexer và Bison để tạo trình phân tích cú pháp (bạn có thể gặpchúng với tên Lex và Yacc) Đầu vào linh hoạt là một tệp chứa các địnhnghĩa biểu thức chính quy của các mã thông báo Đầu vào của Bison làcác quy tắc cú pháp ngôn ngữ ở định dạng BNF

o Không phải ngữ pháp không có ngữ cảnh

Như chúng ta đã thấy trong phần giới thiệu phân tích cú pháp, cúpháp ngữ pháp có thể được định nghĩa chính thức bằng cách sử dụngcác định dạng như BNF

Thật không may, tất cả các chủ đề phân tích cú pháp thông thườngkhông áp dụng cho HTML (tôi không giới thiệu chúng chỉ cho vui -chúng sẽ được sử dụng trong phân tích cú pháp CSS vàJavaScript) HTML không thể dễ dàng được xác định bằng ngữ phápkhông có ngữ cảnh mà trình phân tích cú pháp cần

Có một định dạng chính thức để định nghĩa HTML – DTD (Địnhnghĩa Loại Tài liệu) –nhưng nó không phải là một ngữ pháp không cóngữ cảnh

Điều này xuất hiện kỳ lạ ngay từ cái nhìn đầu tiên; HTML khá gầnvới XML Có rất nhiều trình phân tích cú pháp XML có sẵn Có một biếnthể XML của HTML – XHTML – vậy sự khác biệt lớn là gì?

Sự khác biệt là cách tiếp cận HTML dễ "tha thứ" hơn: nó cho phépbạn bỏ qua các thẻ nhất định (sau đó được thêm vào) hoặc đôi khi bỏqua các thẻ bắt đầu hoặc kết thúc, v.v Nhìn chung, đó là một cú pháp

"mềm", trái ngược với cú pháp cứng nhắc và khắt khe của XML

Chi tiết tưởng như nhỏ này lại tạo nên một thế giới khác biệt Mộtmặt, đây là lý do chính tại sao HTML rất phổ biến: nó tha thứ chonhững lỗi lầm của bạn và giúp tác giả web trở nên dễ dàng hơn Mặtkhác, nó gây khó khăn khi viết một ngữ pháp chính thức Vì vậy, tómlại, HTML không thể được phân tích cú pháp dễ dàng bằng các trìnhphân tích cú pháp thông thường, vì ngữ pháp của nó không có ngữcảnh HTML không thể được phân tích cú pháp bởi trình phân tích cúpháp XML

o HTML DTD

Định nghĩa HTML ở định dạng DTD Định dạng này được sử dụng đểxác định các ngôn ngữ của họ SGML Định dạng chứa các định nghĩa

cấp của chúng Như chúng ta đã thấy trước đó, HTML DTD không hìnhthành một ngữ pháp không có ngữ cảnh.

Có một số biến thể của DTD Chế độ nghiêm ngặt chỉ tuân theo cácthông số kỹ thuật nhưng các chế độ khác có hỗ trợ đánh dấu được cáctrình duyệt sử dụng trong quá khứ Mục đích là tương thích ngược vớinội dung cũ hơn DTD nghiêm ngặt hiện tại ở

đây: www.w3.org/TR/html4/strict.dtd

o DOM

Cây đầu ra ("cây phân tích cú pháp") là một cây gồm phần tử DOM

và các nút thuộc tính DOM là viết tắt của Document Object

Model Nó là sự trình bày đối tượng của tài liệu HTML và giao diện củacác phần tử HTML với thế giới bên ngoài như JavaScript

Gốc cây là đối tượng " Document "

DOM có mối quan hệ gần như 1-1 với đánh dấu Ví dụ:

Đánh dấu này sẽ được dịch sang cây DOM sau:

Hình 13: Cây DOM của Đánh dấu ví dụ

Giống như HTML, DOM được chỉ định bởi tổ chức W3C Nó là mộtđặc điểm kỹ thuật chung để thao tác các tài liệu Một mô-đun cụ thể

mô tả các phần tử cụ thể của HTML

o Thuật toán phân tích cú pháp

Như chúng ta đã thấy trong các phần trước, HTML không thể đượcphân tích cú pháp bằng các trình phân tích cú pháp từ trên xuống hoặc

từ dưới lên thông thường

Lý do là:

1 Bản chất tha thứ của ngôn ngữ

2 Thực tế là các trình duyệt có khả năng chịu lỗi truyền thống

để hỗ trợ các trường hợp HTML không hợp lệ nổi tiếng

3 Quá trình phân tích cú pháp được thực hiện lại Đối với cácngôn ngữ khác, nguồn không thay đổi trong quá trình phân tích

cú pháp, nhưng trong HTML, mã động (chẳng hạn như các phần

tử tập lệnh chứa các lệnh gọi document.write()) có thể thêm các

mã thông báo bổ sung, vì vậy quá trình phân tích cú pháp thực sựsửa đổi đầu vào

Không thể sử dụng các kỹ thuật phân tích cú pháp thông thường,các trình duyệt tạo trình phân tích cú pháp tùy chỉnh để phân tích cúpháp HTML

Các thuật toán phân tích cú pháp được mô tả một cách chi tiết bởicác đặc điểm kỹ thuật HTML5 Thuật toán bao gồm hai giai đoạn:tokenization và xây dựng cây

Tokenization là phân tích từ vựng, phân tích cú pháp đầu vào thànhcác token Trong số các mã thông báo HTML có thẻ bắt đầu, thẻ kếtthúc, tên thuộc tính và giá trị thuộc tính

Tokenizer nhận ra mã thông báo, đưa nó cho phương thức tạo cây

và sử dụng ký tự tiếp theo để nhận dạng mã thông báo tiếp theo, v.v.cho đến khi kết thúc đầu vào

Hình 14: Luồng phân tích cú pháp HTML (lấy từ thông số kỹ thuật HTML5)

o Thuật toán mã hóa

Đầu ra của thuật toán là một mã thông báo HTML Thuật toán đượcthể hiện như một máy trạng thái Mỗi trạng thái sử dụng một hoặcnhiều ký tự của luồng đầu vào và cập nhật trạng thái tiếp theo theocác ký tự đó Quyết định bị ảnh hưởng bởi trạng thái mã hóa hiện tại

và trạng thái xây dựng cây Điều này có nghĩa là cùng một ký tự đượctiêu thụ sẽ mang lại kết quả khác nhau cho đúng trạng thái tiếp theo,tùy thuộc vào trạng thái hiện tại Thuật toán quá phức tạp để mô tảđầy đủ, vì vậy hãy xem một ví dụ đơn giản sẽ giúp chúng ta hiểunguyên tắc

Ví dụ cơ bản – mã hóa HTML sau:

Trạng thái ban đầu là "Trạng thái dữ liệu" Khi gặp ký tự <, trạng

thái được chuyển thành "Trạng thái mở thẻ" Việc sử dụng một a-z ký

tự sẽ tạo ra "Mã thông báo thẻ bắt đầu", trạng thái được thay đổi

thành "Trạng thái tên thẻ" Chúng tôi giữ nguyên trạng thái này cho

đến khi gặp ký tự > Mỗi ký tự được thêm vào tên mã thông báomới Trong trường hợp của chúng tôi, mã thông báo được tạo

là htmlmã thông báo

Khi đến thẻ >, mã thông báo hiện tại được phát ra và trạng thái

thay đổi trở lại "Trạng thái dữ liệu" Các thẻ <body> sẽ được xử lý

bằng các bước tương tự Cho đến nay các thẻ html và body đã được

phát ra Bây giờ chúng ta đã trở lại "Trạng thái dữ liệu" Tiêu thụ

các ký tự h của Hello world sẽ tạo ra và phát ra mã thông báo ký tự,điều này tiếp tục cho đến khi đạt đến < của </body> Chúng tôi sẽphát ra một mã thông báo ký tự cho mỗi ký tự của Hello world

Bây giờ chúng ta đã trở lại "Trạng thái mở thẻ" Việc sử dụng thông

tin đầu vào tiếp theo / sẽ tạo ra dấu end tag token và chuyển

sang "Trạng thái tên thẻ" Một lần nữa, chúng tôi giữ nguyên trạng

thái này cho đến khi đạt được > Sau đó, mã thông báo thẻ mới sẽ

được phát ra và chúng tôi quay lại "Trạng thái dữ liệu" Đầu vào

</html> sẽ được xử lý giống như trường hợp trước

Hình 15: Ví dụ mã hóa đầu vào

o Thuật toán cây xây dựng

Khi trình phân tích cú pháp được tạo, đối tượng Document đượctạo Trong giai đoạn xây dựng cây, cây DOM với Tài liệu trong gốc của

nó sẽ được sửa đổi và các phần tử sẽ được thêm vào nó Mỗi nútđược phát ra bởi tokenizer sẽ được xử lý bởi hàm tạo cây Đối với mỗi

mã thông báo, thông số kỹ thuật xác định phần tử DOM nào có liênquan đến nó và sẽ được tạo cho mã thông báo này Phần tử đượcthêm vào cây DOM, và cũng là chồng các phần tử đang mở Ngăn xếpnày được sử dụng để sửa lỗi lồng ghép không khớp và các thẻ khôngđược đóng chặt Thuật toán cũng được mô tả như một máy trạngthái Các trạng thái được gọi là "chế độ chèn"

Hãy xem quá trình xây dựng cây cho đầu vào ví dụ:

<html>

</body>

</html>

Đầu vào cho giai đoạn xây dựng cây là một chuỗi các mã thông báo

từ giai đoạn mã hóa

Chế độ đầu tiên là "initial mode" Nhận mã thông báo "html" sẽ chuyển sang chế độ "before html" và xử lý lại mã thông báo trong chế

độ đó Điều này sẽ tạo ra phần tử HTMLHtmlElement, phần tử này sẽđược nối vào đối tượng Document gốc

Trạng thái sẽ được thay đổi thành "before head" Mã thông báo

"body" sau đó được nhận HTMLHeadElement sẽ được tạo ngầm mặc

dù chúng ta không có mã thông báo "head" và nó sẽ được thêm vàocây

Bây giờ chúng ta chuyển sang chế độ "in head" và sau đó đến "affter head" Mã thông báo cơ thể được xử lý lại, một HTMLBodyElement được tạo và chèn và chế độ được chuyển sang "in

body".

Các mã ký tự của chuỗi "Hello world" hiện đã được nhận Cái đầutiên sẽ tạo và chèn nút "Văn bản" và các ký tự khác sẽ được nối vàonút đó

Việc nhận mã thông báo body end sẽ chuyển sang chế độ "after

body" Bây giờ chúng ta sẽ nhận được thẻ kết thúc html sẽ chuyển

chúng ta sang chế độ "after after body" Nhận được mã thông báo

cuối tệp sẽ kết thúc quá trình phân tích cú pháp