网站重构的8点建议 - _北北

标签: 网站 重构 | 发表时间:2014-03-06 11:19 | 作者:_北北
出处:

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

比如我们在一段代码内,多次使用document、window这样的对象,我们可以用局部变量替换他们。

var d = document,w = window;

原理:访问直接量和局部变量的速度快,相反,访问数组元素和对象成员相对较慢。

2.减少重绘与重排

重排:当页面布局和几何属性改变时候,需要重排,在重排后浏览器会重新绘制受到影响的部分到屏幕中,这个过程成为重绘。

以下操作会引发重排
·添加删除可见的DOM元素;

·元素位置、尺寸改变;

·文本变更;

·页面渲染器初始化;

·浏览器窗口尺寸改变。

而改变背景、文字颜色只会触发重绘。

我们可以通过如下三步避免重绘、重排:

(1)使元素脱离文档流→方法:隐藏元素

(2)对其应用所有改变→方法:应用修改

(3)把元素带回文档中→方法:重新显示

原理:因为隐藏的元素不会发生重绘、重排。

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

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

我们来拿糗事百科的一个升级来举例,之前的版本我们点赞时候,会触发一个异步请求给服务器,告诉服务器赞的数值应该加1等信息,然后服务器返回赞成功了,页面上赞的数量加1,这个过程慢时可能间隔数秒;之后做出的优化是,在用户点赞后立刻展现一个“赞+1”的动画,然后再给服务器发送异步请求,处理后续数据。

qiubaidemo

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

4.使用JSON 替换XML

这个无需多说,JSON用做数据传输,它的体积要比XML小很多。

5.压缩合并你的JS 与CSS

JS、CSS在线压缩工具: http://app.baidu.com/app/enter?appid=152856

另外你可以尝试用一些工具进行动态压缩,如:

Minify:  https://code.google.com/p/minify/downloads/list

6.避免使用CSS 表达式

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算。

所以,在非不得已,请避免使用CSS表达式。

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

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

8.使用事件委托

当页面中有大量元素需要绑定事件处理器的时候,我们不要这样做:

$(“#myul li”).click(function(){});

我们可以改用(jquery1.7+用on代替了delegate和live)

$(“#myul”).on(“click”,”li”,function(){});

原理:事件逐层冒泡并被父级捕获,只需要给外层元素绑定一个处理器,就可以触发所有子集事件,而不需要给每个自己元素都绑定处理器,这是一种资源的浪费。

希望以上经验能对你有所帮助,如果你想 了解更多关于高性能方面的知识,你可以尝试阅读大神zakas的《高性能Javascript》或者Steve souders的《高性能网站建设指南》

 

本文链接: http://www.cnblogs.com/babyisun/p/3584091.html,转载请注明。

相关 [网站 重构] 推荐:

网站重构的8点建议 - _北北

- - 博客园_首页
1.用局部变量替换多次使用的对象. 比如我们在一段代码内,多次使用document、window这样的对象,我们可以用局部变量替换他们. 原理:访问直接量和局部变量的速度快,相反,访问数组元素和对象成员相对较慢. 重排:当页面布局和几何属性改变时候,需要重排,在重排后浏览器会重新绘制受到影响的部分到屏幕中,这个过程成为重绘.

代码重构

- - ITeye博客
随着程序的演化,我们有必要重新思考早先的决策,并重写部分代码. 代码需要演化;它不是静态的事物. 重写、重做和重新架构代码合起来,称为重构.    当你遇到绊脚石  ---  代码不在合适,你注意到有两样东西其实应该合并或是其他任何对你来说是"错误"的东西  -------- . 如果代码具备以下特征,你都应该考虑重构代码:.

Sunny谈重构

- - CSDN博客架构设计推荐文章
       按照软件工程大神Martin Fowler的定义, 重构就是在不改变软件现有功能的基础上,通过调整程序代码改善软件的质量、性能,使其程序的设计模式和架构更趋合理,进而提高软件的可扩展性和可维护性. 这是重构的定义,简单来说就是不改变软件的功能,优化软件设计和代码,让软件更易于扩展和维护,当然也包括易于复用.

代码重构总结

- - 开源软件 - ITeye博客
重构:对软件内部结构的一种调整,目的是在不改变软件之可察行为前提下,提高其理解性,降低其修改成本. 创建一个新方法,命名以它做什么来命名,而不是怎么做来命名. 如果只是简单的委托,可以将方法内联. 被子类继承的方法不能内联. 如果一个临时变量只被简单的表达式赋值一次,就可以将它内联. 将这个临时变量申明为final.

代码坏味道——重构

- - CSDN博客推荐文章
1.    Duplicated Code(重复的代码). 臭味行列中首当其冲的就是Duplicated Code. 如果你在一个以上的地点看到相同的程序结构,那么当可肯定:设法将它们合而为一,程序会变得更好. 最单纯的Duplicated Code就是[同一个class内的两个函数含有相同表达式(expression)].

【外刊IT评论网】什么是重构,什么不是重构

- - 外刊IT评论网
  有时候,会有程序员跑到我这里说他们不喜欢某个东西的设计,“我们需要给它来个全面的重构”,来纠正里面的错误.   重构(Refactoring)这个词最初由Martin Fowler 和 Kent Beck给下的定义,它是. 一种修改,使软件的内部结构更容易理解,在不改变软件的可见行为方式前提下使软件更容易变更…它是一种有节制的整理代码、使bug产生几率最小化的方法.

网站推荐:IFTTT(if this then that)

- 小皮球香蕉梨 - 有意思吧
这是一个神奇的网站,比某电视上天天放的那个广告要神奇许多. 就像它的域名 ifttt.com 一样,虽然丑却十分个性. 昨天晚上,ifttt.com 在 Twitter 被瞬间引爆,每个被邀请的人都会再拥有5个邀请名额,源源不断的邀请让 Geek 很兴奋. 那么,ifttt 到底是什么呢. 这是一个条件触发网站,当 A 条件触发时,自动激发 B 条件发生.

Facebook 网站架构

- - idea's blog
我收集到一些文章和视频, 可以带你窥探 Facebook 的架构. Facebook 承载了几十亿的用户, 它的架构(包括思想和实现)是非常值得参考的. 当然, 你要小心不要照搬 Facebook 的每一字一句, 因为任何思想和实现都是有自己的应用场景的.. Google Talk 界面开发分析. 使用Python POST任意的HTTP数据以及使用Cookie.

重构代码的7个阶段

- 风子 - 酷壳 - CoolShell.cn
你曾去想重构一个很老的模块,但是你只看了一眼你就恶心极了. 文档,奇怪的函数和类的命名,等等,整个模块就像一个带着脚镣的衣衫褴褛的人,虽然能走,但是其已经让人感到很不舒服. 面对这种情况,真正的程序员会是不会认输的,他们会接受挑战认真分析,那怕重写也在所不惜. 最终那个模块会被他们重构,就像以前和大家介绍过的那些令人销魂的编程方式中的屠宰式编程一样.

用Mikado方法重构遗留软件

- - InfoQ cn
在敏捷印度2012的一次研讨会上, Daniel Brolund介绍了 Mikado方法. 此方法主张敏捷团队在面临低质的遗留代码时,采用简单的方法,分成小部分逐步完成重构. 通常,当你想在遗留应用程序中做个简单的改动时,经常会有某些事情出错而使这个改动无法执行——如编译出错、验收测试失败(如果有验收测试.