HTML được thực thi như thế nào trong trình duyệt?

Như bạn có thể biết, thẻ script được sử dụng để chỉ định JavaScript sẽ được chạy trong trang web. Thẻ tập lệnh có thể bao gồm trực tiếp JavaScript hoặc có thể trỏ đến URL nơi tập lệnh sẽ được tải từ đó

Các thẻ tập lệnh được thực thi theo thứ tự chúng xuất hiện

Ý tưởng này phải trực quan khi bạn đọc mã này

Nó ít trực quan hơn (nhưng không kém phần đúng) khi làm việc với các tài nguyên bên ngoài

Nó hoạt động tương tự đối với sự kết hợp của các tập lệnh cục bộ và từ xa

Về mặt chức năng, điều này có nghĩa là bạn có thể làm chậm đáng kể trang web của mình nếu bạn tải tập lệnh chậm ngay từ đầu trang. Điều đó cũng có nghĩa là các tập lệnh xuất hiện sau trên trang có thể phụ thuộc vào những thứ mà các tập lệnh xuất hiện trước đó đã thực hiện

Các phần tử trên trang sẽ không hiển thị cho đến khi tất cả các thẻ tập lệnh trước chúng được tải và thực thi. Điều này có nghĩa là bạn có thể làm tất cả những điều điên rồ khi chỉnh sửa trang trước khi tải, nếu bạn sẵn sàng chấp nhận hiệu suất đạt được

Tuy nhiên, điều này không áp dụng nếu bạn thêm các thẻ tập lệnh vào DOM sau khi trang đã bắt đầu tải bằng cách sử dụng

3 hoặc tương tự. Các thẻ đó sẽ tải bất cứ khi nào trình duyệt thấy phù hợp và không theo thứ tự cụ thể nào

Khi thẻ tập lệnh thực thi, mọi thứ phía trên nó trong DOM đều khả dụng (nhưng không phải mọi thứ bên dưới)

Bạn có thể coi trình phân tích cú pháp HTML giống như di chuyển qua thẻ tài liệu theo thẻ, thực thi bất kỳ mã JavaScript nào khi nó tiếp cận nó. Điều này có nghĩa là các nút DOM có sẵn cho JavaScript của bạn (thông qua

4, jQuery, v.v. ) chỉ khi thẻ mở của chúng xuất hiện sớm hơn trong tài liệu so với thẻ tập lệnh của bạn

Một hệ quả hữu ích của điều này là

5 hầu như luôn có sẵn trong bất kỳ JavaScript nào bạn có thể viết (trên trang web).

6 chỉ khả dụng nếu thẻ tập lệnh của bạn xuất hiện bên trong hoặc sau thẻ mở đầu

7

8 và 9

HTML5 đã thêm một số công cụ để kiểm soát thời điểm thực thi tập lệnh

• 8 có nghĩa là "thực hiện điều này bất cứ khi nào". Cụ thể hơn điều đó có nghĩa là. Tôi không quan tâm nếu bạn thực thi điều này sau khi toàn bộ trang đã được tải và mọi tập lệnh khác đã được thực thi. Nó rất hữu ích cho các mã theo dõi phân tích, chẳng hạn như khi không có mã nào khác trên trang phụ thuộc vào việc thực thi chúng. Việc xác định một biến hoặc hàm trong mã
  8 mà trang cần là tin xấu, vì bạn không có cách nào biết khi nào mã
  8 sẽ thực sự chạy

• 9 có nghĩa là "chờ trình phân tích cú pháp kết thúc để thực hiện điều này". Nó tương đương với việc ràng buộc tập lệnh của bạn với sự kiện
  4 hoặc sử dụng
  5. Khi mã chạy, mọi thứ trong DOM sẽ có sẵn để bạn sử dụng. Không giống như
  8, mã của
  9 sẽ chạy theo thứ tự xuất hiện trong HTML của trang, nó chỉ bị hoãn lại cho đến khi HTML được phân tích cú pháp đầy đủ

Thuộc tính 8

Trong lịch sử (kể từ Netscape 2), sẽ không có vấn đề gì nhiều nếu bạn chỉ định

