HTML页面加载的顺序？
nik*_*rao 22 html javascript css
HTML页面加载的顺序是什么.请参阅下面的基本HTML大纲 -
<html>
<head>
<link rel="stylesheet" href="css/sheet1.css">
<link rel="stylesheet" href="css/sheet2.css"
<script src="scripts/take1.js"></script>
<script src="scripts/take2.js"></script>
<head>
<body>
<button>button1</button>
<img src = "HQ1.jpg" />
<img src = "HQ2.jpg" />
<button>button2</button>
</body>
</html>
我所知道的 - (如果我不对,请纠正我)
头部首先加载.然后身体部分加载.
我的问题 -
1.只有在头部完全装入后,身体部分才开始加载吗？
2. css sheet1是否完全加载,然后只有sheet2和JS文件开始加载？
3. CSS文件并行加载吗？与JS文件相同..？或者CSS和JS文件并行加载？
4.由于HQ*图像是大文件,因此加载需要时间.只有HQ1和HQ2完全加载后,button2才会加载并显示在页面中？
5. HQ1和HQ2的下载是并行发生的,还是同步的,首先是HQ1然后是HQ2？
jfr*_*d00 49
HTML页面从头到尾依次解析.当遇到诸如样式表,图像或脚本之类的资源时,浏览器会触发对这些资源的并行请求.
图像和样式表不被视为阻塞资源,这意味着在获取这些资源时,可以继续解析页面的其余部分.
没有标记defer或async阻塞的脚本标记,它们必须在继续解析页面其余部分之前加载和执行.
一旦头部完全装入,车身部分是否开始加载？
是.但它不一定等待<head>标记中指定的所有资源.它可能会在获取<body>所有<head>资源之前开始解析.但是,该<head>部分中的所有标记在开始解析该<body>部分之前都会被解析.
css sheet1是否完全加载,然后只有sheet2和JS文件开始加载？
否.样式表是并行加载的,页面不会阻止进一步解析等待样式表加载.
CSS文件并行加载吗？与JS文件相同..？或者CSS和JS文件并行加载？
CSS文件并行加载.可以并行获取多个脚本文件,但是在获取并执行脚本文件之前不会继续进一步解析(除非它具有async或defer属性).作为性能优化,浏览器可以"向前看"页面中的其他资源,并且可以并行获取它们.例如,可以并行获取多个脚本文件,即使它们的执行必须是串行的.
由于HQ*图像是大文件,因此加载需要时间.只有HQ1和HQ2完全加载后,button2才会加载并显示在页面中？
不,图像是异步加载的,不会阻止加载页面的其余部分或HTML标记.
HQ1和HQ2的下载是并行发生的,还是同步的,首先是HQ1然后是HQ2？
图像并行加载到一个点.浏览器具有某些连接限制,并且一次只能从同一服务器并行加载最多N个资源.在您的简单网页中,HQ1和HQ2可能会并行加载 - 尽管这取决于浏览器实现,而不是规范中的内容.
HTML页面加载的顺序是什么
因此,在您的示例HTML页面中:
<html>
<head>
<link rel="stylesheet" href="css/sheet1.css">
<link rel="stylesheet" href="css/sheet2.css">
<script src="scripts/take1.js"></script>
<script src="scripts/take2.js"></script>
</head>
<body>
<button>button1</button>
<img src = "HQ1.jpg" />
<img src = "HQ2.jpg" />
<button>button2</button>
</body>
</html>
这是一系列操作:
- 浏览器解析
<html>和<head>标记. - 浏览器遇到第一个
<link>标记,看到对外部样式表的引用,并启动服务器请求以下载该外部样式表.浏览器不会等待该请求完成. - 浏览器遇到第二个
<link>标记,看到对外部样式表的引用,并启动服务器请求以下载第二个外部样式表.浏览器不会等待该请求完成. - 浏览器遇到
<script>指定外部脚本文件的第一个标记.浏览器从服务器发起对外部脚本文件的请求. - 浏览器可以"向前看"并查看下一个
<script>标记,并启动对该外部脚本文件的请求. - 由于外部
<script>资源是阻塞资源,因此在获取并执行第一个脚本文件之前,官方页面解析和执行无法继续.浏览器可以预先查看是否应该启动任何其他资源的下载. - 第一个脚本文件完成下载.浏览器执行该脚本.
- 第二个脚本文件完成下载.浏览器执行该脚本.
- 在此过程中的任何时候,如果任一样式表完成下载,则会尽快处理它们.
- 处理完第二个块脚本文件后,页面解析可以继续.
</head>和<body>标签被解析.<button>button1</button>被解析并添加到body DOM中.浏览器此时可以进行部分渲染.<img>解析两个标签并启动其外部图像的提取.<button>处理第二个标签并可以渲染.- 浏览器会看到表示页面末尾的结束标记.
- 在未来的某个时刻,图像完成下载和渲染完成.根据图像和浏览器,图像可能在下载时进行渐进式渲染.
正如其他人所提到的,Chrome开发者工具中"网络"选项卡的"时间轴"部分可以是一个非常有效的可视化工具,用于向您展示各种页面组件的下载是如何工作的.
要说明Chrome开发者工具的"网络"标签中的信息类型,请参阅加载StackOverflow页面的屏幕截图.右侧的条形图显示了首次请求各种资源以及何时完成下载的时间表.
作为另一种资源,此脚本的答案加载和执行顺序包含脚本下载方式/时间的详细说明,并包含异步和延迟属性的效果.
- @nikhilrao - 这回答了你的问题吗？既然看起来您可能是StackOverflow的新手,您是否知道如果您的问题得到了解答,那么您应该选择最佳答案并单击答案左侧的绿色复选标记.这将告知社区您的问题已得到解答,并为您和提供答案的人员提供一些声誉点. (2认同)