JavaScript优化网络性能的个人笔记

上期答疑

function add() {
    // 第一次执行时，定义一个数组专门用来存储所有的参数
    var _args = Array.prototype.slice.call(arguments);
	// 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
    var _adder = function() {
        _args.push(...arguments);
        return _adder;
    };
	// 利用toString隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
    _adder.toString = function () {
        return _args.reduce(function (a, b) {
            return a + b;
        });
    }
    return _adder;
}

一、网络性能

过多Dom操作，资源加载等耗费性能，会导致界面卡顿。

这里通过一个例子，点击一个button实现input加1.
如果没有限制，才用某些连点器方法，是以实现一秒n次。而像淘宝等交互页面，如果不限制，容易导致页面崩溃。

var int = document.getElementsByTagName('input')[0];
var btn = document.getElementsByTagName('btn')[0];
function throttle(handle,wait){//这里设置限制时间
    var lastTime = 0;
    return function (e){
    	var nowTime = new Date().getTime();
    	if(nowTime - lastTime > wait){//初始nowTime很大，能进入判断
        	handle.apply(this,arguments);//return后调用者指向btn，arguments为事件对象
        	lastTime = nowTime;//将上次点击时间赋值
    	}
    }
};
function add(e){
    int.innerText = parseInt(int.innerText)+1;
};
btn.onclick = throttle(add,1000);