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

Question

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

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

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

我确实看过其他stackoverflow帖子,突出显示虽然底部加载的脚本必须具有'defer'属性.

我有几个问题:

请建议最好的方法.先感谢您.

Answer 1

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

脚本简单<script>标记将在此时停止解析，直到脚本下载并执行为止。

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

延迟如果使用defer，脚本将不会停止对html数据的解析以下载或执行脚本。因此，这是避免在网页加载时间上花费任何时间的最佳方法。

请注意，defer可以减少html的解析时间，但是在每个网站设计流程中并不总是最佳或合适的选择，因此在使用时要格外小心。