优化jQuery，提高web加载速度

总是从id选择器开始继承。
课前使用标签
缓存jQuery对象
掌握强大的连锁经营
使用子查询
对直接DOM操作的限制
泡沫
消除无效的查询
推迟到（窗口）。
压缩JS
全面掌握jQuery库

1。总是从id选择器开始继承。

jQuery中最快的选择器ID选择器，因为它直接来自getElementById（）方法的Javaｓｃｒｉｐｔ。
复制代码代码如下所示：
交通灯

红
黄色的
绿色
选择这样的按钮是没有效率的：

traffic_button = $（var的#内容。按钮）；
用id直接选择按钮更有效率。

traffic_button = $（var的# traffic_button）；

选择多个元素

提到多元选择实际上是关于DOM遍历和循环，这是慢的事情。为了提高性能，最好从最近的ID继承。

traffic_lights = $（var的# traffic_light输入）；

2。课前使用标签

第二快速选择器标签选择器（$（））。以同样的方式，因为它来自本土getElementsByTagName（）方法。
复制代码代码如下所示：
交通灯

红
黄色的
绿色
始终使用标记名称来限制（修改）类（不要忘记最近的ID）：

active_light = $（var的# traffic_light输入。）；

注意：在jQuery中，类是最慢的选择器。在IE浏览器下，它将遍历所有的DOM节点，不管它在哪里使用。

不要使用标签名称修改ID的例子将遍历所有div元素来找出哪些节点的ID is'content：

无功量=（'div美元#内容）；ID修改ID是多余的：

traffic_light = $（var的#内容# traffic_light）；

三.缓存jQuery对象

开发jQuery对象缓存到变量中的习惯。

千万不要这样做：
复制代码代码如下所示：
$（# traffic_light输入，）。Bind（听到咔哒声，函数（）{…}）；
$（# traffic_light输入，）。Css（'border'，'3px冲黄）；
$（# traffic_light输入，）。Css（'background-color '，'orange）；
$（# traffic_light输入。在）FadeIn（慢的）；

最好将对象缓存到变量中，然后再操作：
复制代码代码如下所示：
active_light = $（var $ ' # traffic_light输入。）；
active_light.bind美元（听到咔哒声，函数（）{…}）；
active_light.css美元（'border'，'3px冲黄）；
active_light.css美元（'background-color '，'orange）；
active_light.fadein美元（慢的）；

为了记住我们的局部变量是由jQuery封装的，我们通常使用$作为变量前缀。记住，不要让相同的选择器多次出现在你的代码中。

缓存jQuery结果，备用
如果您打算在程序的其他部分使用jQuery结果对象，或者如果您的函数执行多次，则会将它们缓存到全局变量中。

定义一个存储jQuery结果的全局容器，我们可以在其他函数中引用它们：
复制代码代码如下所示：
定义全局范围中的对象（例如：窗口）
窗口。
{
所有初始化可能是一个以上的二次使用查询。
头：$（），
traffic_light：$（' # traffic_light），
traffic_button：$（' # traffic_button）
}；
do_something（）函数
{
现在您可以引用存储结果并操作它们
VaR脚本= document.createelement（'ｓｃｒｉｐｔ）；
my.head.append美元（剧本）；
当您在函数操作中，可以继续在全局对象中查询。
my.cool_results = $（美元的# some_ul李）；
my.other_results = $（美元的# some_table TD）；
作为一个普通的jQuery对象使用的全局函数。
my.other_results.css美元（'border-color'，'）；
my.traffic_light.css美元（'border-color'、‘绿色'）；
}

4。掌握强大的连锁经营

上面的例子也可以写成：
复制代码代码如下所示：
active_light = $（var $ ' # traffic_light输入。'）；active_light.bind美元（听到咔哒声，函数（）{…}））
CSS（'border'，'3px冲黄）
CSS（'background-color '，'orange）
渐显（慢的）；

所以你可以写更少的代码，使JS更轻。

5。使用子查询

jQuery允许我们将附加的选择器操作添加到打包对象中。因为我们将父对象保存在变量中，这大大改善了子元素的操作。
复制代码代码如下所示：
交通灯

红
黄色的
绿色
例如，我们可以使用子查询的方法来捕获光或光灯和后续操作的缓存。
复制代码代码如下所示：
traffic_light = $（var $ ' # traffic_light），
active_light = $（美元traffic_light.find输入。），
inactive_lights = $（美元traffic_light.find输入。）；

提示：您可以以逗号分隔的方法一次声明多个本地变量——保存字节数。

6。对直接DOM操作的限制

