IT圈子，ITBBB.COM

这些建议来自IT-北北报[itbbb.com]

• 1.用局部变量替换多次使用的对象

比如我们在一段代码内，多次使用document、window这样的对象，我们可以用局部变量替换他们。 var d = document,w = window; 原理：访问直接量和局部变量的速度快，相反，访问数组元素和对象成员相对较慢。

1. 2.减少重绘与重排

重排：当页面布局和几何属性改变时候，需要重排，在重排后浏览器会重新绘制受到影响的部分到屏幕中，这个过程成为重绘。
以下操作会引发重排
·添加删除可见的DOM元素；
·元素位置、尺寸改变；
·文本变更；
·页面渲染器初始化；
·浏览器窗口尺寸改变。
而改变背景、文字颜色只会触发重绘。
我们可以通过如下三步避免重绘、重排：
(1)使元素脱离文档流→方法：隐藏元素
(2)对其应用所有改变→方法：应用修改
(3)把元素带回文档中→方法：重新显示 原理：因为隐藏的元素不会发生重绘、重排。

1. 3.打造快速响应的用户界面

不要让用户等太久，那么多久算久，可用性专家Jakob Nielsen的《可用性工程》中提高，响应用户的时间最好不要超过100毫秒。

也就是每次按钮点击要给用户反馈，即使服务器端还没有返回结果，前端也要先给用户反馈，最常见的在表单提交过程中，当用户点击了提交，要弹出提示“玩命提交中…”，同时禁用按钮，待到服务端返回提交成功，再弹出提示“提交成功”，释放按钮。

这个优化给用户的感觉就是更快了，用户的动作得到了快速反馈，这无疑是个进步，所以我们要尽可能快的对用户操作做出反应。

1. 6.避免使用CSS表达式

background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ); 表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算。 所以，在非不得已，请避免使用CSS表达式。

1. 7.不要使用for-in循环遍历数组元素

原理：for-in每次迭代操作会同时搜索实例或原型属性，因此，它比while和for会产生更多的开销。

1. 8.使用事件委托

当页面中有大量元素需要绑定事件处理器的时候，我们不要这样做： $(“#myul li”).click(function(){}); 我们可以改用（jquery1.7+用on代替了delegate和live） $(“#myul”).on(“click”,”li”,function(){}); 原理：事件逐层冒泡并被父级捕获，只需要给外层元素绑定一个处理器，就可以触发所有子集事件，而不需要给每个自己元素都绑定处理器，这是一种资源的浪费。
希望以上经验能对你有所帮助，如果你想了解更多关于高性能方面的知识，你可以尝试阅读大神zakas的《高性能Javascript》或者Steve souders的《高性能网站建设指南》

N年前我的导师说，“写代码真的需要天赋。”那我们就从一段代码开始。 –IT-北北报[itbbb.com] 命题：取两个数中较大的一个

function GetMax(a,b){ var result=0; if(a>b){ result=a; }else{ result=b; } return result; }

看完这段代码，我就想起了学生时代的老师在课堂上讲课的样子，教科书般的标准，毕业后怎么看这代码怎么难受，于是就产生了第二段代码。

function GetMax(a,b){ if(a>b) return a; return b; }

这个看上去貌似舒服多了，但是我觉得它还长怎么办？人类的智慧总是被逼出来的，总会想出办法，于是产生了第三段代码。

function GetMax(a,b){ return a>b?a:b; “)

4． 把某个元素放在屏幕中间

jQuery.fn.center = function () { this.css(‘position’,'absolute’); this.css(‘top’, ( $(window).height() – this.height() ) / +$(window).scrollTop() + ‘px’); this.css(‘left’, ( $(window).width() – this.width() ) / 2+$(window).scrollLeft() + ‘px’); return this; } //这样来使用上面的函数： $(element).center();

5． 在jQuery中如何使用.siblings()来选择同辈元素

$(‘#nav li’).click(function(){ $(‘#nav li’).removeClass(‘active’); $(this).addClass(‘active’); }); //替代做法是 $(‘#nav li’).click(function(){ $(this).addClass(‘active’).siblings().removeClass(‘active’); });

以上代码抛砖引玉，希望大家能在精简代码的道路上可以早日入道，写出的每一句代码都变成高质量的，优雅的，完美的……   如果你想了解更多关于高性能方面的知识，你可以尝试阅读大神zakas的《高性能Javascript》或者Steve souders的《高性能网站建设指南》