如何编写高质量的jquery代码(使用jQuery性能问题)

1.正确引用jQuery。1.尽量在正文结束前介绍jquery，不要在头部介绍。2.借助第三方提供的CDN引入jQuery，使用第三方CDN出现问题时注意引入本地jQuery文件。(对于已经使用cdn的网站，可以忽略，现在用户带宽升级了，可以忽略，放在其他机器上不一定稳定。) 3.如果脚本文件是在/body之前引入的，就不需要编写document.ready了，因为在执行js代码的时候已经加载了DOM。

script src=' http :3358 libs . Baidu.com/jQuery/1 . 8 . 3/jQuery . min . js '/script script window . jQuery | | document . write(' script src=' http : jQuery 1.8 . min . js ' \ x3c/script)。

高效使用jQuery选择器是熟练使用jQuery的基础，掌握jQuery选择器需要一定的时间积累，所以在开始学习jQuery的时候要注意选择器的使用。

div id=' nav ' class=' nav ' a class=' home ' href='//www . JB 51 . net ' we/a class=' articles ' href='//www . JB 51 . net/list/list _ 172 _ 1 . htm ' jquery教程/a。

$('.home’)；//1 $(' # nav a . home ')；//2$('#nav ')。find(' a . home ')；//31.方法1会让jQuery在整个DOM中搜索类为home的A元素，性能可想而知。2.方法2将上下文添加到要搜索的元素中，成为搜索id为nav的子元素，搜索性能大大提高。3.方法3使用find方法，速度更快，所以方法3最好。

关于jQuery选择器的性能优先级，ID选择器比元素选择器快，元素选择器比类选择器快。因为ID选择器和元素选择器是原生的JavaScript操作，而类选择器不是，所以可以看看find context和find() children的区别。

3.缓存jQuery对象。

缓存jQuery对象可以减少不必要的DOM查找。您可以参考缓存jQuery对象来提高性能。

4.正确使用事件委托事件委托可以使事件执行得更好。将事件绑定到动态添加的元素也需要委托。在新版本的jQuery中，建议您使用上的将一个或多个事件处理程序绑定到元素。

表id='t' tr td我是一个单元格/td /tr/table。例如，如果我们想将一个点击事件绑定到顶部单元格，一个不注意的朋友可能会这样写：

$('#t ')。查找(' td ')。on('click ')，function () { $(this)。css({ 'color': 'red '，' background ' : ' yellow ' })；});这将把事件与每个td联系起来。在将点击事件绑定到100个单元格的测试中，两者的性能差异高达7倍。良好做法应写成如下：

$('#t ')。on('click '，' td '，function () { $(this)。css({ 'color': 'red '，' background ' : ' yellow ' })；});5.简化jQuery代码。例如，在上面的代码中，我们已经正确地合并了jQuery代码，并且有类似的方法，例如。attr()，等。我们没有写过以下方法：

$('#t ')。on('click '，' td '，function () { $(this)。css('颜色'，'红色')。css('背景'，'黄色')；});6.减少DOM操作。当您开始使用jQuery时，您可能会频繁操作DOM，这相当消耗性能。如果我们要在正文中动态输出一个表，有些朋友会这样写：

var $ t=$(' body ')；$ t . append(' table ')；$ t . append(' TRT D1/TD/tr ')；$ t . append('/table ')；良好做法：

$(“body”)。追加(' table TT D1/TD/tr/table ')；这样，表格字符串拼接后，添加到正文中，DOM只操作一次。以前群里有些朋友在IE下输出的时候就因为这个出现了问题。对于字符串的拼接，请参考最快的字符串创建方法。

7.不要使用jQuery。

原生函数总是最快的，这不难理解。我们不应该在代码编写中忘记本机JS。

先把这些建议总结一下。每一条建议都不难理解，但是需要花很多时间全面总结。例如，在简化的代码段中，如果需要根据条件从数组中获取一个新数组，可以使用$。grep()方法。如果你在使用jQuery的时候有自己的必读，请在留言里分享给大家！

以下是其他网友的补充：

定义jQuery变量时注意添加var关键字。这不仅是jQuery，也是所有javascript开发过程中需要注意的。请不要这样定义它：

$ loading=$(“# loading”)；//这是一个全局定义。如果你不知道同一个变量名被引用到哪里，你会郁闷死的。

请使用var来定义变量。如果使用多个变量，请按如下定义：

复制代码如下：VARPage=0，$ loading=$ ('# loading ')，$ body=$(' body ')；

不要给每个变量都加一个var关键字，除非你有严重的强迫症要定义jQuery变量声明或者定义一个变量，请记住如果你定义了jQuery的一个变量，请在变量前加一个$符号，如下：

var $ loading=$(' # loading ')；

在这里定义它的好处是，您可以有效地提示自己或其他阅读您代码的用户，这是一个jQuery变量。

请记住DOM操作的缓存。

在jQuery代码开发中，我们经常需要操作DOM，这是一个消耗资源的过程，很多人喜欢这样使用jQuery:

复制代码如下： $(“# loading”)。html('已完成')；$(“#正在加载”)。fade out()；

代码没有问题，可以正常运行结果。但是，请注意，每次定义和调用$(“# loading”)时，实际上都是创建一个新变量。如果您需要重用它，请记住在变量中定义它，这样您就可以有效地缓存变量内容，如下所示：

复制代码如下： var $ loading=$(' # loading ')；$loading.html('已完成')；$ loading . fade out()；

这将使性能更好。

使用链式操作。

上面的例子，我们可以写得更简洁：

复制代码如下： var $ loading=$(' # loading ')；$loading.html('已完成')。fade out()；

精简jQuery代码。

尝试将一些代码集成在一起，不要这样编码：

复制代码如下：//！反派$ button . click(function(){ $ target . CSS(' width '，' 50% ')；$target.css('边框'，' 1px实心# 202020 ')；$target.css('color '，' # fff ')；});

应该是这样写的：

复制代码如下： $ button . click(function(){ $ target . CSS({ ' width ' : ' 50% '，' border' :' 1pxsolid # 202020 '，' color ' : ' # fff ' })；});

避免使用全局类型的选择器。

请不要这样写：$('。某物* ')；不如这样写：$('。某物)。儿童()；

不要覆盖多个id。

请不要这样写：$(' #某物#儿童')；够了：$(' # children ')；

运用逻辑判断| |或者加快速度。

请不要这样写：

复制的代码如下：if(！$某物){ $某物=$(' #某物')；}

这样，写作成绩更好：

$某物=$某物| | $(' #某物')；尽量少用代码。

这样写：if(string . length 0){ 0.}.

这样写：if(string . length){ 0.}.

尝试使用。论方法。如果使用较新版本的jQuery类库，请使用。上，所有其他方法最终都将使用实现。打开。

尽量使用最新版本的jQuery。最新版本的jQuery性能更好，但最新版本可能不支持ie6/7/8，需要根据实际情况进行选择。

尽可能使用原生Javascript。如果jQuery提供的功能可以使用原生Javascript实现，建议使用原生javascript。