这里的基本思想是在内存中设置您真正想要的，并更新DOM。这不是jQuery最佳实践，但需要有效的Javaｓｃｒｉｐｔ操作。直接DOM操作慢。

例如，您希望动态创建一组列表元素，不要这样做：
复制代码代码如下所示：
无功top_100_list = {…}， / /假设这里是100唯一的字符串
mylist = $（美元的# mylist '）； / / jQuery选择元素
对于（var i = 0，L = top_100_list.length；i < L；i++）
{
mylist.append美元（+ top_100_list {我} +）；
}

在插入DOM之前，我们都应该创建一组完整的元素字符串：
复制代码代码如下所示：
无功top_100_list = {…}，
mylist = $（美元的# mylist），
top_100_li = ； / /这个变量将被用来存储我们的元素列表
对于（var i = 0，L = top_100_list.length；i < L；i++）
{
top_100_li + = + +top_100_list {我}；
}
mylist.html美元（top_100_li）；

在插入前将多个元素封装到单个父节点会更快。
复制代码代码如下所示：
无功top_100_list = {…}，
mylist = $（美元的# mylist），
top_100_ul =；
对于（var i = 0，L = top_100_list.length；i < L；i++）
{
top_100_ul + = + +top_100_list {我}；
}
top_100_ul = ''； / /关闭无序列表
mylist.replacewith美元（top_100_ul）；

如果您已经完成了上述几项，或者您担心性能问题，那么：

尝试jQuery的克隆（）方法。它将创建一个节点树的副本，它允许DOM操作脱机。完成操作后，将返回到节点树中。

DOM documentfragments使用。，作为jQuery的作者说，明显优于直接的DOM操作。

7。气泡

除非在特殊情况下，每一个js事件，如点击，鼠标悬停，等会泡到父节点。当我们需要对多个元素调用相同的函数时，它将非常有用。

您只需要绑定到其父节点一次，然后就可以确定哪个节点触发了事件，而不是这种较差的多元素事件监视方法。

例如，我们希望在输入框被选中时，将表单与许多输入框绑定起来，向它添加一个类。

像这样的绑定事件效率很低：
复制代码代码如下所示：
$（#输入形式输入）。Bind（'focus'，函数（）{（）{
$（这）AddClass（选中的）；
}）。Bind（'blur，函数（）{（）{
$（这）RemoveClass（选中的）；
}）；

我们需要监视焦点，并在父级丢失焦点：
复制代码代码如下所示：
$（# entryform）。Bind（'focus'，功能（e）{ {）
var = $（细胞e.target）； / / e.target抓住触发事件的结。
Cell.addClass（选中的）；
}）。Bind（'blur功能（e）{ }
var = $（e.target）细胞；
Cell.removeClass（选中的）；
}）；

父元素充当分派器。它可以根据目标元素绑定事件。如果发现已经将同一事件绑定到许多元素，那么您一定做了一些错误的事情。

8。消除无效的查询

虽然jQuery可以在没有匹配元素的情况下处理非常优雅的功能，但是查找站点仍然需要时间。如果您有一个全局js，它很可能会将所有jQuery函数引入到$（文档）就绪（函数）中（所有值得骄傲的代码}）。

只在页面中使用的函数。最有效的方法是使用内联初始化函数，以便您的模板可以精确地控制何时和何地执行js…

例如，您的文章页面模板，您可以在正文结尾处引用以下代码：
Mylib.article.init（）；
如果你的页面模板包含了一些不可变的模块可能不会出现在页面中，或者为了直观的演示，你需要他们快速加载，这样你就可以按照模块后面的初始化函数。
红
黄色的
绿色
mylib.traffic_light.init（）；
您的全局js库可能是这样的：

无功mylib =
{
article_page：
{
init：函数（）
{
特定于文章的函数。
}
}，
traffic_light：
{
init：函数（）
{
功能独特的红绿灯。
}
}
}

9。延迟到$（窗口）。

jQuery对开发人员来说是一件非常吸引人的事情。它可以把任何东西挂到$（文档）上，准备并假装是一个事件。在大多数情况下，你会找到这样的例子。

虽然文件（。Rady）真的很有用，它可以执行其他元素时不会渲染页面下载时。如果您发现页面已加载到状态，则可能是由$（文档）。

通过将jQuery函数绑定到$（窗口）加载事件，可以在加载页面时降低CPU使用率。它将在所有HTML（包含）被下载后执行。

$（窗口）加载（函数（）{）
初始化后，加载完整的jQuery函数页。
}）；

多余的功能，如拖放，视觉效果和动画，预装隐藏图像等都适用于这种技术。