Rumah >hujung hadapan web >html tutorial >【前端杂谈】细数前端优化的化零为整_html/css_WEB-ITnose
很高兴看到越来越多的企业重视前端开发了,前端不再是网站开发人员的附属技能。回想我刚开始入行时,那时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)为一个大文件,这种做法可以大幅减少请示的次数。