还有一个小时才到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请求的流程简述：如在阅读器中输入"xxxxxx"并按下回车，阅读器再与这个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的影响范围。