有没有理由不使用<script defer> TODAY？

Question

曾几何时,有很多激烈的争论<script>在<head>或<body>.

许多SO帖子已经指出了最佳实践/经验法则是<script>在<body>不阻止html解析器之前放置前端,从而更快地获得第一次屏幕绘制和更快的客户端DOM访问,从而获得更好的用户体验.

这必须是重复的("□")╯

等等...... 现在<script>可以deferred,实际上已经有一段时间了!

老帖说

延迟脚本可能会导致JS依赖问题

不,它不会.它在解析DOM时立即保留执行顺序.

它不适用于跨供应商

是的,它曾经是,但今天它几乎得到了所有主要浏览器供应商的支持:http://caniuse.com/#search=defer,除了评论指出IE <10之外可能还有一些问题.

然而,它提供的好处似乎是显而易见的,至少在我看来,因为它在早期(在开始解析DOM之前)并行下载脚本,因此不需要稍后请求脚本并缩短整个脚本所需的时间.页面互动.

简而言之,这个问题类似于:任何不使用的好理由

<head>
...
<script src='cdn/to/jquery' defer>
<script src='cdn/to/bootstrap' defer>
<script src='script/depends/on/jqueryandbootstrap' defer>
</head>

而是使用这个:

<body>
...
<script src='cdn/to/jquery'>
<script src='cdn/to/bootstrap'>
<script src='script/depends/on/jqueryandbootstrap'>
</body>

_{注意:这可能是一个有很多讨论的"古老"话题.但是,随着Web技术的快速发展,浏览器供应商更好地与新的Web规范保持一致,许多旧的stackoverflow答案可能无法保持最新.}

Answer 1

是的，但只是因为您使用的是 jQuery。

jQuery 无法使用，defer因为它会在页面变为交互式时立即触发。他们无法在短期内修复它（我在一年前提出了那个错误），因为更改就绪行为以使用defer将破坏许多依赖于交互式 jQuery 就绪事件触发的组件（即在延迟脚本完成加载之前） .

如果您使用的是更现代的框架（React、Angular 2、Polymer、Vue 或几乎任何其他框架），那么请继续使用它 - 或者甚至转到下一步并<script type=module在新浏览器中使用并在<script nomodule defer...IE 中使用旧版包。