jQuery 性能优化技巧
原文地址:jQuery 性能优化技巧
博客地址:http://www.extlight.com
一、使用最新版本 jQuery 类库
二、合理使用选择器
# 推荐使用
$("#id")
# 可以使用
$("p"),$("span")
# 可以使用
$(".class")
# 尽量避免
$("[attribute=value]")
# 尽量避免
$(":hidden")
三、使用缓存对象
场景:修改某个按钮的文本和颜色
# 不好的写法
$("#btn").text("重置");
$("#btn").css("color","red");
# 优化的写法
var $btn = $("#btn");
$btn.text("重置").css("color","red");
四、循环时减少对DOM的操作
场景:往 <ul> 中添加 <li> 菜单项
# 不好的写法
var $ul = $("#menu");
for(var i=0; i<6; i++) {
$ul.append("<li>菜单"+i+"</li>")
}
# 优化的写法
var $ul = $("#menu");
var html = "";
for(var i=0; i<6; i++) {
html += "<li>菜单"+i+"</li>";
}
$ul.append(html);
五、使用事件代理
场景:给 <ul> 里的所有 <li> 绑定点击变色事件
# 不好的写法
$("ul li").on("click",function() {
$(this).css("color","red");
});
# 优化的写法
$("ul li").on("click",function(e) {
var $obj = $(e.target);
$obj.css("color","red");
});
六、将代码转成 jQuery 插件
七、使用 join() 拼接字符串
第四点的案例中,代码还可以进行优化
var $ul = $("#menu");
var arr = [];
for(var i=0; i<6; i++) {
arr.push("<li>菜单"+i+"</li>");
}
$ul.append(arr.join("");
八、合理利用 HTML5 的 data 属性
使用 data-* 属性来嵌入自定义数据。
<div id="user" data-age="26" data-gender="男">张三</div>
var user = $("#user");
var age = user.data("age");
var gender = $("#user").data("gender");
九、尽量使用原生的 JS 方法
第五点的案例中,可以如下优化
$("ul li").on("click",function(e) {
var $obj = $(e.target);
$obj.get(0).style.color = "red";
});
十、压缩 JS 代码
如有更多优化技巧,后续补充......
jQuery 性能优化技巧的更多相关文章
- jQuery性能优化和技巧
jQuery性能优化 ①使用最新版本的jQuery类库 ②使用合适的选择器 ③缓存对象 ④循环时的DOM操作 ⑤数组方式使用jQuery对象 ⑥事件代理 ⑦将你的代码转化成jQuery插件 ⑧使用jo ...
- jQuery性能优化的28个建议
我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...
- jQuery:jQuery性能优化28条建议
http://www.xue5.com/WebDev/jQuery/671700.html 直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将 ...
- 28个jQuery性能优化的建议
我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...
- Java程序性能优化技巧
Java程序性能优化技巧 多线程.集合.网络编程.内存优化.缓冲..spring.设计模式.软件工程.编程思想 1.生成对象时,合理分配空间和大小new ArrayList(100); 2.优化for ...
- Python代码性能优化技巧
摘要:代码优化能够让程序运行更快,可以提高程序的执行效率等,对于一名软件开发人员来说,如何优化代码,从哪里入手进行优化?这些都是他们十分关心的问题.本文着重讲了如何优化Python代码,看完一定会让你 ...
- jQuery性能优化指南(转载)
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, ...
- Python 代码性能优化技巧(转)
原文:Python 代码性能优化技巧 Python 代码优化常见技巧 代码优化能够让程序运行更快,它是在不改变程序运行结果的情况下使得程序的运行效率更高,根据 80/20 原则,实现程序的重构.优化. ...
- Python 代码性能优化技巧
选择了脚本语言就要忍受其速度,这句话在某种程度上说明了 python 作为脚本的一个不足之处,那就是执行效率和性能不够理想,特别是在 performance 较差的机器上,因此有必要进行一定的代码优化 ...
随机推荐
- 数论基础算法总结(python版)
/* Author: wsnpyo Update Date: 2014-11-16 Algorithm: 快速幂/Fermat, Solovay_Stassen, Miller-Rabin素性检验/E ...
- Python中字符串、列表、元组、集合、字典中的一些知识,有些不太常见
————————笔记——————————# 字符串1. 字符串是不可变的.2. 字符串切片输出:`[start:end:step]`.使用`a[::-1]`倒序输出字符串.3. `str.split( ...
- apache shiro整合spring(一)
apache shiro整合spring 将shiro配置文件整合到spring体系中 方式一:直接在spring的配置文件中import shiro的配置文件 方式二:直接在web.xml中配置sh ...
- main函数的参数:argc和argv
程序一般是从main函数开始执行的,main函数标准格式: int main(int argc,char **argv) 其中argc是来自shell(或CMD)的参数的个数,argv是char型的二 ...
- jQuery Ajax同步参数导致浏览器假死怎么办
俗话说不作死就不会死,今天作死了一回,写了一个比较二逼的函数,遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下. 事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的 ...
- log4j2 输入日志到flume
最近想将服务的运行日志收集起来,首先了解到flume技术栈 采用flume方案定了之后有两种方式实现 1: 在应用中,log4j2直接发送日志信息到flume , 2: 通过监控log4j2 产生的日 ...
- jmeter的三种参数化
以FTP请求(用户.密码)为例:(其他都相同) 1.文件参数化 使用配置元件中的CSV Data Set Config 配置CSV Data Set Config: 文件中存储ftp登录的用户名和密码 ...
- 深入理解Hystrix之文档翻译
转载请标明出处: http://blog.csdn.net/forezp/article/details/75333088 本文出自方志朋的博客 什么是Hystrix 在分布式系统中,服务与服务之间依 ...
- 我也说说Emacs吧(1) - Emacs和Vi我们都学
好友幻神的<Emacs之魂>正在火热连载中,群里人起哄要给他捧捧场. 作为一个学习Emacs屡败屡战的用户,这个场还是值得捧一下的.至少我是买了HHKB键盘的... 从我的键盘说起 - 有 ...
- linux给一个文件夹开启权限
假如要给一个叫做xiaobang的文件夹权限,CD到这一级目录 chmod -R 777 xiaobang