Nó được thực thi ở đâu khi trình duyệt hiển thị HTML?

Người dùng yêu thích pixel (khung hình) được phân phối trên màn hình nhanh nhất có thể;

HTML và CSS là các khối xây dựng cơ bản mà các nhà phát triển web sử dụng để xây dựng trải nghiệm trực quan trên web. Nhưng làm thế nào để trình duyệt chuyển đổi HTML và CSS thành pixel?

Quá trình chuyển đổi được sắp xếp của trình duyệt HTML và CSS thành pixel khá mờ và kết quả là hầu hết các nhà phát triển web không xem xét cách thức hoặc thời điểm nó chạy

Hiểu quy trình này là chìa khóa để xây dựng các ứng dụng web hiệu suất cao và trong mẹo này, tôi sẽ giúp làm sáng tỏ nó

Quy trình tổng thể

Hành trình từ văn bản HTML và CSS thô cho đến pixel trên màn hình trực quan có nhiều bước và trạng thái trung gian trên đường đi. Đối với mẹo thân thiện với người mới bắt đầu này, chúng ta sẽ thảo luận những điều sau đây

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

Khi người dùng điều hướng đến một trang web, mục nhập vào ứng dụng là tài liệu HTML được cung cấp cho người dùng dưới dạng tệp văn bản

Trình duyệt sử dụng Trình phân tích cú pháp HTML của nó để chuyển đổi văn bản HTML này thành Mô hình đối tượng tài liệu hoặc DOM

DOM là một cây xác định cấu trúc của tài liệu. Mỗi nút trong cây DOM là một đối tượng trình duyệt ánh xạ trở lại các mục được chỉ định trong tệp văn bản HTML

Ví dụ: xem xét văn bản HTML sau

    Example Document
    



    
Example Div 1
    
Example Div 2
    
Example Div 3

Khi trình phân tích cú pháp HTML hoàn thành công việc của nó, cây DOM sau sẽ được tạo

Phân tích cú pháp HTML vào DOM diễn ra dưới dạng Tác vụ trên Chủ đề chính. Nó được trình bày trực quan trong một dấu vết như thế này

Mô hình đối tượng CSS

Mặc dù HTML xác định cấu trúc của tài liệu, nhưng nó cũng có thể tham chiếu CSS Stylesheets để xác định cách trình bày trực quan của tài liệu

Các biểu định kiểu này thường được xác định thông qua thẻ , nhưng cũng có thể được xác định thông qua nội tuyến

Thời gian để trình duyệt hiển thị nội dung có ý nghĩa là một trong những khía cạnh quan trọng nhất của trải nghiệm người dùng. Để vẽ nội dung ban đầu, trình duyệt chuyển đổi HTML, CSS và JavaScript thành pixel, một quá trình được gọi là đường dẫn hiển thị quan trọng. Đường dẫn hiển thị quan trọng có bốn bước (MDN cộng tác viên 2022a)

1. phân tích cú pháp
2. Kết xuất cây xây dựng
3. Cách trình bày
4. Bức vẽ

phân tích cú pháp

Trình duyệt bắt đầu bằng cách yêu cầu một tệp HTML có tại một URL. Trong khi tải xuống tệp, trình duyệt sẽ chuyển đổi byte thành ký tự dựa trên mã hóa của tệp. Tùy thuộc vào kích thước của tệp, băng thông mạng và độ trễ của mạng, trình duyệt có thể thực hiện dần dần các bước của đường dẫn kết xuất trong khi tải xuống phần còn lại của tệp HTML trên một chuỗi riêng biệt (Hiwarale 2019)

DOM

Với HTML được tải xuống, công việc hiển thị trang web bắt đầu. Mô hình đối tượng tài liệu (DOM) biểu thị cấu trúc của trang web và cung cấp API cho các ngôn ngữ lập trình, chẳng hạn như JavaScript (MDN cộng tác viên 2022e). Nó bao gồm một tập hợp các đối tượng JavaScript được sắp xếp theo cấu trúc cây; . Khi phân tích cú pháp HTML, trình duyệt sẽ tạo một đối tượng JavaScript bất cứ khi nào nó gặp mã thông báo HTML, như html, div hoặc p (Hiwarale 2019). Ví dụ: khi trình duyệt phân tích cú pháp thẻ div, nó sẽ tạo một nút từ lớp HTMLDivElement, lớp này có lớp Node là một trong các tổ tiên của nó (i. e. , nguyên mẫu)

Khi trình duyệt gặp thẻ link,

0 hoặc

1 tham chiếu đến tệp bên ngoài, trình duyệt sẽ tải xuống tệp trên một chuỗi riêng biệt (Hiwarale 2019). Phân tích cú pháp trên luồng chính tiếp tục không bị gián đoạn

CSSOM

Khi trình duyệt gặp CSS, trực tiếp trên thẻ HTML, giữa các thẻ

2 hoặc khi tải xuống từ tệp bên ngoài thông qua thẻ link, trình duyệt sẽ bắt đầu xây dựng mô hình đối tượng biểu định kiểu theo tầng (CSSOM). CSSOM là một cấu trúc cây chứa các nút HTML có khả năng xuất hiện trên màn hình (Hiwarale 2019). Điều này có nghĩa là các thẻ như link, html2 và html3 không tồn tại trong CSSOM

Mỗi nút CSSOM chứa tất cả các thuộc tính CSS áp dụng cho nút. Nếu CSS của chúng tôi không trực tiếp đặt thuộc tính (hoặc gián tiếp, khi được kế thừa từ nút cha), thì thuộc tính đó sẽ nhận giá trị mặc định từ biểu định kiểu tác nhân người dùng của trình duyệt

Trong một khối CSS, các quy tắc xuất hiện sau có thể ghi đè các quy tắc được xác định ở đầu. Do đó, trình duyệt sẽ phân tích đầy đủ tệp CSS bên ngoài ngay cả khi mạng chậm (Hiwarale 2019). Điều này khiến CSS hiển thị bị chặn vì trình duyệt không thể xác định kiểu nào sẽ hiển thị cho đến khi trình duyệt phân tích hoàn toàn tệp CSS

Tương tự như vậy, trình duyệt đợi để thực thi tệp tập lệnh cho đến khi nó tải xuống và phân tích cú pháp tất cả CSS đã gặp trước đó (Hiwarale 2019). Điều này ngăn JavaScript truy cập các giá trị kiểu có thể trở nên cũ nếu bị thay đổi bởi quy tắc CSS sau này trong biểu định kiểu. Kết quả cuối cùng là CSS có thể chặn thực thi tập lệnh, đặc biệt trong trường hợp tập lệnh nội tuyến hoặc không đồng bộ

Một chiến lược để ngăn CSS chặn hiển thị hoặc tạo tập lệnh là đặt thuộc tính phương tiện trên biểu định kiểu bên ngoài. Ví dụ: mã bên dưới cho biết biểu định kiểu này chỉ áp dụng cho các khung nhìn có chiều rộng ít nhất là 1.080 pixel. Trình duyệt sẽ không tải biểu định kiểu này trên màn hình nhỏ, khiến trình duyệt không chặn hiển thị hoặc tạo tập lệnh khi CSS không áp dụng cho kích thước màn hình hiện tại

JavaScript

Khi trình duyệt gặp thẻ html2, nó sẽ dừng phân tích cú pháp cho đến khi tải xuống, phân tích cú pháp và thực thi tập lệnh. Phân tích cú pháp HTML tạm dừng vì các tập lệnh thường thay đổi DOM. Nếu một tập lệnh đã thay đổi DOM trên luồng chính trong khi quá trình phân tích cú pháp HTML vẫn tiếp tục trên một luồng riêng biệt, thì các điều kiện tương tranh sẽ khiến DOM kết quả trở nên khó đoán (Hiwarale 2019)

