javascript - $(文档).ready(函数(){});页面底部的vs脚本

标签 javascript jquery

在页面底部写脚本和在页面底部写脚本有什么区别/优点/缺点

$(document).ready(function(){});

最佳答案

本身非常少,无论哪种方式,DOM 都准备好供您操作(在阅读 this from Google 之前,我对此很紧张)。如果您使用页尾技巧,您的代码可能会被调用得更快、更早一点,但这无关紧要。但更重要的是,此选择与您将 JavaScript 链接到页面的位置有关。

如果您在 head 中包含您的 script 标签并依赖于 ready,浏览器会遇到您的 script在向用户显示任何内容之前标记。在正常的事件过程中,浏览器突然停止并下载你的脚本,启动 JavaScript 解释器,并将脚本交给它,然后等待解释器处理脚本(然后 jQuery 以各种方式监视以便 DOM 准备就绪)。 (我说“在正常情况下”是因为某些浏览器支持 script 标签上的 async or defer 属性。)

如果您在 body 元素的末尾包含您的 script 标记,浏览器不会执行所有这些操作,直到您的页面大部分已经显示给用户.这会缩短页面的感知加载时间。

因此,为了获得最佳的感知加载时间,请将您的脚本放在页面底部。 (这也是 the guideline from the Yahoo folks。)如果您要这样做,则无需使用 ready,当然如果您愿意也可以。

不过,这样做是有代价的:您需要确保用户可以看到的内容已准备好与之交互。通过将下载时间移到页面大部分显示之后,您可以增加用户在加载脚本之前开始与页面交互的可能性。这是将 script 标记放在末尾的反对意见之一。通常这不是问题,但您必须查看您的页面以了解它是否是问题,如果是,您希望如何处理它。 (您可以在 head 中放置一个小的 inline script 元素,它设置一个文档范围的事件处理程序来处理这个问题。这样,您可以缩短加载时间,但如果他们过早尝试做某事,您可以告诉他们,或者更好的是,将他们想做的事情排队,并在您的完整脚本准备就绪时执行。 )

关于javascript - $(文档).ready(函数(){});页面底部的vs脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6026645/

相关文章:

javascript - 多次 AJAX 调用出现错误

javascript - 无法在 Gmail 中找到元素

javascript - 使用 jquery galleria 插件在图像上显示一些自定义内容

javascript - 在 Angular Directive(指令)中使用 ng-repeat 过滤器

javascript - JS Date() 返回正确的时区但错误的日期

javascript - JS 正则表达式有问题

ajax - jQuery 和 Ajax with json - 在 IE 中失败

javascript - 如何将json数组设置为html表单div。?

jquery - 设置绝对位置

javascript - jQuery 日期选择器 : Prevent closing picker when clicking a date