Jquery性能优化详解


Posted in Javascript onMay 15, 2014

寻寻觅觅,觅觅寻寻终于找到了一些关于jquery性能优化的文章,小编果断收藏当然不能忘了加上自己的一些总结及理解。

首先,之前文章中的jquery链式操作就是jquery性能优化方式中的一种,具体实现及优势在这里就不重复了哈。其次,jquery的优化与web优化中的某些方法是一样的。

a.压缩js。使用代码压缩技术,减小文件体积。(使用jsmin、YUI Compressor等)。

b. 事件默认是向上冒泡的,发生在子节点中的事件,可以由父节点来处理。把事件注册上提到父节点上,这 样就不需要为每个子节点注册事件监听.

c.利用缓存,当要多次使用某个jquery对象时,可以将jquery对象缓存到变量里。

var nodeTd = $("table td");
var $cj = $("#cj");
$cj.on("click",function(){
    $cj.css("color","blue");})

jquery结果缓存,如果需要将jquery结果对象在程序中的其他地方使用,或者function会多次执行,那么就可以将其存放到一变量中。

d.尽量从id选择器来继承。因为id的唯一性,id选择是jquery选择一个元素最快的方法了。

$("#firstd").slideDown(500);
$("#firstd img").slideUp(500);//利用id选择器继承来选择多个元素

e.使用子查询

  zhuye.on("swiperight","#data li",function(){
            $(this).find(".delete").hide();
        });//swiperight——看jquery-mobile  api内容内容

f.采用find(),儿不使用上下文查找,.find()函数更快速些,在上面的e中已有使用。

g.采用jquery的内部函数data()来存储状态(这种性能优化方法在百度时第一次见到,例子也暂直接引用他的吧)。

$('#head').data('name', 'value');
// 之后在你的应用中调用:
$('#head').data('name');

h.最后,使用新版本的 jQuery及简化jquery代码。

$(document).ready(function (){
});
$(function (){
});
Javascript 相关文章推荐
固定背景实现的背景滚动特效示例分享
May 19 Javascript
$("").click与onclick的区别示例介绍
Sep 25 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
js生成随机数的方法实例
Oct 16 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 #Javascript
Javascript小技巧之生成html元素
May 15 #Javascript
javascript屏蔽右键代码
May 15 #Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 #Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 #Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 #Javascript
jquery-syntax动态语法着色示例代码
May 14 #Javascript
You might like
phpfans留言版用到的install.php
2007/01/04 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
python字典多条件排序方法实例
2014/06/30 Python
Python的另外几种语言实现
2015/01/29 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
应届生英语教师求职信
2013/11/05 职场文书
大学新闻系求职信
2014/06/03 职场文书
五一促销活动总结
2014/07/01 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
考研英语复习计划
2015/01/19 职场文书
团结友爱主题班会
2015/08/13 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python