Bir web sayfası yükleme ve yürütme sırası mı?

SORU

25 Kasım 2009, ÇARŞAMBA

Bir web sayfası yükleme ve yürütme sırası mı?

Bazı web tabanlı projeler yaptım, ama sıradan bir web sayfası yükleme ve yürütme sırası hakkında çok fazla düşünmüyorum. Ama şimdi ayrıntı bilmem gerek. Bu soru yarattım zor Google'dan cevaplar ya da bulmak.

Örnek bir sayfa böyle

<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>

Burada benim sorular:

Bu nasıl sayfa yükleniyor mu?
Yükleme sırası nedir?
Ne zaman idam JS kodudur? () içi ve dış
Ne zaman CSS idam (uygulamalı).
Ne zaman geliyor $(document).hazır idam olsun?
Abc.jpg indirilen olacak? Yoksa sadece download kkk geliyor.png?

Şu anlayış var:

Tarayıcı html (DOM) ilk başta yükler.
Tarayıcı yukarıdan aşağıya, satır satır, dış kaynakları yüklemek için başlar.
Eğer <script> bir araya geldi ise, yükleme engellenir ve JS dosyası yüklenir ve çalıştırılır ve devam o zamana kadar bekle.
Diğer kaynaklar (resimler CSS/) paralel yüklü ve eğer (CSS gibi) idam ihtiyaç vardır.

Ya da bu gibi:

Tarayıcı html (DOM) ayrıştırır ve bir dizi dış kaynakları alır ya da yığın gibi bir yapı. Html yüklendikten sonra, tarayıcı tüm kaynakları yüklenene kadar paralel yapının dış kaynakları yüklemek ve çalıştırmak için başlar. Sonra DOM kullanıcının davranışlar JS göre karşılık değiştirilecek.

Herkes bir html sayfası tepkisi var ne olacağına dair ayrıntılı bir açıklama yapabilir mi? Bu farklı tarayıcılarda değişir mi? Bu soru hakkında herhangi bir referans var mı?

Teşekkürler.

DÜZENLEME:

Firebug ile Firefox bir deney yaptım. Ve aşağıdaki resim gibi gösterir: alt text

CEVAP

25 Kasım 2009, ÇARŞAMBA

Sizin örnek 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 indirilen alır
HTML belgesi ayrıştırma başlar
HTML Ayrıştırma ulaşır <script src="jquery.js" ...
jquery.js indirilen ve ayrıştırılır
HTML ayrıştırma <script src="abc.js" ... ulaşır
abc.js indirilen, ayrıştırıldı ve çalıştırın
HTML ayrıştırma ulaşır <link href="abc.css" ...
abc.css indirilen 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ın
HTML Ayrıştırma ulaşır <img src="abc.jpg" ...
abc.jpg indirilen ve görüntülenir
HTML Ayrıştırma ulaşır <script src="kkk.js" ...
kkk.js indirilen, ayrıştırıldı ve çalıştırın
HTML belgesi ayrıştırma biter

İndirme işlemi zaman uyumsuz olması ve engellenmeyen tarayıcı davranışları nedeniyle olabileceğini unutmayın. Firefox örneğin, etki alanı başına eşzamanlı istek sayısını sınırlayan bu ayar.

Ayrıca bu bileşen zaten önbelleğe olup olmadığını bağlı olarak, bileşeni tekrar yakın gelecekte bir istek istenebilir. Eğer bileşeni, önbelleğe, bileşen gerçek URL yerine önbellekten yüklenir.

Ayrıştırma bitti ve belge hazır ve yüklü olduğunda, 21* *olaylar tetiklenir. onload ateş, $("#img").attr("src","kkk.png"); çalışma böylece. Yani:

Belge hazır, yüklendiğinde tetiklenir.
Javascript yürütme $("#img").attr("src", "kkk.png"); vurur
kkk.png #img içine indirilir ve yükler

$(document).ready() olay aslında olay tüm sayfa bileşenleri yüklü ve hazır olduğunda ateş etti. Bu konuda daha fazla bilgi: http://docs.jquery.com/Tutorials:Introducing_$(document).() hazır

Edit - Bu bölümü bir parçası değil paralel veya daha masaya yatırıldı

Genellikle 3 yolu her sayfada çalışır tarayıcı benim şimdiki anlayış, varsayılan olarak,: HTML ayrıştırıcı/DOM, Javascript ve CSS.

HTML çözümleyici ve biçimlendirme dili ayrıştırma yorumlama sorumludur ve böylece diğer 2 bileşenleri için arama yapmak gerekir.

Çözümleyici bu hat üzerinden gelir örneğin:

<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>

Çözümleyici 3 çağırır, iki Javascript ve CSS yapacak. Öncelikle, çözümleyici bu öğe oluşturmak ve kaydetmek DOM ad, öznitelikleri bu element ile ilgili bir araya gelecek. İkincisi, çözümleyici bu özel öğe özelliği olayı bağlamak için arayacak. Son olarak, bu belirli öğe için CSS stili uygulamak için CSS iş parçacığı için başka bir çağrı yapacak.

Yürütme yukarıdan aşağıya ve tek dişli. Javascript çok parçacıklı görünebilir, ama aslında Javascript tek dişli olduğunu. Bu dış javascript dosyasını yüklerken, ana HTML sayfasının ayrıştırma askıya alınmış olmasıdır.

Ancak, CSS dosyaları CSS kuralları her zaman uygulanır, çünkü aynı anda download edilebilir öğeleri her zaman taze CSS kuralları tanımlı ile boyanmış olduğunu söylemek - böylece blokaj yapma.

Bir element sadece ayrıştırılmış sonra DOM sunulacak. Belirli bir element ile çalışırken, komut her zaman sonra yerleştirilen, ya da pencere yüklendiğinde olayının içinde olduğunu böylece.

Böyle hata Script (jQuery) neden olur:

<script type="text/javascript">/* <![CDATA[ */
  alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>

Komut dosyası ayrıştırılır #mydiv eleman hala tanımlı değil çünkü. Bunun yerine bu işe yarar:

<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
  alert($("#mydiv").html());
/* ]]> */</script>

<script type="text/javascript">/* <![CDATA[ */
  $(window).ready(function(){
                    alert($("#mydiv").html());
                  });
/* ]]> */</script>
<div id="mydiv">Hello World</div>

Bunu Paylaş: