Question

在阅读how browser works和浏览器rendering process之后，遇到<script>标记时，我仍然对浏览器解析过程感到困惑，这些帖子并未真正涵盖。

主要过程如下图所示： enter image description here

假设我们有一个简单的html

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

问题：

浏览器是单线程，因此HTML Parser和CSS Parser如何并行工作
在HTML Parser中，遇到<script>标记时，浏览器暂停，直到js文件下载并执行完毕？对于此示例，浏览器不会下载another.css，直到main.js下载并执行？

Answer 1

1：浏览器不是单线程的，如果你密切关注你的任务管理器，你会发现浏览器实际上使用了几个线程。我认为浏览器为htmlpage保留了1个线程，并创建了一个新线程/重用线程来获取图像，css和js，从而不会阻塞主html线程。

2：当HTML解析器遇到<script src="main.js"></script>标记时，它会将main.js下载到客户端并执行它可以找到的任何js代码。

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

您可以通过将eventlistener附加到body.onload-event来完成此操作 <body onload="load()">其中load（）是main.js中的一个函数

看看这个：Link

遇到脚本标记时的浏览器呈现页面

1 个答案: