编辑:现在是2022年。如果你对网页的加载和执行以及浏览器如何工作的详细报道感兴趣，你应该查看https://browser.engineering/(在https://github.com/browserengineering/book上开源)
根据你们的样品，
<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>
执行流程大致如下:
The HTML document gets downloaded
The parsing of the HTML document starts
HTML Parsing reaches <script src="jquery.js" ...
jquery.js is downloaded and parsed
HTML parsing reaches <script src="abc.js" ...
abc.js is downloaded, parsed and run
HTML parsing reaches <link href="abc.css" ...
abc.css is downloaded and parsed
HTML parsing reaches <style>...</style>
Internal CSS rules are parsed and defined
HTML parsing reaches <script>...</script>
Internal Javascript is parsed and run
HTML Parsing reaches <img src="abc.jpg" ...
abc.jpg is downloaded and displayed
HTML Parsing reaches <script src="kkk.js" ...
kkk.js is downloaded, parsed and run
Parsing of HTML document ends
请注意，由于浏览器的行为，下载可能是异步的和非阻塞的。例如，在Firefox中有这样的设置，它限制每个域同时请求的数量。
另外，根据组件是否已经缓存，在不久的将来可能不会再次请求该组件。如果组件已经被缓存，组件将从缓存中加载，而不是实际的URL。
当解析结束，文档准备就绪并加载时，将触发onload事件。因此，当onload被触发时，$("#img").attr("src"，"kkk.png");运行。所以:
文档准备就绪，onload启动。
Javascript执行$("#img")。attr(“src”、“kkk.png”);
Kkk.png下载并加载到#img中
$(document).ready()事件实际上是在加载所有页面组件并准备就绪时触发的事件。阅读更多信息:http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
编辑-这部分详细阐述了“是否平行”部分:
默认情况下，根据我目前的理解，浏览器通常以3种方式运行每个页面:HTML解析器、Javascript/DOM和CSS。
HTML解析器负责解析和解释标记语言，因此必须能够调用其他两个组件。
例如，当解析器遇到这一行时:
<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>
解析器将进行3次调用，两次调用Javascript，一次调用CSS。首先，解析器将创建这个元素并在DOM名称空间中注册它，以及与该元素相关的所有属性。其次，解析器将调用onclick事件绑定到这个特定的元素。最后，它将再次调用CSS线程，将CSS样式应用于这个特定的元素。
执行是自上而下和单线程的。Javascript看起来是多线程的，但实际上它是单线程的。这就是为什么当加载外部javascript文件时，主HTML页面的解析被挂起。
然而，CSS文件可以同时下载，因为CSS规则总是被应用-这意味着元素总是用定义的最新CSS规则重新绘制-从而使它不阻塞。
一个元素只有在被解析后才在DOM中可用。因此，在处理特定元素时，脚本总是放置在window onload事件之后或其中。
这样的脚本会导致错误(在jQuery上):
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>
因为在解析脚本时，#mydiv元素仍然没有定义。相反，这是可行的:
<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
OR
<script type="text/javascript">/* <![CDATA[ */
$(window).ready(function(){
alert($("#mydiv").html());
});
/* ]]> */</script>
<div id="mydiv">Hello World</div>
