标签:style blog color io ar 使用 java for sp
1、使用最新版本的jQuery类库
2、使用合适的选择器
(1) $("#id"):定位dom元素 提高性能最佳的方式
建议从最近的ID元素开始往下搜索:$("#content").find("div");
(2) $("p"),$("div"):性能也不错,它会调用本地的document.getElementsByTagName()来调用
(3) $(".class"):对于较早版本的浏览器性能不好,它会遍历节点查找。而对于ie9后的浏览器,它会调用本地的document.getElementsByClassName();
(4) $("[attribute=value]"):此方法性能不是太好,虽然很多现代浏览器支持querySelectorAll(),但是不同浏览器的性能不同,建议开发中尽量避免这种对性能的伤害
(4) $(":hidden"):建议尽量不要使用
3、缓存对象
可能经常会这样写:
$("#id input:hidden").show();
$("#id input:hidden").val("aa");
这样,每执行一行代码,都会查找dom创建一个$("#id input:hidden")对象
比较好的方式是:
var $dom = $("#id input:hidden");//缓存变量
$dom.show();
$dom.val("aa");
如果使用链式,更简洁:
$("#id input:hidden").show().val("aa");
记住:永远不要把相同的选择器在代码里出现多次
4、循环时的DOM操作
循环时应尽量少的进行dom操作
下面这个方式就不是太好:
var top_100_list = [...]; $ul = $("#myUl"); for(var i = 0;i<top_100_list.length;i++){ $ul.append("<li>"+top_100_list[i]+"</li>"); }
更好的方式尽量减少dom操作,这里应该将整个元素字符串在插入DOM之前全部创建好,修改代码如下:
var top_100_list = [...]; $ul = $("#myUl"); var myLi = ""; for(var i = 0;i<top_100_list.length;i++){ myLi += "<li>"+top_100_list[i]+"</li>"; } $ul.append(myLi);
5、数组方式使用jQuery对象
jquery选择器获取的jquery对象,类似一个数组。建议使用for或者while循环获取,代码更快
注意:jquery对象不会报错,可以使用length属性判断对象是否存在。
6、事件代理
$("#myTable").click(function(){
var $clicked = $(e.target);
$clicked.css("background","red");
});
7、将代码转化成jquery插件
如果每次都需要花一段时间去开发类似的jquery代码,那么可以考虑将代码变成插件
8、使用join()来拼接字符串
9、合理利用html5的Data属性
10、尽量使用原生的javaScript代码
11、压缩JavaScript
标签:style blog color io ar 使用 java for sp
原文地址:http://www.cnblogs.com/zhangyanlei183/p/4042576.html