【前端杂谈】细数前端优化的化零为整

很高兴看到越来越多的企业重视前端开发了，前端不再是网站开发人员的附属技能。回想我刚开始入行时，那时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）为一个大文件，这种做法可以大幅减少请示的次数。

 

 本文是博主Arfei Zhang原创，欢迎转载。转载请注明转自博客园，并附上本文链接http://www.cnblogs.com/arfeizhang/p/optimization1.html  ，谢谢！