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 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
移动端界面的适配
Jan 11 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 Javascript
vue 图片裁剪上传组件的实现
Nov 12 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批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
试用php中oci8扩展
2015/06/18 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
详解js类型判断
2018/05/22 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
Python LMDB库的使用示例
2021/02/14 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
金士达面试非笔试
2012/03/14 面试题
外语专业毕业生个人的自荐信
2013/11/19 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
法律顾问服务方案
2014/05/15 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
校长师德表现自我评价
2015/03/05 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
Python3接口性能测试实例代码
2021/06/20 Python
cypress测试本地web应用
2022/06/01 Javascript