2013-02-11 46 views
1

我有优化问题 - 我的网站使用2(相当大的)JavaScript资源:应该使用Head.js还是在</body>之前使用标记中的脚本缩小脚本?

  1. 的application.js(最小化的jQuery,jQuery的用户界面,强调-js和一些共享的脚本,120KB总)
  2. 控制器特定的文件(页面+交互所需的一些模块,总共4KB)

我在视图中有一些脚本用JavaScript格式化/转换标记(可以同时使用jQuery和我的控制器特定的JS代码)所以我需要等待$(document).ready或head.ready,它使w的一部分ebsite无形防止无样式内容:(闪光灯

现在我的问题来了:我应该使用head.js它,或只是坚持“之前”的脚本?在这种情况下,有没有什么聪明的方法来加快页面加载时间?

更新: 下面的代码的一部分(见versusio.com为完整的代码,着陆页):

<html> 
    <head> 
    ... usual stuff 
    <link (css stuff) /> 
    <script src="head.js"></script> 
    <script> 
     // Here some global variables are set like cache keys, actual locale code etc., not dependable on jQuery or any other JS code from the JS assets 
    </script> 
    </head> 

    <body> 
    ... page content 

    <div id="search">!-- here some code with the "display: none" style to prevent flash of unstyled content</div> 
    <script> 
     // Here is code that positions and processes some styles and adds some interactions to the #search div 
     Application.Position.In.Center($(#search), $(document)); 
    </script> 

    ... more page content 

    ... another "display: none" div and accompanying script 

    ... rest of the page content 

    <script type="text/javascript">head.js({ 'application': 'application.js' }, { 'landing': 'landing.js' });</script> 

    </body> 
</html> 
+0

我更新了示例代码的问题并链接到“完整代码”:)感谢您的建议@Mörre – user2060653 2013-02-11 09:26:03

回答

2

首先问自己这个问题:我是否真的需要这一切的JavaScript加载当用户访问我的网页?

当第一次加载你的网站,你实际上只需要自动完成的功能,不需要负载休息。所以你可以去分离的方法。我的建议如下:

  • 建立此页面没有任何javascript功能,然后用javascript增强它,摆脱内联样式和脚本。
  • 完成此操作后,加载您实际需要的脚本,您可以在头部或结束之前执行此操作。
  • 对JQuery,jquery-ui,下划线和其他库使用CDN。如果用户已经从另一个网站加载这些库,您将获得性能奖励。所有的
  • 最后,已经异步加载以后所需的JavaScript,因此用户已经拥有的脚本时,他碰到比较按钮。

小的调整:

  • 使用诸如YSlow的工具或网络图中你喜欢的浏览器,以寻找任何瓶颈。它看起来像gzipping没有启用,尝试并做到这一点。
  • 你真的需要加载的Facebook /谷歌/微博/第三方的东西,在头部或加载页面时,可能是做什么?
  • 服务器是否尽可能快?它看起来几乎需要一秒钟才能获得HTML。

我希望我帮你一下,祝你好运,性能调整!

+0

谢谢您的回答,让我走向了一个好方向 - 我删除了head.js,在之前移动了脚本,添加一个自定义窗口。载入处理程序和使用CDNjs.com CDN :)现在像一个魅力:) – user2060653 2013-02-15 13:27:20

0

我认为,把负载脚本在页面的底部(作为最后标签在身体)。该JavaScript不会阻止绘图页面,就像现在一样。

0

你可以把覆盖固定样式的页面遮罩层,然后隐藏或销毁它,当加载过程结束。这样,就没有必要隐藏在每个内容,而是将覆盖面具格

0

看到您的页面的查看源。

  1. 有一些内嵌脚本可以阻止渲染。像这样的

Application.i18n = { “攀比”:{ “off_ratio”:

这里更多。 http://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/

快速方法:将它们移动到主体标签的末尾。 最好的方法:它们应该作为外部脚本加载 - 具有非常好的缓存标头。 也许你是这么做的 - 你必须根据用户的locale加载这些消息 - 你可以在你的构建过程中为每个语言环境创建单独的JS文件 - 它们可以链接/加载为具有良好缓存头的外部JS文件

另一个原因,为什么你可能需要内联脚本 - 注意初始加载时间。这是不必要的 - 因为现代浏览器为我们提供了性能时序。

http://www.html5rocks.com/en/tutorials/webperformance/basics/

移动它作为外部脚本文件 - 也将有利于您的网站的安全性 - 在情况下,如果你将试图CSP。

http://updates.html5rocks.com/2012/11/Content-Security-Policy-1-0-is-officially-awesome

  1. 推迟/异步属性。

ga.js设置为异步attibute - 但其他JS文件可以尝试使用defer属性。另外,根据一般的经验法则,尽可能延迟加载资源,仅在需要时加载资源。

  1. window.onload - $ .ready 用$ .ready开始脚本执行始终会比window.onload更好。 ,因为window.onload只有在所有图像,内部iframe被加载后才会触发。

以下链接可能会有帮助。

https://developers.google.com/speed/

的渐进式JPEG后在http://calendar.perfplanet.com/2012/

http://blog.chriszacharias.com/page-weight-matters

http://www.igvita.com/2013/01/15/faster-websites-crash-course-on-web-performance/

很多进一步的优化是可能的。祝一切顺利。

+0

感谢您的回应 - 就像早先提出的人一样,我把所有非关键脚本移动到页面的结尾,但事实证明$ .ready是某种程度上超级与window.onload相比较慢,一些操作应该在$ .ready触发之前执行(我不知道为什么,但它有帮助)。 – user2060653 2013-02-19 08:33:32

相关问题