$(document).ready(function(){}); vs script at the bottom of page $(document).ready(function(){}); 与页面底部的脚本
在网页中,如果将$(document).ready()
脚本散布在DOM中的各个位置(而不是全部放在最后),页面加载速度会变慢,因为这需要先同步加载jQuery。
$ = jQuery
。因此,在加载jQuery之前不能在脚本中使用$
。这种方法迫使你在页面的开头加载jQuery,这会导致页面加载直到jQuery完全下载为止。
你也不能异步加载jQuery,因为在许多情况下,$(document).ready()
脚本会在jQuery完全异步加载之前尝试执行,从而导致错误,因为$
还没有定义。
话虽如此,有一种方法可以欺骗系统。实际上,将$
设置为一个将$(document).ready()
函数推入队列/数组的函数。然后在页面底部加载jQuery,然后遍历队列并逐个执行每个$(document).ready()
。这样就可以将jQuery推迟到页面底部,但仍然可以在DOM中使用$
。我个人还没有测试过这种方法的效果,但理论是可行的。这个想法已经存在一段时间了,但我很少见到有人实现它。但它似乎是一个很好的主意:
http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax
$(document).ready(function(){}); vs script at the bottom of page 这个问题的出现的原因是为了提高页面的感知加载时间。将脚本放在页面底部可以使页面在大部分已经显示给用户之后才进行脚本加载,从而提高页面的加载速度。但是,这样做的代价是需要确保用户可以看到的元素已经准备好进行交互。否则,用户可能会在脚本加载之前开始与页面进行交互,这可能导致问题。为了解决这个问题,可以在
中添加一个小的内联脚本元素来设置一个文档范围的事件处理程序,以处理用户过早进行交互的情况。通过这种方式,可以提高加载时间,同时在需要时告诉用户等待或者在完整的脚本准备好后执行他们想要做的事情。如果要获得最佳的感知加载时间,请将脚本放在页面底部。这也是雅虎人员提出的指导方针。如果你打算这样做,那么就没有必要使用ready方法,尽管当然可以使用。
至于如何处理队列操作,没有特定的标准或设计模式。如果需要队列操作,可以使用一些常见的解决方案。另一种处理加载js之前的交互的方法是,首先确保页面在没有JavaScript的情况下也能正常工作,例如,确保所有的链接可用,尽管它们会重新加载页面。然后使用JavaScript来劫持链接和其他操作,并添加你所需的ajax或其他功能。
总结起来,将脚本放在页面底部可以提高页面的感知加载时间。但需要确保用户可以看到的元素准备好进行交互。可以使用内联脚本元素来处理用户过早进行交互的情况。至于队列操作,没有特定的标准或设计模式,可以使用一些常见的解决方案。