Việc thêm thuộc tính html5 hoặc html6 vào thẻ html2 cho phép trình duyệt tiếp tục phân tích cú pháp trên luồng chính trong khi tập lệnh tải xuống trên một luồng riêng biệt. Theo Mạng lưới nhà phát triển Mozilla (2022b)

• Thuộc tính html5 hướng dẫn trình duyệt tải xuống tập lệnh trên một chuỗi riêng biệt và trì hoãn việc thực thi tập lệnh cho đến khi hoàn tất phân tích cú pháp tất cả HTML. Trình duyệt đợi kích hoạt sự kiện html9 cho đến khi nó thực thi tất cả các tập lệnh bị trì hoãn. Sau khi trình duyệt xây dựng toàn bộ DOM, các tập lệnh bị trì hoãn sẽ thực thi theo thứ tự các thẻ tập lệnh của chúng xuất hiện trong HTML. Thuộc tính defer không ảnh hưởng đến các tập lệnh nội tuyến. Nó cũng không ảnh hưởng đến tập lệnh mô-đun, vì tập lệnh mô-đun trì hoãn theo mặc định
• Thuộc tính html6 hướng dẫn trình duyệt tiếp tục phân tích cú pháp HTML trên luồng chính cho đến khi tập lệnh tải xuống xong. Ngay sau khi quá trình tải xuống hoàn tất, trình duyệt sẽ tạm dừng phân tích cú pháp HTML để thực thi tập lệnh trên luồng chính. Thuộc tính html6 không có tác dụng đối với tập lệnh nội tuyến. Không giống như thuộc tính html5, sự kiện html9 kích hoạt ngay khi trình duyệt kết thúc phân tích cú pháp HTML, ngay cả khi trình duyệt vẫn đang tải xuống các tập lệnh không đồng bộ. Vì trình duyệt thực thi tập lệnh không đồng bộ ngay sau khi hoàn tất tải xuống nên các tập lệnh này có thể không thực thi theo thứ tự chúng xuất hiện trong HTML

Khi trình duyệt bắt đầu phân tích cú pháp một tập lệnh, nó sẽ phân tích cú pháp JavaScript cấp cao nhất thành một cây cú pháp trừu tượng (AST) và thêm nó vào ngữ cảnh thực thi chung (Saini 2020). Trong quá trình phân tích cú pháp, trình duyệt phân bổ bộ nhớ cho các biến, cho mỗi giá trị là div4;

Tiếp theo, trình duyệt diễn giải/thực thi mã, biên dịch AST thành mã byte (Hinkelmann 2017). Trong giai đoạn này, trình duyệt phân tích cú pháp đệ quy JavaScript bên trong các hàm được gọi. Trình duyệt tạo bối cảnh thực thi mới trong mỗi lần gọi hàm, giống như khi tạo bối cảnh thực thi toàn cầu (Saini 2020). Trình duyệt thêm từng bối cảnh thực thi mới vào ngăn xếp cuộc gọi của nó. Khi trình duyệt thực thi một câu lệnh trả về hoặc đến cuối ngữ cảnh thực thi, nó sẽ bật ngữ cảnh thực thi đó ra khỏi ngăn xếp cuộc gọi. Trình duyệt tiếp tục quá trình này cho đến khi ngăn xếp cuộc gọi trống, nghĩa là nó đã trở lại ngữ cảnh thực thi toàn cầu

Nếu trình duyệt lặp đi lặp lại cùng một chức năng, nó sẽ biên dịch chức năng đó thành mã máy được tối ưu hóa bằng cách sử dụng thông tin loại được suy ra từ các lần gọi trước đó (Hinkelmann 2017). Miễn là các tham số của hàm duy trì cùng loại, mã được tối ưu hóa này sẽ thực thi nhanh hơn trong các lần gọi trong tương lai. Nếu các loại tham số thay đổi trong lần gọi tiếp theo, trình duyệt sẽ hủy tối ưu hóa chức năng trở lại mã byte (Hinkelmann 2017)

phân tích cú pháp suy đoán

Khi trình duyệt đợi một tệp tải xuống trên luồng chính, nó sẽ thực hiện phân tích cú pháp suy đoán trên một luồng riêng biệt, tìm kiếm các tài nguyên bên ngoài sau trong tài liệu (Hiwarale 2019). Trong luồng riêng biệt, trình duyệt tải xuống các tài nguyên để chúng sẽ có sẵn sau này cho trình phân tích cú pháp trên luồng chính. Tài nguyên được phân tích cú pháp suy đoán có thể không được sử dụng nếu tập lệnh vô hiệu hóa nó bằng cách xóa hoặc ẩn phần tử tham chiếu đến tài nguyên bên ngoài

sự kiện DOM

Khi trình duyệt hoàn tất việc tạo DOM và CSSOM, đồng thời thực thi tất cả các tập lệnh chặn trình phân tích cú pháp, trình duyệt sẽ kích hoạt sự kiện html9 (Cộng tác viên MDN 2022c). Khi trình duyệt hoàn tất việc tải xuống tất cả các tệp bên ngoài, chẳng hạn như biểu định kiểu, hình ảnh, video và tập lệnh không đồng bộ, trình duyệt sẽ kích hoạt sự kiện div6 (Cộng tác viên MDN 2022d)

kết xuất cây

Sau khi trình duyệt hoàn thành việc xây dựng DOM và CSSOM, trình duyệt sẽ kết hợp chúng để tạo cây kết xuất (MDN cộng tác viên 2022a). Trình duyệt duyệt qua mọi nút của DOM và sử dụng CSSOM, xác định quy tắc CSS nào sẽ gắn vào mỗi nút. Cây kết xuất chỉ chứa các nút chiếm dung lượng trên trang, vì vậy trình duyệt không bao gồm các nút DOM có div7. Nó sẽ chứa các nút có div8 hoặc div9 vì các nút này chiếm không gian

Lưu ý rằng DOM và CSSOM có thể trải qua các thay đổi khác nếu các yêu cầu đối với CSS hoặc JavaScript bên ngoài vẫn đang chờ xử lý, kích hoạt các bản cập nhật tiếp theo cho cây kết xuất trong quá trình tải trang ban đầu. JavaScript có thể thay đổi một trong hai cây sau khi tải trang bằng cách thêm, xóa hoặc sửa đổi các nút DOM để đáp ứng với trình xử lý sự kiện

Cách trình bày

Sau khi xây dựng cây kết xuất, trình duyệt chuyển sang bước bố cục. Trong quá trình bố trí, trình duyệt xác định cách định vị các nút trên trang. Điều này bao gồm việc tính toán chiều rộng và chiều cao của từng nút cũng như vị trí của nó so với các nút khác (Cộng tác viên MDN 2022a). Các nút trong cây kết xuất thường chồng lên nhau, vì vậy trình duyệt sẽ tạo các lớp để vẽ các nút theo thứ tự xếp chồng chính xác (Hiwarale 2019)

Chiều rộng và chiều cao khả dụng cho bố cục phụ thuộc vào thẻ ________ 60 ________ 61;

Vì bố cục xảy ra ở cuối đường dẫn hiển thị nên có nhiều sự kiện khiến trình duyệt phải tính toán lại bố cục. Bao gồm các

• Thêm, xóa hoặc di chuyển nút DOM
• Thêm hoặc xóa biểu định kiểu
• Thay đổi thuộc tính lớp hoặc kiểu của nút
• Thay đổi kích thước hoặc thay đổi hướng của khung nhìn
• Tính toán chỉ số bố cục, chẳng hạn như offsetWidth hoặc offsetHeight (tiếng Ailen 2020)

Sơn

