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 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 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项目应该注意的几点事项分享
2013/12/20 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
php实现算术验证码功能
2018/12/05 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
wxPython学习之主框架实例
2014/09/28 Python
python实现矩阵乘法的方法
2015/06/28 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
python的setattr函数实例用法
2020/12/16 Python
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
学生保证书范文
2014/04/28 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
校园新闻稿范文
2015/07/18 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
教师读书活动心得体会
2016/01/14 职场文书
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
利用js实现简单开关灯代码
2021/11/23 Javascript
MySQL的索引你了解吗
2022/03/13 MySQL