JQuery教学之性能优化

jQuery是一款非常优秀的javascript框架,当我们使用到jQuery后就再也不想回到javascript时冗长的代码,那么jQuery的优化就摆在了我们的面前。那么我们优化JQuery应该从那些方面入手呢?

1、使用最新版本的jQuery

新版本相对于旧版本会做性能上的改进,还有就是添加新功能。

2、选择器的使用

我们通常会使用id选择器、class选择器、元素选择器、伪类选择器和元素选择器。在使用时我的建议是最好使用id选择器,其次是class选择器>元素选择器>Element选择器>伪类选择器。

说到选择器时,不可必选的要插上一句,在使用选择器查最好是从具有id的父元素开始逐级向下查找。

3、不要过度的使用jQuery

记住一句话原生的是最快的。jQuery是write less,do more(写的更少,做的更多)。

4、做好缓存

当时要重复使用一个节点是可以使用一个变量存放,在使用时再调用。避免重复获取节点,降低效率。

代码如下:

var inputSelect = $("#head .head_right input");
inputSelect.find("a");
inputSelect.find("i");

5、使用链式操作

jQuery的一大亮点,就是可以使用链式操作。

代码如下:

$("#content").find(".div").eq(2).html("Hello World");

6、事件委托

当需要多个同级元素执行一种类型的事件时,可以采用事件委托的方式。例:

代码如下:

<div id="content">
    <div><div>
    <div><div>
    <div><div>
    <div><div>
    <div><div>
<div>

当每个class="div"的div都具备一个click事件的时候我们可以采取事件委托,

代码如下:

$("#content").on("click","div",function(){   
    $(this).css("color","#ff5500");
  });

7、正确处理循环

循环是一种较耗时的操作,如果可以使用选择器直接选中元素,就不要使用循环去一个个的遍历元素。

Javascript的原生方法for和while,要比jQuery的each()快。所以应该优先使用原生的方法。

8、减少JQuery对象的生成

生成Query对象就会生成对应的属性和方法,比较占用资源。所以尽量减少jQuery对象的生成。

9、变量的作用域

当一个变量不需要 在多个函数调用时,应该把变量放在函数内,减少代码执行时查找代码的时间。

10、将某些函数推迟到$(window).load执行

$(document).ready确实好用,但是它可以再页面渲染时,其他元素还没有下载完成就执行。

11、脚本的合并

脚本都是一一被加载的,减少脚本数量也能提高效率。

12、元素封装

当给一个节点插入一个内容,可以先把内容进行封装,再插入。

代码如下:

var content = "";
$("#head").html(content);

另外就是进行js文件的压缩。

随着jQuery的不断被使用,越来越多的优化方法会被发现。

(0)

相关推荐

  • jQuery性能优化的38个建议

    一.注意定义jQuery变量的时候添加var关键字这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:$loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的二.请使用一个var来定义变量如果你使用多个变量的话,请如下方式定义: 复制代码 代码如下: var page = 0,   $loading = $('#loading'),   $body = $('body'); 不要给每一

  • Jquery性能优化详解

    寻寻觅觅,觅觅寻寻终于找到了一些关于jquery性能优化的文章,小编果断收藏当然不能忘了加上自己的一些总结及理解. 首先,之前文章中的jquery链式操作就是jquery性能优化方式中的一种,具体实现及优势在这里就不重复了哈.其次,jquery的优化与web优化中的某些方法是一样的. a.压缩js.使用代码压缩技术,减小文件体积.(使用jsmin.YUI Compressor等). b. 事件默认是向上冒泡的,发生在子节点中的事件,可以由父节点来处理.把事件注册上提到父节点上,这 样就不需要为每

  • jQuery 性能优化指南(3)

    8,尽量使用ID代替Class. 前面性能优化已经说过,ID选择器的速度是最快的.所以在HTML代码中,能使用ID的尽量使用ID来代替class.看下面的一个例子: // 创建一个list var $myList = $('#myList'); var myListItems = '<ul>'; for (i = 0; i < 1000; i++) { myListItems += '<li class="listItem' + i + '">This i

  • JQuery性能优化的几点建议

    针对jquery性能优化这个主题,想必大家都有所了解.下面是我搜集点一点资料关于jquery性能优化,大家可以参考参考. 一.选择器性能优化建议 1. 总是从#id选择器来继承:这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了: 2. 在class前面使用tag:jQuery中第二快的选择器就是tag选择器(如$('head')),因为它和直接来自于原生的Javascript方法getElementByTagName().所以最好总是用tag来修饰cla

  • 22点关于jquery性能优化的建议

    首先,在脑子里牢牢记住 jQuery 就是 javascript.这意味着我们应该采取相同的编码惯例,风格指南和最佳实践. 首先,如果你是一个 javascript 新手,我建议您阅读 <24 JavaScript Best Practices for Beginners>, 这是一篇高质量的 javascript 教程,接触 jQuery 之前最好先阅读. 当你准备使用 jQuery,我强烈建议你遵循下面这些指南: 1. 缓存变量 DOM 遍历是昂贵的,所以尽量将会重用的元素缓存. 复制代码

  • jQuery 性能优化手册 推荐

    在twitter上发现了<jQuery Performance Rules>这篇文章, 简单的摘译了一下: 总是从ID选择器开始继承 在class前使用tag 将jquery对象缓存起来 掌握强大的链式操作 使用子查询 对直接的DOM操作进行限制 冒泡 消除无效查询 推迟到 $(window).load 压缩js 全面掌握jquery库 1. 总是从ID选择器开始继承 在jquery中最快的选择器是ID选择器. 因为它直接来自于Javascript的getElementById()方法. 复制

  • jQuery 性能优化指南(2)

    4,对直接的DOM操作进行限制 这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM . 这并不是一个jQuery最佳实践,但必须进行有效的JavaScript操作 .直接的DOM操作速度很慢. 例如,你想动态的创建一组列表元素,千万不要这样做,如下所示: var top_100_list = [...], // 假设这里是100个独一无二的字符串 $mylist = $("#mylist"); // jQuery 选择到 <ul> 元素 for (var i=0,

  • jQuery性能优化28条建议你值得借鉴

    jQuery性能优化28条建议 一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可以打印出来或者设为桌面背景. 一.选择器性能优化建议 1. 总是从#id选择器来继承 这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了. 复制代码 代码如下: $('#content').hide(); 或者从ID选择器继承来选

  • 提高jQuery性能优化的技巧

    下面把提高jQuery性能优化技巧给大家分享如下: 缓存变量 DOM遍历是昂贵的,所以尽量将会重用的元素缓存. 复制代码 代码如下: // 糟糕 h = $('#element').height(); $('#element').css('height',h-20); // 建议 $element = $('#element'); h = $element.height(); $element.css('height',h-20); 避免全局变量 jQuery与javascript一样,一般来说

  • jQuery 性能优化指南 (1)

    1,总是从ID选择器开始继承 在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法. 例如有一段HTML代码: 复制代码 代码如下: <div id="content"> <form method="post" action="#"> <h2>交通信号灯</h2> <ul id="traffic_light"&

随机推荐