Với bố cục đã được tính toán, trình duyệt đã sẵn sàng tô điểm ảnh lên màn hình. Trình duyệt vẽ từng lớp riêng biệt, bắt đầu từ lớp dưới cùng và tiến lên lớp trên cùng (Hiwarale 2019). Khi vẽ từng lớp, trình duyệt sẽ lấp đầy các pixel riêng lẻ dựa trên các thuộc tính hiển thị của từng lớp, một quá trình được gọi là rasterization (Hiwarale 2019). Đầu ra của thao tác này là một tập hợp các hình ảnh bitmap (Hiwarale 2019). Trình duyệt gửi các bitmap này tới GPU để vẽ chúng trên màn hình

Sau khi sơn trang ban đầu, trình duyệt sẽ cố gắng tối ưu hóa các bản cập nhật trong các lần sơn sau. Để cập nhật màn hình, trình duyệt sẽ tính toán sự khác biệt so với những gì nó đã vẽ và chỉ vẽ lại phần đã thay đổi (Hiwarale 2019). Để đánh dấu các khu vực của trang mà trình duyệt đang vẽ, hãy bật Kết xuất > Vẽ nhấp nháy trong Chrome DevTools

Phần kết luận

Để hiển thị nội dung của trang web, trình duyệt sẽ thực hiện các bước phân tích cú pháp, xây dựng cây hiển thị, thực hiện bố cục và vẽ. Bằng cách biết trình duyệt thực hiện công việc gì trong từng bước, chúng tôi có thể phát triển các chiến lược để tối ưu hóa đường dẫn hiển thị quan trọng

nguồn

Hinkelmann, F. (2017, ngày 16 tháng 5). Franziska Hinkelmann. Công cụ JavaScript - làm thế nào để họ thậm chí?. JSConf EU [Video]. YouTube. https. //www. youtube. com/watch?v=p-iiEDtpy6I

Hiwarale, U. (2019, ngày 2 tháng 8). Trình duyệt hiển thị trang web như thế nào? . jspoint. https. //Trung bình. com/jspoint/how-the-browser-renders-a-web-page-dom-cssom-and-rendering-df10531c9969

Holtta, M. (2017, ngày 18 tháng 5). Marja Höltta. Phân tích cú pháp JavaScript - lười hơn là háo hức?. JSConf EU 2017 [Video]. YouTube. https. //www. youtube. com/watch?v=Fg7niTmNNLg

Ailen, P. (2020, ngày 22 tháng 4). Điều gì buộc bố cục / chỉnh lại dòng. https. //ý chính. github. com/paulirish/5d52fb081b3570c81e3a

cộng tác viên MDN. (2022a, ngày 5 tháng 6). Đường dẫn hiển thị quan trọng. https. // nhà phát triển. mozilla. org/en-US/docs/Web/Performance/Critical_rendering_path

cộng tác viên MDN. (2022b, ngày 5 tháng 6). . Yếu tố kịch bản. https. // nhà phát triển. mozilla. org/en-US/docs/Web/HTML/Element/script

cộng tác viên MDN. (2022c, ngày 3 tháng 6). Cửa sổ. Sự kiện DOMContentLoad. https. // nhà phát triển. mozilla. org/en-US/docs/Web/API/Window/DOMContentLoaded_event

cộng tác viên MDN. (2022d, ngày 3 tháng 6). Cửa sổ. tải sự kiện. https. // nhà phát triển. mozilla. org/en-US/docs/Web/API/Window/load_event

cộng tác viên MDN. (2022e, ngày 3 tháng 6). Mô hình đối tượng tài liệu (DOM). https. // nhà phát triển. mozilla. org/en-US/docs/Web/API/Document_Object_Model

Saini, A. (2020, ngày 20 tháng 10). Mã JavaScript được thực thi như thế nào? . Namaste JavaScript Ep. 2 [Video]. YouTube. https. //www. youtube. com/watch?v=iLWTnMzWtj4

Mã HTML được hiển thị ở đâu?

Trang HTML được hiển thị như thế nào trong trình duyệt?

Nội dung đã tạo được hiển thị trong trình duyệt như thế nào?

Công cụ kết xuất của trình duyệt hoạt động như thế nào?