具有asyc属性的脚本仍然会阻止其他脚本执行

注意：我没有开发此网站 - 我只需处理它。具有asyc属性的脚本仍然会阻止其他脚本执行

我有一个LAB.js文件，用于在头部异步加载一系列脚本。再往下，我还有两个外部脚本，一个在头部，另一个在身体顶部。

这两个脚本通常无法访问。它们都被标记为“异步”，并且不会阻止文档加载。但是 - 他们显然会阻止其他脚本执行。

要清楚的是，第一系列脚本会立即下载，但直到下载其他两个异步脚本才会执行。

该网站不公开，并且此类问题无法在jsfiddle中创建。粗插图：

<!doctype html> 
<head> 
    <!-- This script asynchronously loads many others --> 
    <script src="/js/LAB.js"></script> 

    <script src="slow-server/js/slowscript1.js" async></script> 
</head> 
<body> 
    <script src="show-server/js/slowscript2.js" async></script> 
</body>

信息上Lab.js：http://labjs.com/

实验室将在前面加上其他几个脚本标记的头部被异步加载。它们全部都是立即下载的，但是直到“慢速服务器”脚本响应才会执行。有时需要一段时间。这在我看来对于具有async属性的脚本来说是不正确的行为（并且我正在Chrome中测试）。有什么我失踪？

来源

2013-10-25 Dygerati

从this MDN page：

有可以使用这些属性来选择了三个可能的模式。如果存在异步属性，那么脚本将在可用时立即执行。如果async 属性不存在，但存在defer属性，则在页面完成解析后执行脚本。如果属性都不存在，则在用户代理继续解析页面之前立即提取并执行脚本。

所以，当一个脚本有异步时，它将立即从服务器获取，但DOM解析将继续并行。这部分简单明了。

然后，一旦异步脚本被提取，它就会被执行。这个执行可能在DOM完成加载之前或之后，完全取决于事件加载/解析的时间，它可能在页面中的其他非异步脚本运行之前或之后。

。注意，因为JavaScript在浏览器是单线程的，一旦这种异步脚本开始执行，没有其他的脚本将运行，直到该脚本完成，即使它是“异步”。脚本上的异步允许DOM的解析继续（而不是阻止），但是它不会保持脚本一旦可用就执行，一旦脚本执行，其他处理必须等待脚本完成执行。

如果您希望脚本在DOM和DOM中的任何常规脚本都已加载并运行之后才执行，那么您应该使用“延迟”而不是“异步”。

仅供参考，如果您想通过实际规格查看所有这些，请登录here。

如果你想的这一切是如何适用于您的具体情况更详细的解释，你必须至少给我们你问什么脚本的伪代码表示作为你的话不是活得不够清晰。

来源

2013-10-25 19:42:34 jfriend00

感谢您的详细描述。我唯一不完全理解的部分是其他脚本在获取两个异步脚本时被阻塞，而不是在执行时。在我最近的测试中，缓慢的服务器脚本花了3分钟的时间来响应和下载。其他脚本在整个时间内都未能执行。不过，我会试着推迟，看看它的行为是否有所不同。 – Dygerati

@Dygerati - 这里还有其他的东西在玩。浏览器会一次打开最大数量的连接，因此它会立即下载的最大数量的连接。所以，如果你有几个大的东西被下载（即使是异步），由于连接限制，一些非异步的东西可能会卡在它们后面。 – jfriend00

@Dygerati - 另外，请记住，一旦脚本被提取，它将在浏览器缓存中，并从那时起，可能几乎立即从浏览器缓存中加载。这可能会使其表现得几乎不像异步。异步适用于加载脚本的时间，因此如果它立即从浏览器缓存中加载，那么异步并没有太大的作用。也许你想“延迟”，而不是确保这些脚本不会被执行，直到DOM被解析并且任何非延迟的非异步脚本被运行。 – jfriend00

具有asyc属性的脚本仍然会阻止其他脚本执行

回答

相关问题