Theo mẫu của bạn,
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="abc.js" type="text/javascript">
</script>
<link rel="stylesheets" type="text/css" href="abc.css"></link>
<style>h2{font-wight:bold;}</style>
<script>
$(document).ready(function(){
$("#img").attr("src", "kkk.png");
});
</script>
</head>
<body>
<img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
<script src="kkk.js" type="text/javascript"></script>
</body>
</html>
đại khái là dòng thực thi là như sau:
- Tài liệu HTML được tải xuống
- Việc phân tích cú pháp tài liệu HTML bắt đầu
- Phân tích cú pháp HTML
<script src="jquery.js" ...
jquery.js được tải xuống và phân tích cú pháp- Phân tích cú pháp HTML
<script src="abc.js" ...
abc.js được tải xuống, phân tích cú pháp và chạy- Phân tích cú pháp HTML
<link href="abc.css" ...
abc.css được tải xuống và phân tích cú pháp- Phân tích cú pháp HTML
<style>...</style>
- Các quy tắc CSS nội bộ được phân tích cú pháp và xác định
- Phân tích cú pháp HTML
<script>...</script>
- Javascript nội bộ được phân tích cú pháp và chạy
- Phân tích cú pháp HTML
<img src="abc.jpg" ...
abc.jpg được tải xuống và hiển thị- Phân tích cú pháp HTML
<script src="kkk.js" ...
kkk.js được tải xuống, phân tích cú pháp và chạy- Phân tích cú pháp tài liệu HTML kết thúc
Lưu ý rằng việc tải xuống có thể không đồng bộ và không chặn do các hành vi của trình duyệt. Ví dụ: trong Firefox có cài đặt này giới hạn số lượng yêu cầu đồng thời trên mỗi tên miền.
Cũng tùy thuộc vào việc thành phần đã được lưu trữ hay chưa, thành phần có thể không được yêu cầu lại trong yêu cầu trong tương lai gần. Nếu thành phần đã được lưu trữ, thành phần sẽ được tải từ bộ đệm thay vì URL thực tế.
Khi quá trình phân tích cú pháp kết thúc và tài liệu đã sẵn sàng và được tải, các sự kiện onloadsẽ được kích hoạt. Vì vậy, khi onloadbị sa thải, $("#img").attr("src","kkk.png");được chạy. Vì thế:
- Tài liệu đã sẵn sàng, tải được bắn.
- Lượt truy cập Javascript
$("#img").attr("src", "kkk.png");
kkk.png được tải xuống và tải vào #img
Sự $(document).ready()kiện này thực sự là sự kiện được kích hoạt khi tất cả các thành phần trang được tải và sẵn sàng. Đọc thêm về nó: http://docs.jquery.com/Tutorials:Int Giới thiệu_$ (tài liệu). Đã ()
Chỉnh sửa - Phần này chi tiết hơn về phần song song hoặc không:
Theo mặc định và theo hiểu biết hiện tại của tôi, trình duyệt thường chạy mỗi trang theo 3 cách: trình phân tích cú pháp HTML, Javascript / DOM và CSS.
Trình phân tích cú pháp HTML chịu trách nhiệm phân tích và giải thích ngôn ngữ đánh dấu và do đó phải có thể thực hiện cuộc gọi đến 2 thành phần khác.
Ví dụ: khi trình phân tích cú pháp đi qua dòng này:
<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>
Trình phân tích cú pháp sẽ thực hiện 3 cuộc gọi, hai cuộc gọi đến Javascript và một cuộc gọi đến CSS. Đầu tiên, trình phân tích cú pháp sẽ tạo thành phần này và đăng ký nó trong không gian tên DOM, cùng với tất cả các thuộc tính liên quan đến phần tử này. Thứ hai, trình phân tích cú pháp sẽ gọi để liên kết sự kiện onclick với phần tử cụ thể này. Cuối cùng, nó sẽ thực hiện một cuộc gọi khác đến luồng CSS để áp dụng kiểu CSS cho thành phần cụ thể này.
Việc thực hiện là từ trên xuống và luồng đơn. Javascript có thể trông đa luồng, nhưng thực tế là Javascript là một luồng đơn. Đây là lý do tại sao khi tải tệp javascript bên ngoài, việc phân tích cú pháp của trang HTML chính bị treo.
Tuy nhiên, các tệp CSS có thể được tải xuống đồng thời vì các quy tắc CSS luôn được áp dụng - có nghĩa là các phần tử luôn được sơn lại với các quy tắc CSS mới nhất được xác định - do đó làm cho nó bỏ chặn.
Một phần tử sẽ chỉ khả dụng trong DOM sau khi được phân tích cú pháp. Do đó, khi làm việc với một phần tử cụ thể, tập lệnh luôn được đặt sau hoặc trong sự kiện tải cửa sổ.
Tập lệnh như thế này sẽ gây ra lỗi (trên jQuery):
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>
Bởi vì khi tập lệnh được phân tích cú pháp, #mydivphần tử vẫn không được xác định. Thay vào đó, nó sẽ hoạt động:
<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
HOẶC LÀ
<script type="text/javascript">/* <![CDATA[ */
$(window).ready(function(){
alert($("#mydiv").html());
});
/* ]]> */</script>
<div id="mydiv">Hello World</div>
