曾几何时,关于<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 - 今天有什么理由不使用 <script defer> 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42543729/