Fatal编程技术网

Javascript 在'；t块渲染？

javascript html asynchronous dynamic

Javascript 在'；t块渲染？,javascript,html,asynchronous,dynamic,rendering,Javascript,Html,Asynchronous,Dynamic,Rendering,在本文中： 他们说： 默认情况下，动态创建并添加到文档中的脚本是异步的，它们不会阻止呈现 但是“javascript的执行”总是阻止渲染，那么他们怎么能说他们不阻止渲染呢 我可以用这个例子更清楚地说明： SCRIPT.JS // Synchronous delay of 5 seconds var timeWhile = new Date().getTime(); while( new Date().getTime() - timeWhile < 5000 ); //同步延迟5秒 va

在本文中：

他们说：

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

但是“javascript的执行”总是阻止渲染，那么他们怎么能说他们不阻止渲染呢

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

SCRIPT.JS

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

//同步延迟5秒
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>


试验
['script.js'].forEach（函数（src）{
var script=document.createElement（'script'）；
script.src=src；
script.async=true；
document.head.appendChild（脚本）；
});
//其他一些javascript执行，比如说执行延迟2秒。
var timeWhile=new Date（）.getTime（）；
while（new Date（）.getTime（）-timeWhile<2000）；
一些HTML行，这是上面的折叠
我在Chrome和Firefox上进行了测试，这两款浏览器在7秒后（而不是更早）都显示：“一些HTML行，这是在折叠上的”。因此，script.js的执行将阻止渲染，因为否则浏览器将在2秒后显示某些内容

注意：您也可以在不延迟2秒的情况下进行测试，但是在重复测试时可能会得到不同的结果。由于延迟了2秒，我给了浏览器一些额外的时间，因此我确信script.js在完成渲染之前已经下载。无论如何，你可以毫不拖延地得到同样的结果，但这只是为了在这篇文章中更清楚地说明这一点

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

因此，动态创建脚本时，将并行下载script.js，但这并不一定意味着脚本不再阻止渲染。他们可能会说script.js的下载没有阻止渲染，但他们不会这样说

那他们怎么会这么说呢？我不仅在这里看到，在谷歌的其他官方文档中也看到了

现在人们可以阅读它并制作类似于我的示例的东西（我只是通过延迟使“执行时间”更大，以使其更清楚）。然后人们会想：很好！javascript没有阻止呈现，但实际上它是阻止的，因此他们可以更好地在页面速度方面做出其他选择。

他们的意思是它不会阻止页面呈现。正文和消息将在不等待javascript文件加载的情况下加载和显示。这仅意味着在脚本未阻止页面呈现的情况下加载。您在脚本中所做的事情仍然可能发生。它将阻止呈现，但在页面呈现之后，因此不是这样noticible@Ozan我说：“他们可能会说script.js的（下载）负载没有阻止渲染，但他们不会这样说。”所以我想这和你的意思是一样的。但是你不能说脚本不会停止页面的呈现，因为执行会停止页面的呈现，所以他们不得不说：向下（加载）脚本。差别真大@Jonasw这是不正确的，页面尚未呈现。否则它将在7秒内显示某些内容。和@Connum看到我对@Ozan的回复时有相同的原因/论点。他们的意思是这不会阻止页面呈现。正文和消息将在不等待javascript文件加载的情况下加载和显示。这仅意味着在脚本未阻止页面呈现的情况下加载。您在脚本中所做的事情仍然可能发生。它将阻止呈现，但在页面呈现之后，因此不是这样noticible@Ozan我说：“他们可能会说script.js的（下载）负载没有阻止渲染，但他们不会这样说。”所以我想这和你的意思是一样的。但是你不能说脚本不会停止页面的呈现，因为执行会停止页面的呈现，所以他们不得不说：向下（加载）脚本。差别真大@Jonasw这是不正确的，页面尚未呈现。否则它将在7秒内显示某些内容。和@Connum看到我对@Ozan的回复了同样的理由/论点。