9 trong thẻ tập lệnh của mình hoặc chỉ cần để trống. Tuy nhiên, nếu bạn đặt bất kỳ loại MIME nào không phải là biến thể của JavaScript thành

8, thì trình duyệt sẽ không thực thi nó. Điều này có thể thú vị khi bạn muốn xác định ngôn ngữ của riêng mình

1

Việc thực thi mã đó thực sự tùy thuộc vào bạn, tôi. e

2

Việc xác định hàm

11 được dành cho người đọc như một bài tập

Nếu bạn có mong muốn ngược lại, bạn cũng có thể ghi đè

8 mặc định cho mọi thẻ tập lệnh trên trang bằng cách sử dụng thẻ

13

6

Hoặc tiêu đề

14

Hãy xem A Brief History of Weird Scripting Languages ​​on the Web để biết thêm chi tiết về những gì

15 là hợp lệ

Có một thuộc tính 16?

Thuộc tính

16 là một phần của thông số Tính toàn vẹn của nguồn tài nguyên con mới. Nó cho phép bạn cung cấp hàm băm cho nội dung mà tệp tập lệnh nên chứa. Nó có nghĩa là để ngăn chặn một diễn viên bất chính gây rối với nội dung của thẻ tập lệnh qua dây. Trong thế giới có SSL, điều này chỉ thực sự có giá trị nếu bạn đang tải tập lệnh từ một số nguồn bên ngoài mà bạn không kiểm soát, chẳng hạn như

18

Nếu bạn chọn sử dụng cái này, bạn bao gồm hàm băm mà bạn đang sử dụng và giá trị của hàm băm, được phân tách bằng dấu gạch nối. Nó trông như thế này

2

Tôi vẫn chưa nhìn thấy nó ngoài tự nhiên, nhưng nếu bạn biết trang web nào sử dụng nó, hãy bình luận bên dưới

19 cũng là một thứ

Nó chưa được chuẩn hóa hoàn toàn, nhưng có một thuộc tính

19 được hỗ trợ bởi một số trình duyệt. Ý tưởng chung là trình duyệt không muốn cho phép bạn làm nhiều việc với các tài nguyên được tải từ một 'nguồn gốc' khác với trang hiện tại. (Nguồn gốc được định nghĩa là sự kết hợp của giao thức, tên máy chủ và cổng của trang. Tôi. e.

21)

Điều này là để ngăn bạn, ví dụ, đưa ra yêu cầu đối với trang web của đối thủ cạnh tranh để hủy bất kỳ tài khoản nào mà người dùng hiện tại có thể có (không đẹp. ). Tuy nhiên, kết nối của nó với các thẻ tập lệnh hơi ngẫu nhiên. Ý tưởng là nếu bạn áp dụng một trình xử lý cho sự kiện

22, thì trình xử lý đó sẽ được cung cấp một số thông tin về trang và tập lệnh mà có lẽ bạn không nên có nếu đang tải mã từ một trang web bên ngoài. Trong các trình duyệt an toàn, thông tin này không được đưa vào trừ khi bạn chỉ định

19

Tuy nhiên,

19 không phải là một bản hack bảo mật kỳ diệu, những gì nó làm là hướng dẫn trình duyệt trải qua quá trình kiểm tra quyền truy cập CORS thông thường để thực hiện một yêu cầu

25 và kiểm tra các tiêu đề

26

27

Nó không hỗ trợ IE, khiến nó trở thành một thứ gì đó mới lạ, nhưng có một thuộc tính gọi là

27 trỏ đến tập lệnh hiện tại đang được thực thi. Nó có thể cực kỳ hữu ích nếu bạn muốn rút các thuộc tính ra khỏi thẻ tập lệnh mà phần nhúng của bạn được bao gồm bằng cách sử dụng. Cá nhân tôi rất vui vì nó không được hỗ trợ đầy đủ vì nó sẽ khiến một số công việc chúng tôi làm tại Háo hức cài đặt mã nhúng khó hơn một chút

29?

Điều này cực kỳ vô dụng vì nó chỉ được hỗ trợ trên Firefox. Nó cùng với

60 cho phép bạn liên kết một sự kiện sẽ được thực thi trước và sau khi mỗi tập lệnh trên trang chạy, điều này khá thú vị

Nếu bạn tò mò, các đối tượng sự kiện bao gồm tham chiếu đến tập lệnh đang được thực thi và sự kiện

61 có thể hủy thực thi bằng cách gọi

62

63 / 64

Cho đến ngày nay, thông số kỹ thuật HTML5 bao gồm một phương pháp liên kết mã hiếm thấy, trước đây dành riêng cho IE, với một sự kiện. Bạn được cho là có thể thực hiện việc này để thẻ tập lệnh không chạy cho đến khi xảy ra sự kiện tải trang

9

Tôi thực sự không thể làm cho tính năng này hoạt động trên Chrome hoặc Firefox (làm cho chúng không tuân thủ các tiêu chuẩn), nhưng rất có thể nó vẫn hoạt động trong IE

65

Giống như cha mẹ của bạn, thật khó tin rằng đã có lúc JavaScript còn non trẻ. Tuy nhiên, sẽ có một ngày bạn không thể chắc chắn liệu một trình duyệt nhất định có hỗ trợ JavaScript hay không. Tệ hơn nữa, bạn không thể chắc chắn rằng trình duyệt thậm chí sẽ biết thẻ

66 là gì. Và nếu một trình duyệt không nhận ra thẻ, thì nó phải hiển thị thẻ đó dưới dạng phần tử nội tuyến chung, nghĩa là tất cả JavaScript bí mật của bạn sẽ được hiển thị cho trang dưới dạng văn bản

May mắn thay, thông số kỹ thuật đủ hữu ích để cung cấp giải pháp, gói mã của bạn vào thứ gì đó mà trình duyệt không hỗ trợ sẽ hiểu là nhận xét HTML

2

Tất nhiên, giống như hầu hết mọi thứ, XHTML làm cho điều này tồi tệ hơn nhiều. XML có một phương pháp thoát nội dung rất đặc biệt có thể chứa các thẻ đóng và như vậy,

67 đã ra đời

4

Cùng với đó, mã của bạn sẽ là XHTML hợp lệ. Điều này sẽ không có bất kỳ tác động nào đến chức năng của nó, nhưng cực kỳ quan trọng đối với giá trị bản thân của bạn với tư cách là nhà phát triển web

Các trình duyệt cũng bao gồm một phương pháp hữu ích để cho phép bạn yêu cầu những người không bật JavaScript biến đi, đó là thẻ

68.

69 bọc nội dung chỉ được hiển thị nếu trình duyệt không hỗ trợ thực thi tập lệnh

0

Nếu tinh ý, bạn sẽ nhận ra rằng

68 không chấp nhận đối số

8, khiến cho sự tương tác của nó với các trang sử dụng nhiều tập lệnh

15 hơi mơ hồ. Hành vi thực tế thay đổi từ trình duyệt này sang trình duyệt khác, nhưng bao gồm việc hiển thị các khối

68 nếu bất kỳ thẻ

66 nào được sử dụng trước đó trong tài liệu sử dụng một

8 không được hỗ trợ. Điều này có nghĩa là rất có thể có những

68 đầu tiên không xuất hiện, trong khi những cái thấp hơn trên trang thì có.

Thẻ tập lệnh và 27

Các thẻ tập lệnh được thêm động vào trang thông qua DOM được trình duyệt thực thi

1

Các thẻ tập lệnh được thêm động vào trang thông qua

27 không

2

Tại sao điều này không rõ ràng, nhưng đó là một câu trả lời thú vị cho câu hỏi nhỏ "có thể có thẻ tập lệnh hiển thị trong trình kiểm tra Chrome chưa thực sự chạy không?"

---

Cảm ơn bạn đã theo dõi. Bài đăng tiếp theo của chúng tôi là trên

29 và nó thật kỳ lạ. Đăng ký bên dưới để nhận thông báo khi bài đăng blog mới của chúng tôi được phát hành

Làm thế nào mã HTML được thực thi trong trình duyệt?

Tại sao HTML chạy trong trình duyệt?

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

Cái gì thực thi mã HTML?