jQuery和脚本速度？

Question

快速的问题，我有一些脚本只需要在某些页面上运行，有些只在某个页面上运行，最好是将脚本包含在脚本标签的实际页面的底部，或者在我的js inlcude;

var pageURL = window.location.href; 

if (pageURL == 'http://example.com') { 
    // run code 
} 

哪个更好更快？

Answer 1

最好的方法是只在需要它的页面上包含脚本。同样在维护方面，您的脚本更加独立于正在使用它的页面。将这些ifs放在脚本中会使它与您网站的结构紧密结合，如果您决定重命名某个页面，它将不再起作用。

Answer 2

将脚本包含在仅需要它的页面底部。

Answer 3

该YSlow附加是知道你的网站为什么很慢的最佳解决方案。

有许多问题这可能是缓慢的原因。

结合许多jQuery的一个可以帮助你增加您性能。

此外，您可以将脚本放在页面底部和CSS顶部。

Answer 4

它基本上取决于你，取决于代码是什么。

通常情况下，我会把它放到页面的底部。 （我正在谈论的只是与该页面有关的次要ui事物）。

如果你正在进行多个页面的位置ref测试，这可能意味着你做错了什么。

你可能想看一看其中的一个：

• http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
• http://2tbsp.com/node/91

至于这是更快它的疯狂可以忽略不计，选择什么是对你更方便保持。

Answer 5

尽可能只包含页面上的脚本需求。也就是说，如果您通过AJAX提供内容很难做到，因为脚本可能已经被加载，重新加载可能会导致问题。当然，您可以通过AJAX提供的代码在脚本块中提供代码（而不是引用外部js文件）。

如果您需要为所有页面加载脚本（通过母版页），但只适用于某些页面，请利用jQuery理解并处理与不匹配的选择器元素。您还可以使用live处理程序以及非常特定的选择器，以允许在加载页面时加载的脚本处理稍后动态添加的元素。

注意：如果您使用通过内容分发网络加载的脚本，您会发现它们通常在浏览器本地缓存，并且不会影响您的页面加载时间。如果您的网站上已经加载过一次，那么脚本也是如此。

Answer 6

我可以推荐您使用异步资源加载器，例如LAB.js。然后，你可以建立一个依赖关系列表，例如：

var MYAPP = MYAPP || {}; 

/* 
* Bunches of scripts 
* to load together 
*/ 
MYAPP.bunches = { 
    defaults:  ["libs/jquery-1.6.2.min.js"], 

    cart:   ["plugins/jquery.tmpl.min.js", 
        "libs/knockout-1.2.1.min.js", 
        "scripts/shopping-cart.js"], 

    signup:   ["libs/knockout-1.2.1.min.js", 
        "scripts/validator.js"] 
    /* 
    ... etc 
    */ 
}; 

/* 
* Loading default libraries 
*/ 
$LAB.script(MYAPP.defaults); 

if (typeof MYAPP.require !== 'undefined') { 
    $LAB.script(MYAPP.dependencies[MYAPP.require]); 
} 

，并在页面的最后，你可以写：

<script type="text/javascript"> 

    var MYAPP = MYAPP || {}; 
    MYAPP.require = "cart"; 

</script> 

<script type="text/javascript" src='js/libs/LAB.min.js'></script> 
<script type="text/javascript" src='js/dependencies.js'></script> 

顺便说一句，一个问题给大家，它是一个好主意这样做？

Answer 7

您有两件竞争的事情需要优化，网页加载时间和网页初始化时间。

通过充分利用浏览器缓存，可以最大限度地减少网络上的网页加载时间，从而不必通过网络加载JS文件。要做到这一点，您需要为您的网站提供尽可能多的JavaScript代码或两个更大且完全最小化的JS文件。要做到这一点，你应该把JS的多个不同的页面放在一个普通的JS文件中。每个站点的JS是否应该是一个或两个较大的JS文件，或者是否将它分组成少量的常用JS文件，每个JS文件都针对您的站点的一部分。但是，总的想法是，你想要把来自不同页面的JS代码组合成一个可以最有效地缓存的公共JS文件。

您可以通过只调用实际需要在显示的特定页面上执行的初始化代码来最小化页面初始化时间。有几种不同的方法来解决这个问题。我同意其他调用者您不希望查看URL来决定执行哪些代码，因为这会将您的代码绑定到更好避免的URL结构。如果您的代码具有可管理数量的不同类型的页面，那么我建议在body标签上标识具有唯一类名称的每种页面类型。然后，您可以让您的初始化代码在正文标签上查找适当的类，并根据该分类转到相应的初始化代码。我甚至在你找到一个带有特定公共前缀的类名的地方看过它，解析出名称的非公用部分并用该名称调用一个初始化函数。这允许您通过仅向body标签添加类名来为页面提供一组特定的行为。该代码与实际页面保持非常分离。

这样做的一般目的方式是将所有代码保存在一个或两个常用的JS文件中，但要为每个特定页面的HTML添加适当的初始化调用。因此，执行初始化代码的JS代码驻留在常用的JS文件中，因此被最大限度地缓存，但是为该页面调用相应的初始化代码嵌入在每个特定页面中。这最大限度地减少了初始化的执行时间，但仍允许使用最大缓存。它与前面提到的类名称技术相比稍逊一筹，但有些人可能更喜欢更直接的调用技术。