jQuery网页特效设计基础教程课件 第10单元 jQuery 性能优化与技巧

第10单元jQuery性能优化与技巧掌握jQuery性能优化的方法。掌握jQuery常用技巧的使用。教学目标pedagogicalobjectives能够熟练进行jQuery性能优化。能够熟练应用jQuery常用技巧。培养系统化思维能力，从整体出发优化性能，掌握简化流程的技巧，提高资源配置与管理能力，形成效率与质量并重的开发习惯。目录导航10.1jQuery性能优化10.3项目实战：动态搜索过滤10.2jQuery常用技巧10.1jQuery性能优化01OPTION使用一个var关键字来定义变量如果需要使用多个变量，建议使用var关键字对其进行定义。代码如下：varpage=0,$loading=$('#loading'),$body=$('body');02OPTION定义jQuery变量时添加$符号在声明或者定义变量的时候，如果定义的是jQuery变量，则添加一个$符号在变量前。代码如下：var$loading=$('#loading');这样定义jQuery变量的好处在于，可以有效地提示自己或者其他阅读代码的人，这是一个jQuery变量。10.1jQuery性能优化03OPTION使用HTML5新的HTML5标准带来的是更轻巧的DOM结构，更轻巧的DOM结构意味着使用jQuery时需要更少的遍历以及获得更优良的载入性能，所以如果可以，请使用HTML5。04OPTION在需要的时候使用原生的JavaScript使用jQuery是一件很棒的事情，但是它也是JavaScript的一个框架，所以可以在需要的时候在jQuery代码中使用原生的JavaScript，这样能获得更好的性能。10.1jQuery性能优化05OPTION精简jQuery代码精简前$button.click(function(){ $target.css('width','50%'); $target.css('border','1pxsolid#202020'); $target.css('color','#fff');});精简后$button.click(function(){ $target.css({'width':'50%','border':'1pxsolid#202020','color':'#fff'});});10.1jQuery性能优化06OPTION尽量使用.on()方法如果使用版本比较新的jQuery类库，可使用.on()方法，其他任何方法都是最终使用.on()来实现的。在jQuery中执行速度最快的选择器是ID选择器，因为它直接来自JavaScript的getElementById()方法。例如，下面的HTML代码：07OPTION总是从ID选择器来继承如果像这样选择按钮是低效的，代码如下：vartraffic_button=$("#content.button");用ID选择器直接选择按钮效率更高，代码如下：vartraffic_button=$("#traffic_button");10.1jQuery性能优化08OPTION在class前面使用tagjQuery中执行速度第二快的选择器是tag选择器[例如$('head')]，因为它直接来自原生的JavaScript方法getElementsByTagName()，所以最好使用tag来修饰class（并且不要忘记就近的id）。代码如下：varreceiveNewsletter=$('#nslForminput.on');此外，不要用tag来修饰id。例如，下面的示例将会遍历所有的<div>元素来查找id属性值为content的节点，代码如下：varcontent=$('div#content');//非常慢，不要使用10.1jQuery性能优化09OPTION使用jQuery的内部函数data()来存储信息在jQuery中，使用内部函数data()存储信息性能更好。代码如下：$('#head').data('name','value');//之后在应用中调用$('#head').data('name');10.1jQuery性能优化10OPTION推迟到$(window).load$(document).ready()确实很有用，它在页面渲染时，其他元素还没载入完成即可执行。如果发现页面一直是载入中的状态，很有可能是$(document).ready()函数引起的。可以通过将jQuery函数绑定到$(window).load事件的方法来降低页面载入时的CPU（CentralProcessingUnit，中央处理器）使用率，该函数会在所有的HTML（包括IFrame）载入完成后执行。代码如下：$(window).load(function(){//页面完全载入后才初始化的jQuery函数});多余的功能，例如拖放、视觉特效和动画、预载入隐藏图像等，都适合使用这种性能优化方法。10.1jQuery性能优化11OPTION缓存jQuery对象不建议使用的代码将jQuery对象缓存到一个变量中再操作的代码10.1jQuery性能优化12OPTION使用子查询jQuery允许开发人员对一个已包装的对象使用附加的选择器操作，因为已经在变量中保存了一个父元素，这样可以大大提高对其子元素进行操作的效率。例如，有下面的HTML代码：接下来可以使用子查询来获取亮或不亮的灯，并将其缓存以备后续操作。代码如下：10.1jQuery性能优化13OPTION对直接的DOM操作进行限制在jQuery中应该对直接的DOM操作进行限制，遇到这种情况时，可以首先在内存中创建需要的内容，然后更新DOM，因为直接的DOM操作速度很慢。例如，如果需要动态地创建一组列表元素，一定不要使用下面的代码：而应该首先将一组列表元素在插入DOM之前全部创建好，代码如下：10.1jQuery性能优化13OPTION对直接的DOM操作进行限制然后在插入DOM之前，将多个元素包裹在一个单独的父级节点中，这样执行速度更快，代码如下：如果在执行完上述步骤后，还是担心性能有问题，那么可以尝试下面的方法。使用jQuery的clone()方法，它会创建一个节点树的副本，它允许以“离线”的方式进行DOM操作，当操作完成后再返回节点树。

