很高兴看到越来越多的企业重视前端开发了，前端不再是网站开发人员的附属技能。回想我刚开始入行时，那时asp网站（非asp.net）盛行，80%的网站都是用asp来做的,一个网页可能就是一个asp文件，里面前端代码和后端代码混在一起。现在不同了，前后端分离，前端可以专注于展示了，不用太在意后端的实现。但是，因为前端发展太快，展示环境也复杂多变，需要前端开发者掌握更广的知识。
这篇杂谈，我打算从一个比较广的面(包含js,css,网络传输,html5等)，以化整为零为出发点，来和大家介绍一些前端优化的方法。（因为个人知识和经验有限，除了文中提到的几点，一定还有别的优化方法有化零为整的特性，欢迎大家一起补充哈,本文会不定期更新）
何为化零为整？通俗点说，就是我们将细碎的东西整合为一个整体，通过操作这个整体，也能达到逐个操作细碎东西的效果。比如，你给我四个苹果，我双手可以拿着到处走动；如果给我十个苹果，我全兜手上，走起路来可能会慢些了，因为要照顾苹果，怕掉了;但是，如果你再给我个袋子，我把十个苹果装里面，它们就成为一个整体，我就可以拎着到处跑了。
ok，说了这么一通，开始细数前端中需要化零为整的地方吧。
1.atlas/sprite assets/精灵图/雪碧图
这些都是对图集合的称呼，图集合就是在做图片资源的时候，将一些小的图片元素集中做到一张图片中。在使用时，通过一些参数，来显示大图集合中所需要那个图片原素。比如，需要这个大图的某个icon来做为div的背景，则除了将这个大图设为div的背景外，还需要更改背景图的位置（position）来显示具体某小图。
例：某网站的sprite assets如下：
2.事件委托
面试时，我经常问的一个问题，有一个列表页，页面结构是外面一个body， 里面有一万个子div，每个div里面有一些文字，这些文字都不相同。需求是，点击一个div，要求弹个alert框，将div里的文字显示出来。你会怎么做。
30%的人会用jquery来绑事件，认为看着简洁，应该效率高，如：$(body>div).click(……)  ，有20%的人会写原生的语句来遍历，给每个div添加点击事件，有10%的人回答，在页面滚动时，存下页面滚动的高度，在点击时，获取触发点在屏幕的y坐标，将y的坐标和页面滚动的高度相加，然后除以每个div的高度，就知道点了第几个元素，再将这个元素的内容弹出来。（或其它类似的做法）
回答出以上答案的面试者在这题会被扣分，正确答案是，只用给外面的元素（本题是body）添加点击事件，在点击时，可以获取到引发点击事件的源元素（如某div），将这个元素的文本内容弹出来即可。
3.长连接 keep alive
这点和后端有关系了，不光是前端的事了。大多数网页是用http方式来获取资源（如图片，样式表文件，js文件等），有部分服务器不会维持连接，来了个请求，就建立连接，然后输出内容，输出完后断开连接，再重新建立下个请求的连接和输出。如果一个网页需要请求一百个文件，服务器就要建立和断开一百次连接。每次建立和断开都需要时间（甚至比传输数据时间还长），无疑增加了页面的呈现时间。如果服务器启用了keep alive，不光减轻了服务器负担，也加快了页面打开时间。
如下图，我们可以看到，实际接收内容的时间(receiving)是很短的，大部分时间花在了等待（waiting）和阻塞(blocking)。
4.多dom合并
由于前端表现越来越丰富，页面上东西也越来越多，随之而来的问题是dom太多了，在做一些dom操作时，会带来性能问题。在dom非常多的情况下，我们有必要把dom进行合并，可以考虑把多个dom合并为少量几个，或在可以的情况下，使用canvas来展示。
如：有些需求会要求前端开发者做这种日期选择器
如果使用一个dom来装一个选项（如：1970），不考虑按钮，单独看日期选项的话，可能会需要44+12+31=87个dom，对于移动浏览器来说，dom越少越好。万一产品后来一想，除了日期，还要添加时分秒选项呢？这就需要44+12+31+24+60+60=231个dom了。但我们可以细想一下，如果把各字段（年、月、日）只用一个很高的容器（如div）来装，内容可以用换行符来换行，取值时通过一些算法来得到，是不是大幅缩小了dom数量？从87个dom变为3个dom。少了一个数量级。
5.websocket
很多网页有实时更新数据的要求,如证券类网站。为了避免页面刷新，会使用ajax来进行长轮询，每隔一段时间（如一秒钟）就连一次服务器取下数据。这样会造成大量的请求连接，不止给前端，也给后端带来了不小的压力。幸好html5给我们带来了websocket,网页能够和服务器保持长连接，通过长连接来维持数据的实时更新了。
6.css属性继承
css会继承父元素的属性，我们可以将一些通用的属性在父元素的css中定义，子元素通过继承来获取这些元素。在某些情况下，合理使用继承能较明显地缩小css文件的大小。
7.documentfragment
一个列表页，需要你往里面插入一千个dom，你怎么做？ 这是我经常问别人的一道题。
很多时候，你往页面中加一个dom，就会引起页面的重构。如果你使用遍历来逐一添加，每添加一次，页面都会重新渲染一次，这种做法会带来性能的下降。好的方式是把要添加的元素先缓存起来， 要添加时一次性添加。一般会使用documentfragment来进行缓存，还有些使用长的字符串（html代码串）来缓存。
8.多动画合并为一个
在做css3的动画时，如果需求中要求有多步骤的动画（如，将一个div沿y轴旋转30度，接着沿x轴旋转30度，再沿z轴旋转30度），我们可以将这些动画合并，使用animation的关键帧来将这些步骤隔离。省去多步操作dom的成本。
9.多文件压缩与合并
对js和css文件压缩，是前端缩小网络传输量的有效方式（压缩的做法一般是去除多余空格和换行，以及替换变量名或方法名。yui compressor是个不错的工具）
将多个小的js或css文件合并（merge）为一个大文件，这种做法可以大幅减少请示的次数。