1、通过浏览器缓存优化选择过程
在Web前端页面中,比较流行的是使用jQuery作为脚本语言,其可以通过id或者class选择一个标签对象,如果你一次又一次的选择相同的某个元素,可以在页面加载完成后一次性初始化,然后在核心内容中进行调用。以下对不同的初始化方式进行测试,以for循环模拟多次调用:
测试1:
$(function(){
var myList = $('#'+id);
console.time('create list');
for (i = 0; i < 1000; i++) {
<span style="white-space:pre"> </span> myList.val("This is list item ");
}
console.timeEnd('create list');
});
测试2:
$(function(){
console.time('create list');
for (i = 0; i < 1000; i++) {
var myList = $('#'+id);
myList.val("This is list item ");
}
console.timeEnd('create list');
});
测试1的运行时间大概是13ms而测试2的代码运行时间约为5.7ms,这是由于jQuery内部必须通过大量的步骤才可以实现选择操作。本例中测试2已经在多次使用被选择的标签之前进行初始化,简化了初始化过程。
2、jQuery方法链
jQuery方法链是指可以在一个已选择的对象上连续调用方法例如:
$('#myTable').find('.firstColumn').css('background','red');//调用find方法对table中样式firstColum的背景颜色进行修改
若希望还在此表格上进行操作,则需要调用
end()
方法即:
$('#myTable').find('.firstColumn').css('background','red').end().find('.lastColumn').css('background','blue');
写一个能够进行方法链式调用的自定义jQuery函数也很容易。你所做的就是要写个能修改元素并返回元素的函数。
代码如下:
$.fn.makeRed = function() {
return $(this).css('background', 'red');
}
$('#myTable').find('.firstColumn').makeRed().append('hello');
参考资料
http://www.open-open.com/lib/view/open1468455366095.html