0

我负责建立我的乐队的网站和 tumblr。我在纸草稿阶段。目前正在思考如何处理脚本以优化性能。

基本上，我需要：

  1. jQuery：在 DOM 准备好后进行操作以及一些交互性。
  2. jPlayer 带有 jPlayer 的播放列表插件，用于带有 Flash 后备的 HTML5 音乐播放器。
  3. 从 Songkick API（巡演日期）加载数据的自定义脚本。它将巡回演出添加到页面。应该在 DOM 准备好（Ajax 请求）之后发生。
  4. 使用其 API 从 SoundCloud 加载歌曲的自定义脚本。当用户从音乐播放器单击播放按钮时应该会发生这种情况（这些是长曲目，在页面加载期间加载它们是一种不好的做法）。

所以，我正在考虑如何构建所有这些脚本，以便事情在正确的时间以良好的顺序发生。我已经离开开发场景几年了，但在发布之前阅读了一些内容。看到现在JS的设计模式倾向于使用模块化的方法。我在 RequireJS 网站上阅读了一些内容，可能会尝试一下。

好吧，我的主要问题是，我应该如何构建我的脚本，以便它在正确的时间以最佳性能加载？RequireJS 是解决此类设计模式问题的一种选择吗？

抱歉，这不是语法问题，而是思维预编码问题。我只是想在弄脏我的手之前好好想想。

问候，O。

4

1 回答 1

0

我认为你有过早优化的风险。我只是正常加载脚本，如果您发现性能问题，那么您可以引入 Require.js 之类的工具。只有 4 个脚本，我怀疑你会遇到任何问题。

也就是说，加载脚本的一些指针：

  • 在底部<body>（就在</body>结束标记之前）加载脚本，而不是在<head>- 这样页面内容的加载不会被脚本阻止。

  • 将您的自定义脚本包装在document.ready：

    $(document).ready(function() {
  // your code
});

    这意味着您的脚本在加载所有内容之前不会运行，从而避免了加载顺序的任何问题。

  • 使用 Google 的 CDN 加载 jQuery。它很快，而且（更重要的是）很多网站都在使用它，所以它很可能已经被用户缓存了：

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">

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

如果您仍然担心加载脚本的不同方法，这是我所知道的最好的资源，每种方法都有详尽的优点/缺点：

https://developer.mozilla.org/en-US/docs/XUL_School/Appendix_D:_Loading_Scripts

于 2012-10-10T18:08:03.523 回答