在身体标记结束之前放置jQuery / javascript源页面

时间:2012-02-18 17:27:04

标签: javascript jquery

我在几个插件说明中看到,在body标记结束之前粘贴javascript / jQuery源代码。我做了搜索,为什么他们这样说,没有任何意义。

如果我将src文件放在脚本中的任何地方,我根本不会遇到任何问题。有人能给我一个很好的答案吗?

1 个答案:

答案 0 :(得分:7)

如果javascript代码没有引用DOM或DOM中的任何对象,那么它可以放在页面的任何位置。

如果您将HTML放在</body>标记之前的正文标记中,那么在您加载脚本之前将对页面进行解析和显示,这样可以更快地显示页面。因此,您看到的建议是最大化页面的初始显示性能。

如果javascript引用DOM或DOM中的任何对象,那么它必须具有特殊代码才能在jQuery中使用$(document).ready(fn)之类的内容执行之前等待加载DOM,或者必须物理加载代码在DOM之后,它将在DOM加载之前不会执行。

当然,代码必须在其初始执行立即依赖的任何代码之后加载。因此,需要在jQuery库本身之后加载jQuery插件。

以下是一套通用指南:

  1. 在页面中尽可能晚地放置代码,以最大限度地提高页面的显示效果。
  2. 将代码置于其初始执行所依赖的任何其他库之后。
  3. 只有在文档加载之前需要执行或使用该代码时,才将代码放入<head>部分。例如,如果您的代码正在检查URL和cookie并决定是否进行客户端重定向,那么您希望该代码立即执行,以便您可以将该代码放在<head>部分中以便它可以在DOM加载或显示之前执行。作为另一个例子,如果你有一些内联javascript需要某些函数在页面加载期间可用(例如一些内联javascript,document.write()并调用一些实用函数),那么将这些实用函数放在{{1部分因此可以在页面加载时使用。
  4. 如果在页面加载之前没有理由执行代码,或者代码需要访问DOM本身,那么将代码放在<head>标记之前以优化页面显示时间并将代码放在何处当代码运行时,DOM就可以进行操作了。
  5. 尽可能将代码放在外部JS文件中,以最大限度地利用浏览缓存。