网站设计前端攻略系列(一)：前端各种优化

　　还有一个小时才到2012，那还能有点时间写点吐槽的东西，嘿嘿...2011年12月绝对是本人工作以来压力最大的一个月，已经忙到睡觉时间少了，业余看书时间少了，身体开始报警了，肩膀上的责任压的我实在喘不过气...作为一个普通的北漂，在北京类似我这样的人海的去了，尤其是在咱们这个行业。

　　我非常热爱生活，每分钟都无比珍贵;我热爱我现在所做的一切，哪怕确实让我精疲力尽(所以写博客暂时被我当成减压的方法)。

　　在我看来生活就是应该这样，既然我们在投胎的时候选择的生存模式or困难模式，那么不管发生什么困难都是意料之中。所以我在这不是想要表达自己的抱怨，而是想提醒自己和大家 “ 再忙再累也不要忘记自己的梦想和目标 ”。

　　突然想起个例子不吐不快，关于我们80后应该都玩过的超级玛丽(mario)。不管你有多少生命多少金币，说到底都是浮云，游戏中你会碰到无数的敌人(乌龟、飞鱼、食人花...)，遇到无数的艰险(一个接一个的坑、下水道、火海...)，可是想要通关只有一个方法，那就是救到公主，这就是目标。

　　If you want to live a happy life, tie it to a goal. Not to people or things.

　　如果你想过得快乐，那就把生活和目标结合在一起，而不是来自他人或物质。

　　许久才出来冒一次泡，所以难免吐槽一下，不喜欢以上那段的就当看个热闹，下面咱们开始正题。

　　作为本人2011年的收尾文章，就来个总结性质的吧，^_^...最近一直有给新同学做前端方面的培训，也有去参与公司前端的招聘，所以把自己资料库里面很多高效且有用的知识做了些规整分类，然后再分享一篇关于前端优化方面的总结。而且春节一过就又是招聘的高峰期了，在校的、跳槽的、浮躁的都开始进入面试的大军，前端优化也是前端面试一般会问到的东西，所以希望能对朋友们有用。

　　前端性能优化

　　1.请减少HTTP请求

　　基本原理：

　　在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。

　　一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。

　　而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。

　　网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以，请减少HTTP请求。

　　解决办法：

　　合并图片(css sprites)，合并CSS和JS文件;图片较多的页面也可以使用 lazyLoad 等技术进行优化。

　　2.请正确理解 Repaint 和 Reflow

　　注：Repaint 和 Reflow 也就是重绘和重排，请允许我在这卖弄下我有限认识的那么几个英语单词...囧

　　基本原理：

　　Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。

　　Reflow(重排)就是DOM的变化影响到了元素的几何属性(宽和高)，浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。

　　减少性能影响的办法：

　　上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式;　有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局;如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

　　总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。

　　3.请减少对DOM的操作

　　基本原理：

　　对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。

　　天生就慢。在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个岛屿，两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费，而访问的次数