Question

在本文中：https://www.html5rocks.com/en/tutorials/speed/script-loading/

他们说：

默认情况下，动态创建并添加到文档的脚本是异步的，它们不会阻止渲染

但是＆＃34;执行javascript＆＃34;总是阻止渲染，所以他们怎么说他们不会阻止渲染？

我可以用这个例子说清楚：

的script.js

// Synchronous delay of 5 seconds
var timeWhile = new Date().getTime(); 
while( new Date().getTime() - timeWhile < 5000 );

INDEX.HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <script>
        ['script.js'].forEach( function( src ) {
            var script = document.createElement( 'script' );
            script.src = src;
            script.async = true;
            document.head.appendChild(script);
        });

        // Some other javascript execution, let's say execution delay of 2 seconds.
        var timeWhile = new Date().getTime(); 
        while( new Date().getTime() - timeWhile < 2000 );
    </script>
</head>
<body>
    Some HTML line and this is above the fold
</body>
</html>

我在Chrome和Firefox中对它进行了测试，并且两个浏览器都显示：＆＃34;有些HTML行，这就是首字母缩写＆＃34; 7秒后而不是更早。所以script.js的执行阻止了渲染，因为否则浏览器会在2秒后显示一些内容。

注意：您也可以在没有2秒延迟的情况下进行测试，但是在重复测试时可以获得不同的结果。延迟2秒，我给浏览器一些额外的时间，所以我确信在完成渲染之前已经下载了script.js。无论如何，你可以在没有延迟的情况下得到相同的结果，但这只是为了让这篇文章更加清晰。

这里发生了什么： - 浏览器首先会创建元素（异步脚本标记与外部文件script.js） - 然后它开始并行下载script.js，所以下载script.js时一切都会进一步发展 - 然后浏览器正在执行2秒的javascript延迟。同时下载了script.js。 - 也许＆＃34;一些HTML系列，这是首屏......＆＃34;已经在DOM中了，但这不是必需的。无论如何它尚未渲染，因为屏幕上还没有任何东西可以看。 - 已下载Script.js，因此它开始执行javascript。 Javascript的执行将始终阻止渲染，所以现在＃34;渲染＆＃34;必须等待5秒钟。

因此，当动态创建脚本时，将并行下载script.js，但这并不一定意味着脚本不再阻止呈现。他们可以说script.js的（下）加载不会阻止渲染，但他们不会这样说。

那么他们怎么能这样说呢？我不会在这里看到它，也会在其他官方Google文档中看到它。

现在人们可以阅读它并制作类似我的例子（我只执行＆＃34;执行时间＆＃34;延迟更大，以使其更清晰）。然后人们可以想：很好！ javascript没有阻止渲染，但实际上它是阻塞的，所以他们可以更好地在页面速度方面做出其他选择。

动态创建的脚本不会阻止渲染？

0 个答案: