De acordo com sua amostra,
<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>
aproximadamente o fluxo de execução é o seguinte:
- O documento HTML é baixado
- A análise do documento HTML é iniciada
- A análise de HTML atinge
<script src="jquery.js" ...
jquery.js é baixado e analisado- A análise de HTML atinge
<script src="abc.js" ...
abc.js é baixado, analisado e executado- A análise de HTML atinge
<link href="abc.css" ...
abc.css é baixado e analisado- A análise de HTML atinge
<style>...</style>
- Regras internas de CSS são analisadas e definidas
- A análise de HTML atinge
<script>...</script>
- Javascript interno é analisado e executado
- A análise de HTML atinge
<img src="abc.jpg" ...
abc.jpg é baixado e exibido- A análise de HTML atinge
<script src="kkk.js" ...
kkk.js é baixado, analisado e executado- A análise do documento HTML termina
Observe que o download pode ser assíncrono e sem bloqueio devido a comportamentos do navegador. Por exemplo, no Firefox, existe essa configuração que limita o número de solicitações simultâneas por domínio.
Além disso, dependendo de o componente já ter sido armazenado em cache ou não, o componente pode não ser solicitado novamente em uma solicitação no futuro próximo. Se o componente tiver sido armazenado em cache, o componente será carregado a partir do cache, em vez da URL real.
Quando a análise é finalizada e o documento está pronto e carregado, os eventos onloadsão disparados. Assim, quando onloadé acionado, o $("#img").attr("src","kkk.png");é executado. Assim:
- O documento está pronto, o onload é acionado.
- Resultados de execução de Javascript
$("#img").attr("src", "kkk.png");
kkk.png é baixado e carregado em #img
O $(document).ready()evento é realmente o evento disparado quando todos os componentes da página estão carregados e prontos. Leia mais sobre o assunto: http://docs.jquery.com/Tutorials:Introducing_$ (document) .ready ()
Editar - Esta parte elabora mais a parte paralela ou não:
Por padrão, e do meu entendimento atual, o navegador geralmente executa cada página de três maneiras: analisador de HTML, Javascript / DOM e CSS.
O analisador HTML é responsável por analisar e interpretar a linguagem de marcação e, portanto, deve poder fazer chamadas para os outros 2 componentes.
Por exemplo, quando o analisador se depara com esta linha:
<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>
O analisador fará três chamadas, duas para Javascript e uma para CSS. Primeiro, o analisador criará esse elemento e o registrará no espaço para nome DOM, juntamente com todos os atributos relacionados a esse elemento. Em segundo lugar, o analisador chamará para vincular o evento onclick a esse elemento específico. Por fim, ele fará outra chamada ao segmento CSS para aplicar o estilo CSS a esse elemento específico.
A execução é descendente e única encadeada. O Javascript pode parecer multiencadeado, mas o fato é que o Javascript é único encadeado. É por isso que, ao carregar o arquivo javascript externo, a análise da página HTML principal é suspensa.
No entanto, os arquivos CSS podem ser baixados simultaneamente, porque as regras CSS estão sempre sendo aplicadas - ou seja, os elementos são sempre repintados com as regras CSS mais recentes definidas - tornando-o desbloqueado.
Um elemento estará disponível apenas no DOM depois de ter sido analisado. Portanto, ao trabalhar com um elemento específico, o script é sempre colocado após ou dentro do evento onload da janela.
Script como este causará erro (no jQuery):
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>
Porque quando o script é analisado, o #mydivelemento ainda não está definido. Em vez disso, isso funcionaria:
<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
OU
<script type="text/javascript">/* <![CDATA[ */
$(window).ready(function(){
alert($("#mydiv").html());
});
/* ]]> */</script>
<div id="mydiv">Hello World</div>
