Cho đến bây giờ chúng ta đã thảo luận về navigation và data fetching. Hôm nay chúng ta sẽ nói về parsing nói chung và HTML parsing nói riêng

3. PHÂN TÍCH HTML

Chúng ta đã thấy sau yêu cầu ban đầu đến máy chủ, trình duyệt nhận được phản hồi chứa tài nguyên HTML của trang web mà chúng ta đang cố truy cập (đoạn dữ liệu đầu tiên). Bây giờ công việc của trình duyệt sẽ là bắt đầu parsing dữ liệu

Parsing means analyzing and converting a program into an internal format that a runtime environment can actually run

Nói cách khác, phân tích cú pháp có nghĩa là lấy mã chúng ta viết dưới dạng văn bản (HTML, CSS) và biến nó thành thứ mà trình duyệt có thể làm việc với. parsing sẽ được thực hiện bởi browser engine (đừng nhầm với navigation0 của trình duyệt)

browser engine là thành phần cốt lõi của mọi trình duyệt chính và vai trò chính của nó là kết hợp cấu trúc (HTML) và kiểu dáng (CSS) để nó có thể vẽ trang web trên màn hình của chúng ta. Nó cũng chịu trách nhiệm tìm ra những đoạn mã tương tác. Chúng ta không nên nghĩ về nó như một phần mềm riêng biệt mà là một phần của phần mềm lớn hơn (trong trường hợp của chúng ta là trình duyệt)

Có rất nhiều công cụ trình duyệt ngoài tự nhiên nhưng phần lớn các trình duyệt sử dụng một trong ba công cụ đầy đủ được phát triển tích cực này

Gecko
Nó được phát triển bởi Mozilla cho Firefox. Trước đây, nó được sử dụng để cung cấp năng lượng cho một số trình duyệt khác nhưng hiện tại, ngoài Firefox, Tor và Waterfox là những trình duyệt duy nhất còn sử dụng Gecko. Nó được viết trong navigation2, và kể từ năm 2016, bổ sung trong navigation3.

WebKit
Nó được Apple phát triển chủ yếu cho Safari. Nó cũng hỗ trợ GNOME Web (Epiphany) và Otter. (đáng ngạc nhiên là trên iOS, tất cả các trình duyệt bao gồm Firefox và Chrome, cũng được cung cấp bởi WebKit). Nó được viết bằng navigation4.

Blink, một phần của Chromium
Ban đầu là một nhánh của WebKit, nó chủ yếu được Google phát triển cho Chrome. Nó cũng cung cấp năng lượng cho Edge, Brave, Silk, Vivaldi, Opera và hầu hết các dự án trình duyệt khác (một số thông qua QtWebEngine). Nó được viết bằng navigation4.

Bây giờ chúng ta đã hiểu ai sẽ thực hiện parsing, hãy xem chính xác điều gì sẽ xảy ra sau khi chúng ta nhận được tài liệu HTML đầu tiên từ máy chủ. Giả sử tài liệu trông như thế này

 
  
   charset="UTF-8">
   name="viewport" content="width=device-width, initial-scale=1.0">


  
This is my page
  
This is a H3 header.
  
This is a paragraph.
This is another paragraph,

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Ngay cả khi HTML của trang yêu cầu lớn hơn gói 14KB ban đầu, trình duyệt sẽ bắt đầu phân tích cú pháp và cố gắng hiển thị trải nghiệm dựa trên dữ liệu mà nó có. HTML parsing bao gồm hai bước. navigation8 và navigation9 (xây dựng thứ gọi là data fetching0)

Token hóa

data fetching1

Kết quả khi kết thúc quá trình mã thông báo là một chuỗi không hoặc nhiều mã thông báo sau. DOCTYPE, thẻ bắt đầu (data fetching2), thẻ kết thúc (data fetching3), thẻ tự đóng (data fetching4), tên thuộc tính, giá trị, nhận xét, ký tự, nội dung cuối tệp hoặc văn bản thuần túy trong một phần tử

Xây dựng DOM

Sau khi mã thông báo đầu tiên được tạo, data fetching5 bắt đầu. Điều này về cơ bản là tạo một data fetching6 (được gọi là Mô hình đối tượng tài liệu) dựa trên các mã thông báo được phân tích cú pháp trước đó

Cây DOM mô tả nội dung của tài liệu HTML. Phần tử data fetching7 là thẻ đầu tiên và nút gốc của cây tài liệu. Cây phản ánh mối quan hệ và thứ bậc giữa các thẻ khác nhau. Chúng tôi có data fetching8 và các thẻ được lồng trong các thẻ khác là data fetching9. Số lượng nút càng nhiều thì thời gian xây dựng cây DOM càng lâu. Dưới đây là Cây DOM cho ví dụ về tài liệu HTML mà chúng tôi nhận được từ máy chủ

Trên thực tế, DOM phức tạp hơn những gì chúng ta thấy trong lược đồ đó, nhưng tôi đã giữ nó đơn giản để hiểu rõ hơn (đồng thời, chúng ta sẽ nói chi tiết hơn về DOM và tầm quan trọng của nó trong một bài viết sau)

Giai đoạn xây dựng này là parsing0, nghĩa là trong khi một mã thông báo được xử lý, bộ mã thông báo có thể được tiếp tục, khiến các mã thông báo tiếp theo được phát ra và xử lý trước khi quá trình xử lý mã thông báo đầu tiên hoàn tất. Từ byte cho đến khi DOM được tạo, toàn bộ quá trình sẽ giống như thế này

Trình phân tích cú pháp hoạt động theo từng dòng, từ trên xuống dưới. Khi trình phân tích cú pháp gặp phải các tài nguyên không bị chặn (ví dụ: hình ảnh), trình duyệt sẽ yêu cầu những hình ảnh đó từ máy chủ và tiếp tục phân tích cú pháp. Mặt khác, nếu nó gặp tài nguyên chặn (bảng định kiểu CSS, tệp Javascrpt được thêm vào phần parsing1 của HTML hoặc phông chữ được thêm từ CDN), trình phân tích cú pháp sẽ dừng thực thi cho đến khi tất cả các tài nguyên chặn đó được tải xuống. Đó là lý do tại sao, nếu bạn đang làm việc với Javascript, bạn nên thêm thẻ parsing2 vào cuối tệp HTML hoặc nếu bạn muốn giữ chúng trong thẻ parsing1, bạn nên thêm thuộc tính parsing4 hoặc parsing5 (parsing5) cho chúng . )

Trình tải trước và làm cho trang nhanh hơn

Internet Explorer, WebKit và Mozilla đều đã triển khai các trình tải trước vào năm 2008 như một cách xử lý các tài nguyên bị chặn, đặc biệt là các tập lệnh (chúng tôi đã nói trước đó rằng khi gặp một thẻ tập lệnh, quá trình phân tích cú pháp HTML sẽ dừng lại cho đến khi tập lệnh được tải xuống và thực thi)

Với parsing8, khi trình duyệt bị kẹt trên một tập lệnh, trình phân tích cú pháp thứ hai sẽ quét HTML để tìm các tài nguyên cần truy xuất (bảng định kiểu, tập lệnh, v.v.). Sau đó, trình tải trước bắt đầu truy xuất các tài nguyên này trong nền với mục đích là vào thời điểm trình phân tích cú pháp HTML chính tiếp cận chúng, chúng có thể đã được tải xuống (trong trường hợp các tài nguyên này đã được lưu vào bộ đệm, thì bước này sẽ bị bỏ qua)

HTML có chạy trong trình duyệt không?

Tại sao các thẻ HTML hiển thị trong trình duyệt?

HTML hoạt động như thế nào trong trình duyệt?

HTML có thể chạy mà không cần trình duyệt không?