Question

我假设底部的移动脚本与使用defer或async属性相同。由于defer和async并不完全符合旧版浏览器，因此我选择在页面底部加载脚本。

<html>
<body>
<!-- whole block of  html -->
<script type='text/javascript' src='app.js'></script>
</body>
</html>

在此之前，我运行了GTmatrix和Google页面速度洞察等性能基准测试工具。两者都显示“渲染阻止”＃39;参数作为主要问题。我现在有点困惑，因为即使我在底部移动这些脚本以允许首先加载内容/ html;这些工具仍然将渲染阻塞作为主要问题报告。

我确实查看了其他stackoverflow帖子，突出显示虽然在底部加载的脚本必须延迟＆＃39;属性。

我有几个问题：

是真的吗？
这些工具是否专门寻找＆＃39;推迟＆＃39;或者＆＃39; async＆＃39;属性？
如果我必须推迟后退（特别是针对IE浏览器），我是否需要使用条件语句为IE加载非延迟脚本？

请建议最好的方法。提前谢谢。

Answer 1

是的，即使在底部加载的脚本也必须具有defere属性，如果它可以在您的网站设计和要求中使用
不，这些工具会查找解析的完成情况
取决于您要支持的IE版本，它们会有不同的建议

现在解释一下简单的script，defer和async，以帮助您了解原因：

<强>脚本简单的<script>代码会在此时停止解析，直到脚本下载和执行。

<强>异步如果您将使用async，则脚本将不会停止解析下载，因为它将继续与其余的html内容并行下载。但是，脚本将停止解析执行，然后才会继续或完成html的解析

<强>推迟如果使用defer，脚本将不会暂停解析html数据以下载或执行脚本。因此，这是避免任何时间添加到网页加载时间的最佳方法。

请注意，延迟有助于减少html的解析时间，但在每个网页设计流程中并不总是最佳或适当的，所以在使用它时要小心。

Answer 2

而不是async，也许是这样的（感谢@ guest271314的想法）

<!DOCTYPE html>
<html>
<body>
<!-- whole block of  html -->

<!-- inline scripts can't have async -->
<script type='text/javascript'>
function addScript(url){
document.open();
document.write("<scrip" + "t src = \"" + url + "\"></scr" + "ipt>");//weird quotes to avoid confusing the HTML parser
document.close();
}
//add your app.js last to ensure all libraries are loaded
addScript("jquery.js");
addScript("lodash.js");
addScript("app.js");
</script>
</body>
</html>

这是你想要的吗？如果需要，您可以在async来电添加defer或document.write属性。

Answer 3

根据HTML规范1.1 html页面中的脚本块将阻止页面的呈现，直到URL中的javascript文件被下载和处理。

在页面末尾添加脚本：允许浏览器继续页面呈现，因此用户将能够尽快看到页面呈现。

[首选] 添加延迟到脚本标记：向浏览器承诺脚本不包含任何document.write或文档中的代码，从而允许它继续呈现。

由于前一个主题可能对您有用

Is it necessary to put scripts at the bottom of a page when using the "defer" attribute?

Answer 4

为什么最后提到的脚本必须具有defer属性？

好吧，答案是，通过在最后一个脚本中添加defer，实际上减少了在绘制页面之前需要加载的关键资源的数量，从而减少了关键渲染路径。

是的，在解析到最后一个DOM时您是正确的，但浏览器尚未开始绘制DOM，因此domContentLoadedEvent被阻止，直到完成绘制和渲染活动为止。

通过添加异步/延迟，我们告诉浏览器该资源对于呈现不是至关重要的，可以在dom内容加载后加载并执行。这将更早触发domContentLoaded事件，并且domContentLoaded事件触发得越早，其他应用程序逻辑就可以越早开始执行。

请参阅下面的google链接，以清楚地说明该概念。 https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

渲染阻塞延迟vs底部移动脚本

4 个答案: