JQuery教学之性能优化


Posted in Javascript onMay 14, 2014

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的不断被使用,越来越多的优化方法会被发现。

Javascript 相关文章推荐
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 #Javascript
javascript 中that的含义示例介绍
May 14 #Javascript
table insertRow、deleteRow定义和用法总结
May 14 #Javascript
jQuery 中国省市两级联动选择附图
May 14 #Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 #Javascript
js实现图片拖动改变顺序附图
May 13 #Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 #Javascript
You might like
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
Opacity.js
2007/01/22 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
Python函数中不定长参数的写法
2019/02/13 Python
Python循环结构的应用场景详解
2019/07/11 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
python计算n的阶乘的方法代码
2019/10/25 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
捐书活动总结
2014/05/04 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
委托证明范本
2014/11/25 职场文书
文言文辞职信
2015/02/28 职场文书
幼儿园教师求职信
2015/03/20 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
团拜会主持词
2015/07/04 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
Django模型层实现多表关系创建和多表操作
2021/07/21 Python