浏览器渲染网页时遇到脚本标签

后读how browser works和浏览器rendering process，我仍然对浏览器的解析过程中的混乱时遇到<script>标签，该帖子没有真正覆盖。浏览器渲染网页时遇到脚本标签

主要过程是在以下PIC描述： 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解析器和CSS解析器工作平行
在HTML解析器，当遇到<script>标签：浏览器停止直到js文件被下载并执行完成？对于这个例子，浏览器不会下载another.css直到main.js下载并执行？

来源

2013-10-31 jason

'“浏览器：

您可以通过一个事件监听连接到body.onload事件 <body onload="load()">其中load（）方法是在你的main.js功能

看看这个做到这一点是单线程“ - 说谁？ –

关于'script'标签，浏览器等待它无论脚本标签（头部或身体）：例如，当它在头，浏览器完全停止渲染'body'之前解析它。 – Bigood

@Bigood，所以当解析脚本时，一切都停止了，只是等待它完成？任何下载也停止？ – jason

1：浏览器不是单线程的，如果你留意你的taskmanager，你会发现浏览器实际上使用了多个线程。我认为浏览器为htmlpage保留1个线程，并创建一个新的线程/重用线程来获取图像，CSS和JS，因此不阻止主要的HTML线程。

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

通常情况下这将是您的最佳利益，制止JS的执行。这就是为什么你通常把你所有的JS功能集成到功能，具有当装上htmlpage所有元素触发您的JS一个初始化或加载功能。 Link

来源

2013-10-31 11:08:16 Raveno

对于第二个问题，当下载main.js并执行代码时，其他的东西都被中止了？在执行main.js之前，浏览器不会下载another.css？如果是这样，任何工具要观察？ – jason

处理main.js的线程在完成任务之前不会执行任何其他操作。其他需要下载的元素，比如another.css，会被另一个线程处理，不会阻止html或js的执行。这又是为什么你会想要在body onload事件上执行你的js。对于工具，如果您使用的是Chrome，则可以通过按Ctrl + Shift + I并选择网络选项卡来检查网络流量。在这里你会发现多个请求（线程）正在同时运行。 – Raveno

浏览器渲染网页时遇到脚本标签

回答

相关问题