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阻止冒泡事件使用模拟事件
Sep 06 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
鼠标左键单击冲突的问题解决方法(防止冒泡)
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函数
2008/10/03 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
js验证表单大全
2006/11/25 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
Python中一般处理中文的几种方法
2019/03/06 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
P/Invoke是什么
2015/07/31 面试题
医院实习介绍信
2014/01/12 职场文书
难忘的一天教学反思
2014/04/30 职场文书
安全生产月演讲稿
2014/05/09 职场文书
保护水资源的标语
2014/06/17 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
年终工作总结范文
2019/06/20 职场文书