Numunenize göre,
<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>
kabaca yürütme akışı aşağıdaki gibidir:
- HTML belgesi indiriliyor
- HTML belgesinin ayrıştırılması başlar
- HTML Ayrıştırma ulaşır
<script src="jquery.js" ...
jquery.js indirilir ve ayrıştırılır- HTML ayrıştırma ulaşır
<script src="abc.js" ...
abc.js indirilir, ayrıştırılır ve çalıştırılır- HTML ayrıştırma ulaşır
<link href="abc.css" ...
abc.css indirilir ve ayrıştırılır- HTML ayrıştırma ulaşır
<style>...</style>
- Dahili CSS kuralları ayrıştırılır ve tanımlanır
- HTML ayrıştırma ulaşır
<script>...</script>
- Dahili Javascript ayrıştırılır ve çalıştırılır
- HTML Ayrıştırma ulaşır
<img src="abc.jpg" ...
abc.jpg indirildi ve görüntülendi- HTML Ayrıştırma ulaşır
<script src="kkk.js" ...
kkk.js indirilir, ayrıştırılır ve çalıştırılır- HTML belgesi uçlarının ayrıştırılması
İndirme işleminin, tarayıcının davranışları nedeniyle eşzamansız ve engellemeyebileceğini unutmayın. Örneğin, Firefox'ta alan adı başına eşzamanlı istek sayısını sınırlayan bu ayar vardır.
Ayrıca, bileşenin önceden önbelleğe alınmış olup olmamasına bağlı olarak, bileşen yakın gelecekteki bir istekte yeniden istenmeyebilir. Bileşen önbelleğe alınmışsa, bileşen gerçek URL yerine önbellekten yüklenir.
Ayrıştırma sona erdiğinde ve belge hazır ve yüklendiğinde olaylar onloadtetiklenir. Böylece ne zaman onloadkovulur, $("#img").attr("src","kkk.png");koşulur. Yani:
- Doküman hazır, yüklendi.
- Javascript yürütme isabetleri
$("#img").attr("src", "kkk.png");
kkk.png indirilir ve yüklenir #img
$(document).ready()Olay aslında tüm sayfası bileşenleri yüklendi ve hazır olduğunda ateş olaydır. Bununla ilgili daha fazla bilgi edinin: http://docs.jquery.com/Tutorials:Introducing_$ (belge) .ready ()
Düzenle - Bu kısım, paralel veya daha fazla kısımda daha ayrıntılı olarak açıklanmaktadır:
Varsayılan olarak ve şu anki kavrama göre, tarayıcı genellikle her sayfayı 3 şekilde çalıştırır: HTML ayrıştırıcı, Javascript / DOM ve CSS.
HTML ayrıştırıcı, biçimlendirme dilini ayrıştırmak ve yorumlamaktan sorumludur ve bu nedenle diğer 2 bileşene çağrı yapabilmelidir.
Örneğin, ayrıştırıcı bu çizgiyle karşılaştığında:
<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>
Ayrıştırıcı, ikisi Javascript ve biri CSS olmak üzere 3 çağrı yapacaktır. İlk olarak, ayrıştırıcı bu öğeyi oluşturur ve bu öğeyle ilgili tüm özniteliklerle birlikte DOM ad alanına kaydeder. İkinci olarak, ayrıştırıcı onclick olayını bu öğeye bağlamak için çağrıda bulunacaktır. Son olarak, bu belirli öğeye CSS stilini uygulamak için CSS iş parçacığını başka bir çağrı yapar.
Yürütme yukarıdan aşağıya ve tek iş parçacıklı. Javascript çok iş parçacıklı görünebilir, ancak gerçek şu ki Javascript tek iş parçacıklıdır. Bu nedenle harici javascript dosyası yüklenirken, ana HTML sayfasının ayrıştırılması askıya alınır.
Bununla birlikte, CSS dosyaları aynı anda indirilebilir çünkü CSS kuralları her zaman uygulanır - yani, elemanlar her zaman tanımlanan en taze CSS kuralları ile yeniden boyanır - böylece engellemeyi kaldırır.
Bir öğe yalnızca ayrıştırıldıktan sonra DOM'da kullanılabilir. Bu nedenle, belirli bir öğeyle çalışırken komut dosyası her zaman pencere onload olayının arkasına veya içine yerleştirilir.
Bunun gibi komut dosyaları hataya neden olur (jQuery'de):
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>
Çünkü komut dosyası ayrıştırıldığında, #mydivöğe hala tanımlanmamıştır. Bunun yerine bu işe yarar:
<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
VEYA
<script type="text/javascript">/* <![CDATA[ */
$(window).ready(function(){
alert($("#mydiv").html());
});
/* ]]> */</script>
<div id="mydiv">Hello World</div>
