首页 > 编程语言> 文章详细

javascript-Google推迟延误了吗？

2019-10-12 07:36:15 阅读：308 来源： 互联网

标签：html deferred javascript rendering

在这篇文章中：

Why google is using the term “Render-Blocking JavaScript”?

@ jaffa-the-cake正在向某人发表评论：

“您认为哪个文档不正确？”

让我们以以下文档为例：

https://developers.google.com/speed/docs/insights/BlockingJS

现在让我们以他们对“延期”的说法为例：

The loading and execution of scripts that are not necessary for the initial page render may be deferred until after the initial render or other critical parts of the page have finished loading. Doing so can help reduce resource contention and improve performance.

请注意,该文章是有关“删除渲染阻止JavaScript”的,因此用“可能”一词表示您可以使用defer.

通过在脚本标签上使用“ defer”,您不会将“执行推迟到页面的初始呈现完成加载之后”.可能是这样,但不一定.

“ Defer”将延迟执行,直到初始html在DOM中之后,但这与“ render”不同.执行将在html中的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>

SCRIPT.JS(来自缓存！)

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

如果浏览器将从缓存中获取script.js,则5秒后将显示“一些HTML行,这是首屏”.因此,这意味着页面的初始渲染尚未完成加载(使用defer时).因此,我认为这意味着文档不正确.

附：如果没有来自缓存的script.js,浏览器将有时间完成上述html的呈现.首先必须下载文件script.js,这才是给浏览器额外的时间.使用缓存时,在“完成解析html”和开始“ javascript执行”之间的时间会更少,因此,有可能在“结束之前的html渲染”之前已经开始了“ javascript执行”.因此,在提高速度的情况下,您甚至可以在此示例中考虑禁用缓存,因此前面html的呈现将更快.

我还有很多测试/示例,它们证明了Google其他文档(关于渲染)中的其他部分是不正确的(我认为),但在本文中,我将通过使用1个示例来明确说明.

如果您不同意我的意见,请不要仅给出负面的声誉,而至少要发表评论,说明您认为它不正确的原因以及您进行了哪些测试来确认它.我已经在试图说服Google的某些人,他们认为我的观点是错误的,但是他们对此感到冒犯.当然,如果我没有花很多时间/精力/测试,而且我很确定的话,我不会说它们是不正确的.直到现在,他们对我说：“考虑到误解可能是您的,”所以我觉得自己像个小男孩,正在与一堵大墙抗争.对我来说,这并不是一开始就正确的方法,但是我看到周围有很多人(他们已经从事IT工作多年了)在主题渲染方面苦苦挣扎,我可以理解,因为关于它的文档非常混乱.这也是为什么我更深入地研究它,因为它也让我感到困惑,因此我想更好地理解它.
如果我错了,请用论点说服我,我是第一个说我错了的人.

解决方法:

重新阅读您的问题和链接的报价后,我看到了您来自哪里,以及为什么这个报价可能会引起误解.作为参考,让我在下面加引号,其中包括标题：

Defer loading of JavaScript

The loading and execution of scripts that are not necessary for the initial page render may be deferred until after the initial render or other critical parts of the page have finished loading. Doing so can help reduce resource contention and improve performance.

您已经了解了这一点,但我将其链接起来以作为how defer works上的参考.

正如您提到的,是的,在延迟中执行JavaScript通常通常会阻止渲染,而延迟不会阻止DOM解析器.

引号引起误解/混淆的原因是因为粗体字部分：

The loading and execution of scripts that are not necessary for the initial page render may be deferred until after the initial render or other critical parts of the page have finished loading. Doing so can help reduce resource contention and improve performance.

“初始页面渲染不需要的脚本的加载和执行部分可以推迟到初始渲染之后”.虽然这不是一个错误的语句,但会引起误解,因为但性能提升实际上是由于解析器未被阻塞而直接导致的.

使用official documentation on defer可以清楚地显示

如上所述,一种更直接,更清晰的描述方式是：

The loading and execution of scripts that are not necessary for the initial page render may be deferred until after the initial parsing or other critical parts of the page have finished loading. Doing so can help reduce resource contention and improve performance.

这清楚地表明,性能提高是由于延迟了解析器.它也更符合defer规范的描述方式以及defer的优点：

If the async attribute is not present but the defer attribute is present, then the classic script will be fetched in parallel and evaluated when the page has finished parsing. If neither attribute is present, then the script is fetched and evaluated immediately, blocking parsing until these are both complete. (W3C)

标签：html,deferred,javascript,rendering
来源： https://codeday.me/bug/20191012/1898589.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-Google推迟延误了吗？