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 相关文章推荐
javascript 对象比较实现代码
Apr 27 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 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
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
Python 自动补全(vim)
2014/11/30 Python
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
详解python3中的真值测试
2018/08/13 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
幼儿园运动会加油词
2014/02/14 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书