Javascript 谷歌对延迟的看法是错误的？_Javascript_Html_Rendering_Deferred

Javascript 谷歌对延迟的看法是错误的？

javascript html

Javascript 谷歌对延迟的看法是错误的？,javascript,html,rendering,deferred,Javascript,Html,Rendering,Deferred,在本帖中： @蛋糕jaffa正在向某人发表评论： “你认为哪一份文件不正确？” 让我们以本文档为例：现在让我们以他们所说的“延迟”为例：初始页面呈现不需要的脚本的加载和执行可能会推迟到初始呈现或页面的其他关键部分完成加载之后。这样做有助于减少资源争用并提高性能请注意，这篇文章是关于“删除渲染阻塞JavaScript”的，因此使用“may”一词意味着您可以使用defer 使用脚本标记上的“延迟”，您将不会延迟“直到页面的初始呈现完成加载后执行”。情况可能是这样，但不一定如此 “Defer

在本帖中：

@蛋糕jaffa正在向某人发表评论：

“你认为哪一份文件不正确？”

让我们以本文档为例：

现在让我们以他们所说的“延迟”为例：

初始页面呈现不需要的脚本的加载和执行可能会推迟到初始呈现或页面的其他关键部分完成加载之后。这样做有助于减少资源争用并提高性能

请注意，这篇文章是关于“删除渲染阻塞JavaScript”的，因此使用“may”一词意味着您可以使用defer

使用脚本标记上的“延迟”，您将不会延迟“直到页面的初始呈现完成加载后执行”。情况可能是这样，但不一定如此

“Defer”将延迟执行，直到初始html在DOM中之后，但这与“render”不同。执行将在DOM中的（前面的）html之后、DOMContentLoaded之前进行，但这并不意味着“页面的呈现已完成加载”。如果他们使用术语“页面的html解析已完成”，这将是正确的

一个证实上述理论的例子：

INDEX.HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
    Some HTML line and this is above the fold
    <script src="script.js" defer></script>
</body>
</html>


试验
一些HTML行，这是上面的折叠

SCRIPT.JS（来自缓存！）

//同步延迟5秒
var timeWhile=new Date（）.getTime（）；
while（new Date（）.getTime（）-timeWhile<5000）；

如果浏览器将从缓存中获取script.js，则5秒后将显示“一些HTML行，这在折叠上方！”！因此，这意味着页面的初始呈现尚未完成加载（使用“延迟”时）。因此，在我看来，这意味着文件是不正确的

p、如果缓存中没有script.js，浏览器将有时间完成前面html的呈现。首先必须下载script.js文件，这就给了浏览器额外的时间。使用缓存，从“完成解析html”到开始“javascript执行”之间的时间更短，所以“javascript执行”有可能在“完成前面html的呈现”之前就已经开始了。因此，在速度增益的情况下，您甚至可以在本示例中考虑禁用缓存，因此前面的HTML的呈现将更快。我有更多的测试/例子证明谷歌其他文档（关于渲染）中的其他部分是不正确的（在我看来），但我会在这篇文章中用一个例子来说明这一点

如果你不同意我的观点，请不要只给出负面评价，至少要给出一个评论，说明为什么你认为这是不正确的，以及你做了哪些测试来证实这一点。我已经在试图说服谷歌的一些人，他们在我看来是不正确的，但他们对此感到有些冒犯。当然，如果我没有投入大量的时间/精力/测试，如果我非常确定的话，我不会说他们是错误的。直到现在，他们都在对我说：“考虑到误解可能是你的”，所以我感觉自己就像一个小男孩在“对抗”一堵大墙。对我来说，它一开始并不正确，但我看到我周围的很多人（他们已经在it领域工作了很多年）都在为主题渲染而挣扎，我可以理解它，因为关于它的文档非常混乱。这也是我深入研究它的原因，因为它对我来说太让人困惑了，所以我想更好地理解它。

如果我错了，就用论据说服我，我是第一个会说我错的人。

在重新阅读了你的问题和链接的引语后，我明白了你是从哪里来的，以及为什么这个引语会误导人。为了便于参考，请允许我在下面引用其中的标题：

推迟加载JavaScript

初始页面呈现不需要的脚本的加载和执行可能会推迟到初始呈现或页面的其他关键部分完成加载之后。这样做有助于减少资源争用并提高性能

您已经理解了这一点，但我将链接它以供参考

正如您所提到的，是的，

defer

中JavaScript的执行通常是渲染阻塞，而

defer

不会阻塞DOM解析器

引文误导/混淆的原因在于粗体部分：

初始页面呈现不需要的脚本的加载和执行可能会推迟到初始呈现或页面的其他关键部分完成加载之后这样做有助于减少资源争用并提高性能。

“加载和执行初始页面呈现不需要的脚本可能会推迟到初始呈现之后”。虽然这不是一个错误的陈述，但这是误导性的，因为性能的提高实际上是直接由于解析器没有被阻塞

这可以使用

一种更直接、更清晰的方式来描述这一点，如您所述：

初始页面呈现不需要的脚本的加载和执行可能会推迟到初始解析或页面的其他关键部分完成加载之后。这样做有助于减少资源争用并提高性能

这清楚地表明，性能的提高是由于解析器被延迟了。它还更符合

defer

规范对它的描述以及

defer

的适用性：

如果

async

属性不存在，但

defer

属性存在，则将并行获取经典脚本并对其进行评估

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