请高手优化此代码,功能已经实现,想改善页面运行速度,望赐教

Question

<script type="text/javascript">
$(document).ready(function() {     
            var data = {};
            $(".inpbot1").each(function (index, obj) {
            data[index] = $(this).val();
            showResult();
                $(obj).bind("blur", function () {
                    data[index] = $(this).val();
                    showResult();
                }).bind("keyup", function () {
                    var v = $(this).val();
                    $(this).val(v.replace(/[^\d\.]/g, '0'));
                });
            });//
            function showResult() {
                var r = 0;
                for (var i = 0; i < $(".inpbot1").length; i++) {
                    if (data[i]) {
                        r += parseFloat(data[i]);
                    }
                }
                $("#labAllResult").html(r);
                $.ajax({
                    type: "GET",
                    url: "DaXie.ashx",
                    data: "r=" + r,
                    success: function (msg) {
                        $("#Label1").html(msg);
                    }
                });
            }
            });  </script>
功能已经实现了,将页面中所有class相同的文本框值相加,如果其中某一个文本框值修改,总结果也自动显示新结果了.不过页面运行速度卡,此代码应该不和谐,望高手指点具体的代码怎么改?

Answer 1

能看到的2个地方1. 
i < $(".inpbot1").length; i++
避免这种代码，每次循环时候都会$()一次，东西是不变的，可以把length存起来放在前面2. 
bind("keyup", function () {
                    var v = $(this).val();
                    $(this).val(v.replace(/[^\d\.]/g, '0'));
                });
每次keyup时候会触发一系列操作，按键快的时候就会卡，没用过jquery，不知是否有函数缓冲的功能，看jq这么强大应该有
类似
bind("keyup", function () {}, {buffer: 200});
没有的话可以自己写一个

Answer 2

$() 是花时间的，所有能够拿到的东西就不要再拿一次，比如var v = $(this).val();//这里 $(this)已经拿到了，下面又拿一次
  $(this).val(v.replace(/[^\d\.]/g, '0'));可以改成var el = $(this);
v = el.val();
  el.val...性能都是这么一点点消耗掉的

Answer 3

谢谢,上午有人告诉我这句要修改,说+=不好，要改为数组的PUSH什么的,怎么改啊?if (data[i]) {
        r += parseFloat(data[i]);
        }

Answer 4

我告诉你的 这里你的代码不需要改 因为不是字符串的链接操作 
如果是字符串的链接操作 +=是要做6步事情的 所以我们用数组push代替+=操作 效率快的多
如何push？ 简单的说下 
var arr = [];
for(条件略){
  arr.push(值);
}
arr.join("");这是一个优化点 楼上的更是一个比较常见的优化点 还有其他的优化点 
楼主自己要动手查查资料 不能只靠别人 对吧 ^_^

Answer 5

<script type="text/javascript">
$(document).ready(function() {        
            var data = {},
            //缓存$(".inpbot1"),因为元素每次length都会重排一下渲染树，对性能影响很大，所以要把length缓存起来
                els = $(".inpbot1"),
             length = els.length;
            els.each(function (index, obj) {
             //缓存$(this),data
             var $this = $(this),
             //data多次用到，而它是一个全局变量，每次访问都要遍历多层作用域才找到，所以要缓存起来
             _data = data;
            _data[index] = $this.val();
            //showResult多次访问_data,以参数形式传入，在函数内作为局部变量使用,length同理
             showResult(_data, length);
                $this.bind("blur", function () {
                    _data[index] = $this.val();
                    showResult(_data, length);
                }).bind("keyup", function () {
                    var v = $this.val();
                    $this.val(v.replace(/[^\d\.]/g, '0'));
                });
            });
            function showResult(_data, _length) {
                var r = 0;                
                for (var i = 0; i < _length; i++) {
                 //缓存data[i]
                 var d = _data[i];
                 //现在已经没必要改成数组形式push了，因为很多浏览器都优化了字符串“+”的操作,push反而更慢，好像只有IE6用数组push才会快     
                    if (d) {
                        r += parseFloat(d);
                    }
                }
                //如果没一定顺序关系的话循环可以改成这样，i--为0时跳出  
                /*for (var i = length; i--;) {                
                 var d = _data[i];                
                    if (d) {
                        r += parseFloat(d);
                    }
                }*/
                $("#labAllResult").html(r);
                $.ajax({
                    type: "GET",
                    url: "DaXie.ashx",
                    data: "r=" + r,
                    success: function (msg) {
                        $("#Label1").html(msg);
                    }
                });
            }
            });  </script>

Answer 6

学习优化有本书很好《高性能JavaScript》,内容不多，但都很实用