Javascript 应在<；之前使用Head.js或缩小脚本/车身>；在标记中使用脚本？_Javascript_Jquery_Html_Optimization_Head.js

Javascript 应在<；之前使用Head.js或缩小脚本/车身>；在标记中使用脚本？

javascript jquery html optimization

Javascript 应在<；之前使用Head.js或缩小脚本/车身>；在标记中使用脚本？,javascript,jquery,html,optimization,head.js,Javascript,Jquery,Html,Optimization,Head.js,我有优化问题-我的站点使用2个（相当大）javascript资源： application.js（最小化的jquery、jquery ui、下划线js和一些共享脚本，总共120KB）控制器特定文件（页面+交互所需的一些模块，总共4KB）我在视图中有一些脚本可以使用JavaScript格式化/转换标记（jQuery和我的控制器特定JS代码都是可靠的），因此我需要等待$（document）.ready或head.ready，这会使网站的一部分不可见，以防止未设置样式的内容闪现：( 现在我的问题来

我有优化问题-我的站点使用2个（相当大）javascript资源：

application.js（最小化的jquery、jquery ui、下划线js和一些共享脚本，总共120KB）

控制器特定文件（页面+交互所需的一些模块，总共4KB）

我在视图中有一些脚本可以使用JavaScript格式化/转换标记（jQuery和我的控制器特定JS代码都是可靠的），因此我需要等待$（document）.ready或head.ready，这会使网站的一部分不可见，以防止未设置样式的内容闪现：(

现在我的问题来了：我应该使用head.js还是只使用“before”脚本？在这种情况下，有什么聪明的方法可以加快页面加载时间吗

更新：以下是代码的一部分（完整代码见versusio.com，登录页）：


…平常的事
//这里设置了一些全局变量，如缓存键、实际的语言环境代码等，这些变量在jQuery或JS资产中的任何其他JS代码上都不可靠
…页面内容
！--这里有一些带有“display:none”样式的代码，以防止未设置样式的内容闪现
//下面是定位和处理一些样式并向#search div添加一些交互的代码
Application.Position.In.Center（$（#搜索），$（文档））；
…更多页面内容
…另一个“display:none”div和附带的脚本
…页面内容的其余部分
js（{'application'：'application.js'}，{'landing'：'landing.js'}）；

我认为，在页面底部放置一个加载脚本（作为正文中的最后标记）。javascript不会像现在一样阻止绘图页。

您可以使用固定样式放置覆盖所有页面的遮罩层，然后在加载过程完成时隐藏或销毁它。这样就不需要隐藏每个内容，而是用遮罩div覆盖它。首先问自己这个问题：我真的需要所有这些java吗用户访问我的页面时加载的脚本

第一次加载网站时，您实际上只需要自动完成功能，其余功能在加载时不需要。因此，您可以采用单独的方法。我的建议如下：

在不使用任何javascript功能的情况下构建此页面，然后使用javascript对其进行增强，去掉内联样式和脚本
完成此操作后，加载实际需要的脚本，您可以在头部或身体末端之前执行此操作
对Jquery、Jquery ui、下划线和其他库使用CDN。如果用户已经从其他网站加载了这些库，您将获得性能奖励
最后，已经异步加载了以后需要的javascript，因此用户在点击compare按钮时已经拥有了脚本

小调整：

使用诸如ySlow或您喜爱的浏览器中的网络图之类的工具查找任何瓶颈。看起来gzip未启用，请尝试这样做
你真的需要在头部加载facebook/google/twitter/第三方的内容吗？还是在加载页面时可以这样做
服务器是否尽可能快？看起来要花将近一半的时间才能获得HTML

我希望我能帮你一点忙，祝你在性能调整方面好运！

看到了你页面的视图源

有一些内联脚本可以阻止渲染

Application.i18n={“比较”：{“off_比率”：

这里有更多

快速方法：将它们移动到body标记的末尾。最好的方法：它们应该作为外部脚本加载-具有非常好的缓存头。可能是，您这样做是因为-您必须根据用户区域设置加载这些消息-您可以在构建过程中为每个区域设置创建单独的JS文件-它们可以作为具有良好缓存头的外部JS文件链接/加载

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

如果您要尝试CSP，将其作为外部脚本文件移动也将有利于您的站点安全

延迟/异步属性

ga.js是用async attibute设置的，但是其他js文件可以用defer属性进行尝试。另外，根据一般经验，尽可能延迟加载资源，仅在需要时加载

window.onload-$.ready 用$.ready开始脚本执行总是比window.onload好。因为，window.onload仅在加载所有图像、内部iframe之后才会激发

以下链接可能有用

渐进式JPEG post-in

许多进一步的优化是可能的。一切都很好。

我用示例代码更新了问题，并链接到“完整代码”：谢谢你的建议@Mörrethance，你的回答把我推向了一个好的方向-我删除了head.js，移动了脚本，添加了一个自定义的window.load处理程序，并使用了CDNjs.com CDN:）现在像一个符咒一样工作：）谢谢你的回答-就像之前有人提议的那样，我将所有非关键脚本移到了页面的末尾，但它变了与window.onload相比，out$.ready在某种程度上是超慢的，在启动$.ready之前应该执行一些操作（我不知道为什么会这样，但它有帮助）。

<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>