4

在阅读了浏览器的工作原理和浏览器渲染过程之后,我仍然对遇到<script>标签时的浏览器解析过程感到困惑,这些帖子并没有真正涵盖。

主要流程如下图所示: 在此处输入图像描述

假设我们有一个简单的 html

<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
<link rel="stylesheet" href="another.css">
</head>
<body>
</body>
</html>

问题

  1. 浏览器是单线程的,那么 HTML Parser 和 CSS Parser 是如何并行工作的
  2. 在 HTML Parser 中,当遇到<script>标签时,浏览器是否会停止,直到 js 文件下载并执行完成?对于这个例子,浏览器在下载并执行another.css之前不会下载?main.js
4

1 回答 1

6

1:浏览器不是单线程的,如果你留意你的任务管理器,你会发现浏览器实际上使用了多个线程。我认为浏览器为 htmlpage 保留 1 个线程,并创建一个新线程/重用线程来获取图像、css 和 js,因此不会阻塞主 html 线程。

2:当 HTML 解析器遇到<script src="main.js"></script>标签时,它会将 main.js 下载到客户端并执行它可以找到的任何 js-code。

通常,停止执行 js 符合您的最佳利益。这就是为什么您通常将所有 js 功能放入函数中,并有一个 init 或 load 函数在加载 htmlpage 上的所有元素时触发您的 js。

您可以通过将 eventlistener 附加到 body.onload-event 来做到这一点, <body onload="load()">其中 load() 是 main.js 中的一个函数

看看这个:链接

于 2013-10-31T11:08:16.270 回答