jQuery性能优化的22点
首先，记住jQuery是Javaｓｃｒｉｐｔ，这意味着我们应该采用相同的编码约定、风格指南和最佳实践。首先，如果您是Javaｓｃｒｉｐｔ新手，我建议您阅读初学者的24个Javaｓｃｒｉｐｔ最佳实践
当您准备使用jQuery时，我强烈建议您遵循以下指导原则：
1。缓存变量
DOM遍历是昂贵的，因此元素缓存将尽可能重用。
复制代码代码如下所示：
H = $（#元），Height（）；
$（#元），Css（'height，H-20型）；
复制代码代码如下所示：
建议
$元=美元（#元）；
H = $（）element.height；
element.css美元（'height，H-20型）；
2。避免使用全局变量
jQuery与Javaｓｃｒｉｐｔ相同，一般来说，最好确保变量在函数作用域内。
复制代码代码如下所示：
$元=美元（#元）；
H = $（）element.height；
element.css美元（'height，H-20型）；
复制代码代码如下所示：
建议
VaR（#美元美元元=元）；
H = $（）element.height VaR；
element.css美元（'height，H-20型）；
三.使用匈牙利命名方法
jQuery对象很容易通过在变量前面添加一个$前缀来标识。
复制代码代码如下所示：
第一组（# VaR美元第一）；
无功二=美元（' #二）；
VaR值= $（）first.val；
复制代码代码如下所示：
在添加前缀之前，在jQuery对象中
VaR（#第一=美元美元第一）；
VaR（#美元美元二=二），
VaR值= $（）first.val；
4。使用var链（单var模式）
合并多个变量声明为一个声明，我建议把未赋值的变量在后面。
复制代码代码如下所示：
VaR
第一，美元美元（#第一），
二美元美元=（#二），
价值= $（）first.val，
k＝3，
cookiestring = 'somecookiesplease，
我，
J，
MyArray = { }；
5。请use'on
在新版本的jQuery中，一个较短的on（单击 ）用于替换一个函数，如单击（）。在以前的版本中，on（）是绑定（）。由于jQuery 1.7版本，on（）添加了事件处理程序的首选方法。但是，为了一致性，您可以简单地使用on（）方法。
复制代码代码如下所示：
first.click美元（函数（）{（）
first.css美元（'border'，'1px固体红）；
first.css美元（颜色'，'蓝色'）；
}）；
first.hover美元（函数（）{（）
first.css美元（'border'，'1px固体红）；
}）
复制代码代码如下所示：
建议
在此一美元（，函数（）{（）{
first.css美元（'border'，'1px固体红）；
first.css美元（颜色'，'蓝色'）；
}）
在此美元（'hover，函数（）{（）{
first.css美元（'border'，'1px固体红）；
}）
6。简化Javaｓｃｒｉｐｔ
一般来说，尽可能多地合并函数是更好的。
复制代码代码如下所示：
first.click美元（函数（）{（）
first.css美元（'border'，'1px固体红）；
first.css美元（颜色'，'蓝色'）；
}）；
复制代码代码如下所示：
建议
在此一美元（，函数（）{（）{
first.css美元（{
边境：'1px固体红'，
'色'：'蓝色'
}）；
}）；
7。连锁经营
jQuery实现方法的链式操作非常简单。
复制代码代码如下所示：
second.html美元（价值）；
second.on美元（听到咔哒声，函数（）{（）{
警报（hello大家）；
}）；
second.fadein美元（慢的）；
second.animate美元（{身高：'120px}，500）；
复制代码代码如下所示：
建议
second.html美元（价值）；
second.on美元（听到咔哒声，函数（）{（）{
警报（hello大家）；
}）。FadeIn（慢的），动画（{身高：'120px}，500）；
8。保持代码的可读性
随着代码的简化和链的使用，代码很难阅读。可以起到增加紧缩和换行效果很好。
复制代码代码如下所示：
second.html美元（价值）；
second.on美元（听到咔哒声，函数（）{（）{
警报（hello大家）；
}）。FadeIn（慢的），动画（{身高：'120px}，500）；
复制代码代码如下所示：
建议
second.html美元（价值）；
二美元
，（听到咔哒声，函数（）{ alert（你好大家'）；}）
渐显（慢的）。
。动画（{身高：'120px}，500）；
9。选择短路评估
短路求值是一个表达式从左到右的评价，与（逻辑与）或| |（逻辑或运算符）。
复制代码代码如下所示：
功能initvar（$ myVar）{
如果（！$ myVar）{
$ myVar =美元（' #选择器）；
}
}
复制代码代码如下所示：
建议
功能initvar（$ myVar）{
$ myVar =美元| myVar |（$ #选择器）；
}
10。选择快捷方式
简化代码的方法之一是使用编码快捷方式。
{代码}
如果（collection.length > 0）{等}
复制代码代码如下所示：
建议
如果（集合，长度）{ }
11中元素的分离。重操作
如果要对DOM元素进行大量操作（在一行中设置多个属性或CSS样式），建议首先分离元素并添加它。
复制代码代码如下所示：
VaR
集装箱= $（美元#容器），
containerli = $（美元#容器里），
$ = null；
containerli.first美元美元元=（）；
许多复杂的操作…
复制代码代码如下所示：
建议
VaR
集装箱= $（美元#容器），
containerli = container.find美元美元（礼），
$ = null；
containerli.first美元美元元=（）将（）；
许多复杂的操作…
container.append美元（$元）；
12。技能记忆
您可能缺乏使用jQuery中的方法的经验，这是一个必须查看的文档，可能有更好或更快的方法使用它。
复制代码代码如下所示：
$（# ID）数据（键，值）；
复制代码代码如下所示：
建议（效率）
美元。数据（# ID，关键值）；
13。使用查询缓存父元素
正如前面提到的，DOM遍历是一种昂贵的操作，典型的方法是在选择子元素时缓存父元素并重用缓存元素。
复制代码代码如下所示：
VaR
集装箱=（#美元美元的集装箱），
containerli = $（美元的#容器里），
containerlispan = $（美元的#容器里跨度）；
复制代码代码如下所示：
建议（效率）
VaR
集装箱=（#美元美元的集装箱），
containerli = $（美元container.find李），
containerlispan = $（美元containerli.find 'span）；
14。避免通用选择器
子选择器中泛型选择器的性能非常糟糕。
复制代码代码如下所示：
$（容器> *）；
复制代码代码如下所示：
建议
$（容器）；
15。避免隐式通用选择器
一般选择器有时是隐式的，不容易找到。
复制代码代码如下所示：
$（'。someclass：收音机）；
复制代码代码如下所示：
建议
$（'。someclass输入：收音机）；
16。优化选择
例如，id选择器应该是唯一的，因此不需要添加其他选择器。
复制代码代码如下所示：
$（'div #身份识别码）；
$（'div #页脚a.mylink）；
复制代码代码如下所示：
建议
$（#身份识别码）；
$（#页脚。MyLink）；
17。避免多个ID选择器
强调ID选择器应该是唯一的，而不是添加额外的选择器，而不需要多个后代ID选择器。
复制代码代码如下所示：
$（#外#内'）；
复制代码代码如下所示：
建议
$（#内'）；
18。坚持最新版本
新版本通常更好：更轻、效率更高。显然，您需要考虑您希望支持的代码的兼容性。例如，版本2不支持IE 6 7／8。
19。放弃放弃的方法
关注每个新版本的废弃方法非常重要，尽量避免使用这些方法。
复制代码代码如下所示：
坏生活被抛弃了。
$（#东西）。活（听到咔哒声，函数（））{
console.log（'hooray）；
}）；
复制代码代码如下所示：
建议
$（#东西），（听到咔哒声，函数（））{
console.log（'hooray）；
}）；
注意：这里可能不适合实时实现实时绑定，委托可能更合适。
20。使用CDN
谷歌的来电显示可以保证最近的缓存和用户快速响应的选择。（使用谷歌该去寻找你自己的地址，这里的地址是不可用的，和CDN的jQuery官方网提供）。
21。如有必要，可以结合jQuery和Javaｓｃｒｉｐｔ本机代码。
如上所述，jQuery是Javaｓｃｒｉｐｔ，这意味着事情可以做jQuery也可以使用本地代码。代码（或香草）可能比jQuery可读和可维护的代码少，寿命更长。但这也意味着更高效的（通常是较低的代码，更糟糕可读性、性能、较高的例如，汇编语言，当然，更强大的人才的需要）。记住，没有框架是更小，更轻，比本地代码更有效（注：测试环节都失败了，在网上搜索测试代码）。
考虑到香草和jQuery之间的性能差异，我强烈建议吸收两个人的本质，并使用（可能的）与jQuery等效的本机代码。
22。最后的建议
最后，我记录下这篇文章的目的提高jQuery的性能和其他一些好的建议。如果你想对这一课题的深入研究，你会发现很多乐趣。记住，jQuery是不是必不可少的，只有一个选择。想想你为什么要使用it.dom操作吗Ajax吗模板CSS动画还是选择器引擎也许Javaｓｃｒｉｐｔ迷你框架或自定义版本的jQuery是更好的选择。