javascript - 今天有什么理由不使用 <script defer> 吗?

标签 javascript html deferred-loading external-script

曾几何时,关于<script>的争论很多。在 <head><body> .

许多 SO 帖子已经指出最佳实践/经验法则 是放置 <script><body> 结束之前因为不阻塞 html 解析器,导致更快的首屏绘制和更快的客户端 DOM 访问,从而获得更好的用户体验。

This must be a duplicate╰(‵□′)╯

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

旧帖说

deferred script may results JS dependency issues

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

It doesn't work cross vendors

是的,它曾经是,但今天几乎所有主要浏览器 vendor 都支持它:http://caniuse.com/#search=defer ,此外,正如评论所指出的,IE<10 可能存在一些问题。

然而,它提供的好处似乎是显而易见的,至少对我来说是这样,因为它会在较早的时间(在开始解析 DOM 之前)并行下载脚本,因此无需稍后请求脚本并缩短了下载脚本所需的时间使整个页面具有交互性

简而言之,这个问题类似于:Any good reason not to use

<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>

<子> 注意:这可能是一个有很多讨论的“古老”话题。然而,随着网络技术发展得非常快,浏览器 vendor 更好地与新的网络规范保持一致,许多旧的 stackoverflow 答案可能不会保持最新。

最佳答案

是的,但这只是因为您使用的是 jQuery。

jQuery doesn't work with defer 因为它会在页面变为交互式时立即触发。他们无法很快修复它(我在一年多前提出了这个错误),因为更改就绪行为以使用 defer将破坏许多依赖于 jQuery 就绪事件在交互时触发的组件(即在延迟脚本完成加载之前)。

如果您使用的是更现代的框架(React、Angular 2、Polymer、Vue 或几乎任何其他框架),那么就去做吧 - 或者甚至转到下一步并使用 <script type=module在新浏览器和旧版 bundle 中 <script nomodule defer...用于 IE。

关于javascript - 今天有什么理由不使用 &lt;script defer> 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42543729/

相关文章:

html - 图像尺寸不正确

javascript - JQuery 中的倒计时问题

reactjs - 组件的 NextJS/Script — defer Stripe

JavaScript 游戏敌人继承 - Phaser 框架

javascript - 我有一个公式来计算多个用户生成的值,当我尝试将值添加到一起时,它只是将两个值连接起来

javascript - 为什么我的圆圈以一定 Angular 从直线表面弹起?

PHP cometd 。如何做得更好?

javascript - 插入图片的文件路径

javascript - 异步加载一些生成的 Javascript