个人中心
文章发布
退出
作者热门文章
- mongodb - 在 MongoDB mapreduce 中，如何展平值对象？
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗？
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
25
4
我做过一些基于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>
所以这是我的问题:
我的理解如下:
<script>满足了，会阻塞加载，等到JS文件加载执行完毕再继续。还是这样的:
浏览器解析 html (DOM) 并以数组或类似堆栈的结构获取外部资源。 html加载完成后，浏览器开始并行加载结构中的外部资源并执行，直到所有资源都加载完毕。然后根据 JS 的不同，DOM 会根据用户的行为发生变化。
谁能详细解释一下当你得到一个 html 页面的响应时会发生什么？这在不同的浏览器中会有所不同吗？关于这个问题的任何引用？
谢谢。
编辑:
我用 Firebug 在 Firefox 中做了一个实验。它显示为下图: 
最佳答案
编辑:现在是 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>
大概的执行流程如下:
<script src="jquery.js" ... jquery.js被下载并解析<script src="abc.js" ... abc.js被下载、解析并运行<link href="abc.css" ... abc.css被下载并解析<style>...</style> <script>...</script> <img src="abc.jpg" ... abc.jpg已下载并显示<script src="kkk.js" ... kkk.js被下载、解析并运行请注意，由于浏览器的行为，下载可能是异步且非阻塞的。例如，在 Firefox 中，此设置限制了每个域的同时请求数。
还取决于组件是否已经被缓存，在不久的将来请求中可能不会再次请求该组件。如果组件已被缓存，则组件将从缓存中加载，而不是从实际 URL 中加载。
当解析结束并且文档准备好并加载时，事件 onload被解雇。因此当onload被解雇，$("#img").attr("src","kkk.png");正在运行。所以:
$("#img").attr("src", "kkk.png"); kkk.png已下载并加载到 #img $(document).ready() event 实际上是当所有页面组件都加载并准备好时触发的事件。阅读更多信息: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 次调用，其中 2 次调用 Javascript，1 次调用 CSS。首先，解析器将创建该元素并将其注册到 DOM 命名空间中，以及与该元素相关的所有属性。其次，解析器将调用以将 onclick 事件绑定(bind)到此特定元素。最后，它将再次调用 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>
关于javascript - 网页的加载和执行顺序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1795438/
25
4
0
我有一个“有趣”的问题，即以两种不同的方式运行 wine 会导致: $> wine --version /Applications/Wine.app/Contents/Resources/bin/wi
我制作了这个网络抓取工具来获取网页中的表格。我使用 puppeteer (不知道 crontab 有问题)、Python 进行清理并处理数据库的输出 但令我惊讶的是，当我执行它时 */50 * * *
JavaScript 是否被调用或执行取决于什么？准确地说，我有两个函数，它们都以相同的方式调用: [self.mapView stringByEvaluatingJavaScriptFromStri
我目前正在使用 python 做一个机器学习项目(这里是初学者，从头开始学习一切)。 只是想知道 statsmodels 的 OLS 和 scikit 的 PooledOlS 使用我拥有的相同面板数据
在使用集成对象模型 (IOM) 后，我可以执行 SAS 代码并将 SAS 数据集读入 .Net/C# 数据集 here . 只是好奇，使用 .Net 作为 SAS 服务器的客户端与使用 Enterpr
有一些直接的 jQuery 在单击时隐藏打开的 div 未显示，但仍将高度添加到导航中以使其看起来好像要掉下来了。 这个脚本工作正常: $(document).ready(funct
这个问题已经有答案了: How do I compare strings in Java? (23 个回答) 已关闭 4 年前。 这里是 Java 新手，我正在使用 NetBeans 尝试一些简单的代
如果我将它切换到 Python 2.x，它执行 10。这是为什么？ 训练逻辑回归模型 import keras.backend as
我有两个脚本，它们包含在 HTML 正文中。在第一个脚本中，我初始化一个 JS 对象，该对象在第二个脚本标记中引用。 ... obj.a = 1000; obj.
每当我运行该方法时，我都会收到一个带有数字的错误 以下是我的代码。 public String getAccount() { String s = "Listing the accounts";
我已经用 do~while(true) 创建了我的菜单；但是每次用户输入一个数字时，它不会运行程序，而是再次显示菜单!你怎么看？ //我的主要方法 public static void main(St
执行命令后，如何让IPython通知我？我可以使用铃声/警报还是通过弹出窗口获取它？我正在OS X 10.8.5的iTerm上运行Anaconda。 最佳答案 使用最新版本的iTerm，您可以在she
您好，我刚刚使用菜单栏为 Swing 编写了代码。但是问题出现在运行中。我输入: javac Menu.java java Menu 它没有给出任何错误，但 GUI 没有显示。这是我的源代码以供引用:
我觉得这里缺少明显的东西，但是我看不到它写在任何地方。 我使用Authenticode证书对可执行文件进行签名，但是当我开始学习有关它的更多信息时，我对原样的值(value)提出了质疑。 签名的exe
我正在设计一个应用程序，它使用 DataTables 中的预定义库来创建数据表。我想对数据表执行删除操作，为此应在按钮单击事件上执行 java 脚本。 $(document).ready(functi
我是 Haskell 新手，如果有人愿意帮助我，我会很高兴!我试图让这个程序与 do while 循环一起工作。 第二个 getLine 命令的结果被放入变量 goGlenn 中，如果 goGlenn
我有一个用 swing 实现迷你游戏的程序，在主类中我有一个循环，用于监听游戏 map 中的 boolean 值。使用 while 实现的循环不会执行一条指令，如果它是唯一的一条指令，我不知道为什么。
我正在尝试开发一个连接到 Oracle 数据库并执行函数的 Java 应用程序。如果我在 Eclipse 中运行该应用程序，它可以工作，但是当我尝试在 Windows 命令提示符中运行 .jar 时，
我正在阅读有关 Java 中的 Future 和 javascript 中的 Promises 的内容。下面是我作为示例编写的代码。我的问题是分配给 future 的任务什么时候开始执行？ 当如下行创
我有一个常见的情况，您有两个变量(xSpeed 和 ySpeed)，当它们低于 minSpeed 时，我想将它们独立设置为零，并在它们都为零时退出。 最有效的方法是什么？目前我有两种方法(方法2更干净
我是一名优秀的程序员,十分优秀！