<script defer>和$(document).ready

Question

根据http://caniuse.com/script-defer,大多数浏览器都支持script标签的defer属性.

我想知道<script defer src="...">在jQuery之前或之后是否执行get 指定的脚本$(document).ready()？主要的现代浏览器(Chrome,Firefox,IE等)是按执行顺序保持一致还是有所不同？

Answer 1

基于此 小提琴我不得不说jQuery是在一个脚本声明后$(document).ready()执行的.我使用Firefox和Chrome进行了测试,两者都具有相同的行为,与脚本的顺序无关.defer

我猜其他浏览器的行为可能会根据其实现而改变,因此总是不确定.

编辑:事实证明,该defer属性应该与外部JavaScript文件一起使用.我编辑了这个小提琴,以显示这一点,显然具有相同的结果.

更新了小提琴:http://jsfiddle.net/RNEZH/15/

Answer 2

defer属性具有良好的写入和分析功能.另请参阅帖子的评论,了解有关如何defer在HTML5中重新定义的其他信息.

我的结论defer是:过于依赖浏览器依赖.因此使用jQuery doc ready技术.

换句话说,jQuery的一个重要原因是覆盖浏览器的不一致性.延迟是另一个这样的不一致,对于写得很好的页面应该避免.

Answer 3

简单地说,script应该在$(document).ready()是否defer使用之前执行,几乎所有主流浏览器都支持 defer.

但为了安全起见,我鼓励你同时使用$(document).ready()和defer.为什么defer呢？因为它有助于页面快速显示(因为外部脚本是并行加载的)并且是Google页面速​​度工具中非常重要的因素,所以可以在http://code.google.com/speed/page-speed/docs/找到一个很好的细节.payload.html#DeferLoadingJS

Answer 4

要推迟内联 JavaScript，您可以使用 type="module"，这会使 $(document).ready() 变得多余。

<script type="module">alert('defered inline js')</script>

因为 type="module" 意味着延迟脚本将与其他延迟脚本一起按顺序执行。

查看我可以在 2023 年 5 月使用 96% 的浏览器支持吗。https: //caniuse.com/es6-module