DOMDocumentFragments的性能要明显优于直接的DOM操作的性能。10.1jQuery性能优化14OPTIONDOM操作请务必记住缓存在jQuery代码开发中，常常需要操作DOM。DOM操作是非常消耗资源的一个过程，而很多人往往都喜欢这样使用jQuery：$('#loading').html('完毕');$('#loading').fadeOut();以上代码没有任何问题，但是这里需要注意，每次定义并且调用$('#loading')时，实际都创建了一个新的变量，这样会很浪费资源。因此，如果需要重用$('#loading')，一定要将其定义在一个变量中，这样可以有效地缓存变量内容。代码如下：var$loading=$('#loading');$loading.html('完毕');$loading.fadeOut();10.1jQuery性能优化15OPTION直接给DOM元素添加<style>标记要给少数DOM元素添加样式，最好的方法就是使用jQuery的css()函数；然而，如果要给很多DOM元素添加样式，直接给DOM元素添加<style>标记会更有效，这样可以避免在代码中使用硬编码。代码如下：$('<styletype="text/css">div.class{color:red;}</style>').appendTo('head');16OPTION使用EventDelegation使用EventDelegation，仅需要在父级节点上绑定事件，然后查看哪个子节点（目标节点）触发了事件。代码如下：$("table").delegate("td","hover",function(){$(this).toggleClass("hover");});10.1jQuery性能优化17OPTION压缩成一个主JavaScript文件如果已经确定了哪些文件是应该被下载的，那么应该将它们压缩成一个主JavaScript文件。使用一些开源的工具可以自动完成这个任务，如使用Minify（和后端代码集成）使用JSCompressor、YUICompressor、DeanEdwardsJSpacker等在线工具。目录导航10.1jQuery性能优化10.3项目实战：动态搜索过滤10.2jQuery常用技巧10.2jQuery常用技巧01OPTION验证元素是否在jQuery对象集合中02OPTION获取jQuery集合的某一项03OPTION禁止右键单击10.2jQuery常用技巧04OPTION隐藏搜索文本框文字05OPTION在新窗口中打开链接10.2jQuery常用技巧06OPTION检测浏览器类型在jQuery1.9之前，检测浏览器类型使用如下方法：10.2jQuery常用技巧06OPTION检测浏览器类型jQuery1.9之后，$.browser已被剔除，因此需要使用其他方式来检测浏览器类型。具体代码如下：上述代码中等号后面的表达式返回的是true或false，可以直接用来替换原来的$.browser等。检测浏览器类型是否为IE6：if("undefined"==typeof(document.body.style.maxHeight)){}检测浏览器类型是否为IE6～IE8:if(!$.support.leadingWhitespace){}10.2jQuery常用技巧07OPTIONjQuery延时加载功能08OPTION预加载图片10.2jQuery常用技巧09OPTION动态控制页面字号大小10.2jQuery常用技巧10OPTION操作元素的样式11OPTION页面样式切换10.2jQuery常用技巧12OPTION获得鼠标指针坐标值13OPTION验证元素是否为空14OPTION统计元素个数10.2jQuery常用技巧15OPTION替换指定的元素16OPTION移除单词功能17OPTION使整个<div>元素可单击10.2jQuery常用技巧18OPTION复制对象10.2jQuery常用技巧19OPTION使元素居屏幕中间位置10.2jQuery常用技巧20OPTION方法的连写21OPTION集合处理功能10.2jQuery常用技巧22OPTION同一函数实现set和get10.2jQuery常用技巧23OPTION禁用jQuery（动画）效果24OPTION与其他JavaScript类库冲突的解决方案目录导航10.1jQuery性能优化10.3项目实战：动态搜索过滤10.2jQuery常用技巧10.3项目实战：动态搜索过滤创建一个名为index.html的文件，在该文件的<head>标记中应使用下面的语句引入jQuery库。01在index.html文件中添加一个输入框和下拉列表。关键代码如下：02<inputtype="text"id="searchInput"placehold