2010-01-14 111 views
2

我正在寻找加快我的js加载时间的最佳方法。加快网站加载速度

问题是,我正在使用一个非常大的网站,使用jQuery框架,发生了什么是因为该网站也加载,Facebook连接,addthis共享,谷歌分析和另一个跟踪代码,jquery延迟几秒钟,以及日历等特定元素刚刚出现,我的用户抱怨事情需要很长时间。

我在google chrome上做了一个测试,平均加载时间是4s。这太多了。

我已经在做缩小,并从谷歌加载jquery UI/Jquery。什么是最好的方法来解决这个问题?

+1

你运行YSlow来查看最大滞后发生在哪里? – 2010-01-14 14:00:28

+0

我跑YSlow,我有一个F级,所以我会尝试一些建议。 – matthewb 2010-01-14 14:16:42

+0

请尝试[谷歌的速度测试](https://developers.google.com/pagespeed/),它可以有效地查明究竟是什么减慢网站 – Eruant 2011-10-13 08:20:42

回答

1

通过组合图像和脚本以及css来减少http调用,并且还可以为您的静态图像和css使用Content Delivery Network。

0

您不可能对外部脚本的加载时间做更多的事情,所以您可以做的是更改页面中事件发生的顺序,以便在有外部脚本后加载初始化页面。

脚本以串行方式加载和执行,因此如果您在源代码中更改其顺序,您还可以更改它们加载的顺序。

而不是使用jQuery中的ready事件,你可以把你的初始化代码内嵌在网页中,之后的所有内容,但身体的结束标记之前。这样,当脚本运行时,您想要访问的元素将被加载,并且您可以将外部脚本放在初始化代码的下面,以使它们在之后加载。

0

微小的技术变化(例如服务于Google的JS,缩小等等)只会让你感到满意。

似乎你只是有很多动态的东西在你的页面上进行。你有没有建立你的内容的异步方式?一种选择可能是放置占位符而不是外部内容,并且异步加载它,因此当所有脚本加载并准备就绪时,您只需将标记放入占位符即可。

这会创建更好的用户体验,而不是整个页面等待10秒,它将在2秒后递增加载(并且在10之后仍然完全加载)。

+0

我有很多jquery插件,实际上,10是推荐的它是结合在一起的,你应该在这种情况下做什么或者做什么? – matthewb 2010-01-14 14:17:50

0

除了尤瓦的回答一些可能会或可能不会给您带来的速度增益选项:

  • 外部库的加载时间的东西超出你的控制。尝试尽可能晚地包含它们,并且在页面加载后动态更好地包含它们。这样,如果谷歌分析或Facebook有另一个垃圾邮件,你的网页不会停滞。

  • 从Google加载jQuery不一定更快。考虑将jQuery,jQuery UI和尽可能多的自己的JS放在一个文件中,将它们缩小并gzip,并让服务器在可能的情况下提供gzip版本。 请注意这里,速度的增加在很大程度上取决于用户缓存的内容以及缓存的位置。如果他们的缓存中已经有Google的jQuery,这种技术可能会使页面加载速度变慢。

最重要的是,经过一些优化后,您可以进行实验。如果通过深层链接直接访问页面,或者您可以通过以前的“着陆页”将一些JS或CSS(甚至图像)走私到她的缓存中,则必须了解您的普通用户在缓存中的内容。

+0

谢谢,听起来不错,雅其facebook和谷歌分析,锁定了一切,我想将jquery放在底部,但一些功能做文件写入。 服务器已经gzip代码,只有很多来自jquery的插件,我应该把它们合并在一起。 – matthewb 2010-01-14 14:35:55

0

确保您以gzip/deflate加密格式传送您的内容。将多个JavaScript文件合并到一个文件中,这有助于减少http请求的数量。

P.S.这里有一个测试工具来检查是否配置压缩: http://www.gidnetwork.com/tools/gzip-test.php