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 相关文章推荐
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
javascript填充默认头像方法
Feb 22 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
如何利用js在两个html窗口间通信
Apr 27 Javascript
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
详细介绍PHP应用提速面面观
2006/10/09 PHP
数据库中排序的对比及使用条件详解
2012/02/23 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
Angular2中监听数据更新的方法
2018/08/31 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
python实现大文本文件分割
2019/07/22 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
如何整合JQuery和Prototype
2014/01/31 面试题
大专毕业生自我鉴定
2013/11/21 职场文书
材料采购员岗位职责
2015/04/03 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
新手入门Mysql--概念
2021/06/18 MySQL