网页的加载和执行顺序？
网页的加载和执行顺序？
<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)？ 会下载abc.jpg吗？还是只是下载kkk.png？
浏览器首先加载html(DOM)。 浏览器开始从上到下逐行加载外部资源。 如果 <script>满足时，加载将被阻塞，等待加载并执行JS文件，然后继续。 其他资源(CSS/映像)将并行加载，并在需要时执行(如CSS)。
守着一只汪浏览 934回答 3
3回答
-
凤凰求蛊
1)下载HTML。2)HTML是逐步解析的。当到达资产请求时，浏览器将尝试下载该资产。大多数HTTP服务器和大多数浏览器的默认配置是只并行处理两个请求。IE可以被重新配置为并行下载无限数量的资产。SteveSouders能够在IE上并行下载100多个请求。例外是脚本请求阻止IE中的并行资产请求。这就是为什么强烈建议将所有JavaScript放在外部JavaScript文件中，并将请求放在HTML中关闭主体标记之前。3)一旦解析了HTML，就会呈现DOM。CSS与几乎所有用户代理中的DOM呈现并行。因此，强烈建议将所有CSS代码放入文档的<head></head>部分中请求尽可能高的外部CSS文件中。否则，页面将呈现到DOM中CSS请求位置的出现，然后呈现从顶部开始。4)只有在DOM被完全呈现并且页面中所有资产的请求被解析或超时之后，JavaScript才会从onload事件中执行。如果没有从资产请求接收HTTP响应，IE7(我不确定IE8)不会很快超时资产。这意味着JavaScript内联到页面所请求的资产，即写入不包含在函数中的HTML标记的JavaScript，可能会在数小时内阻止onload事件的执行。如果该页中存在此类内联代码，并且由于导致代码崩溃的命名空间冲突而无法执行，则会触发此问题。在上面的步骤中，CPU最密集的步骤是解析DOM/CSS。如果您希望您的页面处理得更快，那么通过消除冗余指令和将CSS指令合并到最少可能的元素引用来编写高效的CSS。减少DOM树中的节点数量也会产生更快的呈现。请记住，您从HTML甚至CSS/JavaScript资产中请求的每个资产都是使用单独的HTTP头请求的。这消耗了带宽，需要处理每个请求。如果希望尽可能快地加载页面，那么就减少HTTP请求的数量，并减少HTML的大小。仅从HTML中将页面重量平均为180 k，这对您的用户体验没有任何好处。许多开发人员都认同这样一种谬误：用户在6纳秒内就决定了页面上内容的质量，然后清除服务器上的DNS查询，如果不高兴就烧掉他的计算机，因此他们提供了250 k HTML的最漂亮的页面。保持您的HTML简短和甜蜜，以便用户可以加载您的网页更快。没有什么比快速响应的网页更能改善用户体验了。
随时随地看视频慕课网APP
JavaScript
Html/CSS