2010-11-22 34 views
6

Trình duyệt web xử lý nội dung JavaScript của trang web như thế nào? Nội dung JavaScript có được phân tích cú pháp thành DOM và sau đó được hiển thị không?Trình duyệt xử lý JavaScript như thế nào?

Tôi không cần đặc điểm kỹ thuật, nhưng tôi cần biết cách thực hiện. Vui lòng cho tôi biết toàn bộ quá trình xử lý nội dung JavaScript trên trang web.

Trả lời

28

Các phần script của trang web được xử lý bởi trình thông dịch JavaScript của trình duyệt, có thể là một phần nội tại của trình duyệt nhưng thường là một mô-đun riêng biệt, đôi khi thậm chí là một dự án hoàn toàn khác biệt (Chrome sử dụng V8; IE sử dụng JScript; Firefox sử dụng SpiderMonkey, v.v.).

Khi phân tích cú pháp HTML đạt đến một yếu tố script, tất cả rằng phân tích cú pháp không được đọc và lưu trữ các văn bản thông qua việc kết thúc </script> thẻ (hoặc lấy các tập tin tham chiếu thông qua thuộc tính src). Sau đó, trừ khi tác giả đã sử dụng số defer or async attributes, tất cả phân tích cú pháp HTML và hiển thị sẽ dừng tạm dừng và trình phân tích cú pháp HTML đưa văn bản tập lệnh đến trình thông dịch JavaScript. Trình thông dịch JavaScript diễn giải mã JavaScript trong ngữ cảnh của đối tượng window và khi hoàn thành trở lại trình phân tích cú pháp HTML, sau đó có thể tiếp tục phân tích cú pháp và hiển thị trang. Điều này dừng-tất cả mọi thứ và chạy-JavaScript là lý do tại sao một số người nổi bật recommend putting scripts at the bottom của trang để cải thiện thời gian tải cảm nhận. Điều này cũng có nghĩa là các thẻ script được xử lý theo thứ tự, điều này có thể quan trọng nếu một tập lệnh dựa vào một tập lệnh khác. Nếu thuộc tính defer hoặc async được sử dụng, việc thực thi tập lệnh có thể được hoãn lại cho đến sau này trên các trình duyệt hỗ trợ nó. Tất cả các tập lệnh trên trang được thực hiện trong cùng một ngữ cảnh thực thi chung, chia sẻ cùng một không gian tên và vùng bộ nhớ chung (và do đó có thể tương tác với nhau).

Khi trang được phân tích cú pháp và hiển thị, nhiều sự kiện có thể xảy ra   — người dùng có thể nhấp vào nội dung nào đó, cửa sổ trình duyệt có thể được thay đổi kích thước, chuột có thể di chuyển qua các phần tử. Mã JavaScript được chạy do trong thẻ script có thể "kết nối" các sự kiện này, yêu cầu trình duyệt gọi một hàm trong JavaScript khi sự kiện xảy ra. Điều này cho phép JavaScript tương tác   — người dùng nhấp vào một phần tử trên trang, ví dụ và trình duyệt thông báo cho trình thông dịch JavaScript rằng nó sẽ chạy hàm X trong mã JavaScript. Như bạn có thể thấy ở trên, có hai tình huống hơi khác nhau trong đó có thể chạy mã JavaScript: Trong quá trình phân tích/kết xuất trang (khi phần tử script không sử dụng thuộc tính defer hoặc async đang được xử lý ban đầu) và sau quy trình phân tích/hiển thị (tập lệnh trì hoãn và mã chạy để phản hồi sự kiện). JavaScript chạy trong quá trình phân tích/kết xuất có thể trực tiếp xuất nội dung tới trình phân tích cú pháp HTML thông qua hàm document.write. JavaScript chạy sau khi phân tích cú pháp/dựng hình hoàn tất không thể làm điều đó, tất nhiên, nhưng có thể sử dụng DOM HTML API rất mạnh để tương tác với DOM.

Có thể đáng chú ý là yếu tố noscript: Trong trình duyệt đã bật JavaScript, noscript các thành phần được bỏ qua hoàn toàn. Trong trình duyệt không có JavaScript hoặc JavaScript bị vô hiệu hóa, các thành phần script bị bỏ qua hoàn toàn và thay vào đó, các phần tử noscript được đọc. Điều này giúp dễ dàng bao gồm nội dung sẽ chỉ được hiển thị nếu JavaScript hoặc không được bật trên trình duyệt khi trang được hiển thị.

khuyến nghị đọc:

Các vấn đề liên quan