js小程序写法优化

(function(){
	var gcld_but = document.getElementById("gcld_but"),
			gcld_but_li = gcld_but.getElementsByTagName("li"),
			gcld_box = document.getElementById("gcld_box"),
			close_btn = document.getElementById("close_btn"),
			gcld_btn = document.getElementById("gcld_btn"),
			box = document.getElementById("box"),
			mask = document.getElementById("mask"),
			len = gcld_but_li.length,
			gcld_but_a,
			i,
			s_height = document.documentElement.scrollHeight||document.body.scrollHeight;
			o_height = null,
			o_width = null,
			on = 0; ------------------------>>>>>>>>>>>>>>>>>>>>>变量尽量写在开头，防止滚动时候每次执行函数就取DOM元素，浪费性能。 

	mask.style.height = s_height+"px";

	/*水平垂直居中函数*/
	function centered_box(){
		var  s_top = document.body.scrollTop||document.documentElement.scrollTop,
			 c_height = document.documentElement.clientHeight||document.body.clientHeight,
			 c_width = document.documentElement.clientWidth||document.body.clientWidth,
			left,
			top;

		if( !o_height ){------------------------------>>>>>>>>>>>>>>>>>>>取一次DOM元素后放在变量里（页面不关闭就一直存在），下次执行函数就不用取了。
			o_height = box.offsetHeight;
			o_width = box.offsetWidth;------------------->>>>>>>>>>>>>>>>有些浏览器在元素display:none时取不到宽高，点击按钮显示该元素后再执行函数，所以写在函数里面一定能取到。
		}

		left = (c_width - o_width)/2 + "px";
		top = (c_height/2 - o_height/2 +s_top) + "px";

		box.style.left = left;
		box.style.top = top;
	}

	/*点击打开弹窗*/
	for(i=0; i<len; i++){
		gcld_but_a = gcld_but_li[i].getElementsByTagName("a")[0];
		gcld_but_a.onclick = function(){
			gcld_box.style.display = "block";
			on = 1;-------------------->>>>>>>>>>>>>>>>>>>>>>>加个开关，确保只让点击的时候执行弹窗函数。
			centered_box();
		}
	}

	/*关闭弹窗*/
	close_btn.onclick = gcld_btn.onclick = function(){
		gcld_box.style.display = "none";
		on = 0;
	};

	window.onscroll = window.onresize = function(){
		if(on){
			centered_box();
		}
	};

})();

总结：1：定义的变量尽量写在程序的上方----规范
　　　2：（从执行流的角度）功能实现后----（从性能的角度）对程序进行优化。
　　　3：性能优化 
　　　　　　1、防止重复获取DOM元素
　　　　　　2、防止重复执行代码函数
　　　　　　3、写法考虑兼容性