网页的加载和执行顺序？
我做过一些基于web的项目，但是对于一个普通网页的加载和执行顺序，我并没有过多考虑。但现在我需要知道细节。很难从 Google 或 SO 中找到答案，所以我创建了这个问题。
一个示例页面是这样的：
<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>
所以这是我的问题：
此页面如何加载？加载顺序是怎样的？ JS代码什么时候执行？ （内联和外部）CSS 何时执行（应用）？ $(document).ready 什么时候执行？会下载 abc.jpg 吗？或者它只是下载 kkk.png？
我有以下理解：
浏览器首先加载 html (DOM)。浏览器开始从上到下逐行加载外部资源。如果遇到 内部 Javascript 被解析并运行 HTML 解析到 
请注意，由于浏览器的行为，下载可能是异步且非阻塞的。例如，在 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 解析器负责解析和解释标记语言，因此必须能够调用其他 2 个组件。
例如，当解析器遇到这一行时：
<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>
解析器将进行 3 次调用，两次调用 Javascript，一次调用 CSS。首先，解析器将创建该元素并将其注册到 DOM 命名空间中，以及与该元素相关的所有属性。其次，解析器将调用以将 onclick 事件绑定到此特定元素。最后，它将再次调用 CSS 线程以将 CSS 样式应用于此特定元素。
执行是自上而下和单线程的。 Javascript 可能看起来是多线程的，但事实是 Javascript 是单线程的。这就是为什么在加载外部 javascript 文件时，主 HTML 页面的解析被暂停的原因。
但是，可以同时下载 CSS 文件，因为始终应用 CSS 规则 - 意思是说元素始终使用定义的最新 CSS 规则重新绘制 - 从而使其畅通无阻。
元素只有在被解析后才会在 DOM 中可用。因此，当使用特定元素时，脚本总是放置在窗口 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>
或者
<script type="text/javascript">/* <![CDATA[ */
$(window).ready(function(){
alert($("#mydiv").html());
});
/* ]]> */</script>
<div id="mydiv">Hello World</div>
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
<script>会阻止其他组件，对吗？关于每个浏览器的规范的任何参考？相似问题