jquery / javascript加载混乱

时间:2012-11-28 16:30:51

标签: javascript jquery

我在我的网站上使用jquery和一些普通的javascript而且我被告知我最好以最小化的形式在我的页面的结尾标签上加载所有的javascript,而不是在标题中加载他们现在。

我也被告知我应该将我的所有JS聚合成一个文件以保持请求数量下降,尽管我也被告知我的一些javascript将无法包含在这个巨型文件,因为它需要FB(例如)。

所以现在我完全糊涂了。作为一个开始, 1)我使用jquery和jquery.ui,这些可以集成到mega文件中并在最后加载吗?

2)我可以将脚本标记中包含的当前页面源中出现的所有内容都粘贴到此文件中吗?

3)我必须遗漏什么?

当你是一个学习者时,这一切都有点过分了

该网站位于http://www.traditionalirishgifts.com/,您可以看到我加载:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

以及一堆其他javascripts

1 个答案:

答案 0 :(得分:0)

正如评论所指出的,答案取决于许多变量。

您使用的是任何服务器端Web框架吗?值得花钱的任何网络框架都将为您提供javascript和css连接的选项。通常,这些选项允许您定义连接发生的确切程度。某些js文件不经常更改,例如jquery,jquery ui。而某些其他文件会经常更改,例如您自己的应用程序脚本。在决定连接什么时,可以考虑所有这些。

如果您可以共享哪种服务器端技术以及您使用的是哪种Web服务器,我可以帮助您找到具体的解决方案。

关于您的三个问题,关于管理您的依赖关系。如果您的应用程序脚本或“脚本标记包含的当前页面源中出现的内容”依赖于jQuery或任何其他库,那么它们将需要包含AFTER jquery或所述库。

DOM也可能存在依赖关系。如果您的脚本使用document.write直接输出html,那么您将无法轻松移动它们。

我浏览了您链接到的网站主页的html。该文件中的js代码可以移动到正文结束之前,但您需要确保它们以相同的顺序出现。你所包含的所有插件似乎都在document.ready上初始化,只有在解析了所有html / js / css之后才会出现。

您已经从CDN引用了jquery / jqueryui,因此不要将它们添加到连接文件中。

我没有注意到任何你无法连接的代码(因为使用了FB)。那说你可以问那个告诉你的人解释原因。

最后,您可以在YSlow (http://developer.yahoo.com/performance/rules.html)Google Page Speed (https://developers.google.com/speed/docs/best-practices/rules_intro)上了解有关优化前端加载时间的更多信息

就个人而言,我建议你继续前进,将所有东西都移到身体结束之前。如果出现问题,请询问有关您收到的错误的SO问题。