[英]$(document).ready(function(){}); vs script at the bottom of page
在页面底部编写脚本并编写脚本的区别/优点/缺点是什么?
$(document).ready(function(){});
Very little in and of itself, either way the DOM will be ready for you to operate on (I was nervous about that until I read this from Google ). 它本身很少,无论是哪种方式,DOM都可以让你操作(我很担心,直到我从谷歌读到这个 )。 If you use the end of page trick, your code may get called the slightest, slightest bit sooner, but nothing that will matter. 如果你使用页面结尾技巧,你的代码可能会被称为最轻微,最轻微的一点,但没有什么是重要的。 But more importantly, this choice relates to where you link your JavaScript into the page. 但更重要的是,此选择与将JavaScript链接到页面的位置有关。
If you include your script
tag in the head
and rely on ready
, the browser encounters your script
tag before it displays anything to the user. 如果您将script
标记包含在head
并依赖于ready
,则浏览器会在向用户显示任何内容之前遇到您的script
标记。 In the normal course of events, the browser comes to a screeching halt and goes and downloads your script, fires up the JavaScript interpreter, and hands the script to it, then waits while the interpreter processes the script (and then jQuery watches in various ways for the DOM to be ready). 在正常的事件过程中,浏览器停止运行并下载脚本,启动JavaScript解释器,然后将脚本交给它,然后在解释器处理脚本时等待(然后jQuery以各种方式监视)为DOM做好准备)。 (I say "in the normal course of things" because some browsers support the async
or defer
attributes on script
tags.) (我说“在正常的过程中”,因为某些浏览器支持script
标记上的async
或defer
属性。)
If you include your script
tag at the end of the body
element, the browser doesn't do all of that until your page is largely already displayed to the user. 如果在body
元素的末尾包含script
标记,则在您的页面基本上已显示给用户之前,浏览器不会执行所有操作。 This improves perceived load time for your page. 这可以改善页面的感知加载时间。
So to get the best perceived load time, put your script at the bottom of the page. 因此,为了获得最佳的感知加载时间,请将脚本放在页面底部。 (This is also the guideline from the Yahoo folks .) And if you're going to do that, then there's no need to use ready
, though of course you could if you liked. (这也是雅虎人的指导原则 。)如果你打算这样做,那就没有必要ready
,不过当然你也可以。
There's a price for that, though: You need to be sure that the things the user can see are ready to be interacted with. 但是有一个代价:您需要确保用户可以看到的内容已准备好与之互动。 By moving the download time to after the page is largely displayed, you increase the possibility of the user starting to interact with the page before your script is loaded. 通过将下载时间移动到页面大量显示之后,可以增加用户在加载脚本之前开始与页面交互的可能性。 That's one of the counter-arguments to putting the script
tag at the end. 这是将script
标记放在最后的反驳论据之一。 Frequently it's not an issue, but you have to look at your page to see whether it is and, if so, how you want to deal with it. 通常这不是一个问题,但你必须查看你的页面,看它是否是,如果是,你想如何处理它。 (You can put a small inline script
element in the head
that sets up a document-wide event handler to cope with this. That way, you get the improved load time but if they try to do something too early, you can either tell them that or, better, queue the thing they wanted to do and do it when your full script is ready.) (你可以在head
设置一个小的内联 script
元素来设置一个文档范围的事件处理程序来处理这个问题。这样,你可以获得更长的加载时间但是如果他们试图做得太早,你可以告诉他们或者更好的是,将他们想要做的事情排队,并在完整的脚本准备就绪时进行。)
Your page will load slower by scattering $(document).ready()
scripts throughout the DOM (instead of all at the end) because it requires jQuery to be synchronously loaded first. 通过在整个DOM中散布$(document).ready()
脚本(而不是最后的所有脚本$(document).ready()
您的页面加载速度会变慢,因为它需要首先同步加载jQuery。
$ = jQuery
. $ = jQuery
。 So you can't use $
in your scripts without first loading jQuery. 因此,如果没有先加载jQuery,就不能在脚本中使用$
。 This approach forces you to load jQuery near the beginning of the page, which will halt your page load until jQuery is fully downloaded. 这种方法迫使您在页面开头附近加载jQuery,这将暂停您的页面加载,直到完全下载jQuery。
You cannot async
load jQuery either because in many cases, your $(document).ready()
script(s) will try to execute before jQuery is fully async loaded and cause an error, because again, $
isn't defined yet. 你不能async
加载jQuery,因为在很多情况下,你的$(document).ready()
脚本会在jQuery完全异步加载之前尝试执行并导致错误,因为$
还没有定义。
That being said, there is a way to fool the system. 话虽如此,有办法愚弄系统。 Essentially setting $
equal to a function that pushes $(document).ready()
functions into a queue/array. 基本上将$
设置$
将$(document).ready()
函数推送到队列/数组的函数。 Then at the bottom of the page, load jQuery then iterate through the queue and execute each $(document).ready()
one at a time. 然后在页面底部,加载jQuery然后遍历队列并一次执行一个$(document).ready()
。 This allows you to defer jQuery to the bottom of the page but still use $
above it in the DOM. 这允许您将jQuery推迟到页面底部,但仍然在DOM中使用$
。 I personally haven't tested how well this works, but the theory is sound. 我个人没有测试过它的效果如何,但理论是合理的。 The idea has been around for a while but I've very, very rarely seen it implemented. 这个想法已经存在了一段时间,但我非常非常罕见地实现了它。 But it seems like a great idea: 但这似乎是一个好主意:
http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.