悟道web标准:前端性能优化

2010年08月09日 17:20蓝色理想 标签:WEB 

前端性能优化完全是一个技术话题,但是对于项目的用户体验有非常大的影响,如果你的网站打开要等待三五秒或者等到浏览器提示无法连接,那网站哪来的流量,哪来的品牌影响和用户忠诚度,挣钱就算了。

前端性能优化完全是一个技术话题,但是对于项目的用户体验有非常大的影响,如果你的网站打开要等待三五秒或者等到浏览器提示无法连接,那网站哪来的流量,哪来的品牌影响和用户忠诚度,挣钱就算了。

3s,作为判断一个用户忍受你网站速度的限度,如果超过3s,用户已经对这个网站产生了负面的抵触心理。

前端性能优化和web标准有什么关系,接着第一篇 悟道web标准——统一思想,遵循标准 ,这是对你遵循web标准的一个补偿或者是对标准的一个认可。

引用:

落后的页面工程师体系,美工代劳的页面代码,唯独IE才能浏览的页面代码,不需要写代码用图形工具直接导出的页面代码,大量的流量消耗的页面代码,速度慢的像蜗牛的页面代码,程序员看到就头大发麻的页面代码,每次改版修改都要打动干戈,重复产生的页面代码,一种让页面工程师和民工一样的页面代码。

我们当然要革命它,取代他,创造全新的页面工程师体系和页面质量,独立的页面工程师完成的页面代码,跨越平台的页面代码,只要能解析页面的设备都能够访问和浏览,手写的页面代码,整齐划一,层次分明,最低流量消耗的页面代码,程序员喜欢的页面代码,访问速度超快的页面代码,改版可重复利用的页面代码,让页面工程师抬起头来,骄傲的称自己是工程师,书写的也是计算机代码的页面代码。

前端优化正好给Web标准提供了一个检验的机会,用“实践是检验真理的唯一标准”来判断标准化到底好不好,对不对。

前端性能优化了解yahoo性能优化N条的同学应该不会陌生,安装一个YSlow评分并对照着优化就可以了,但是有没有想过为什么要这么做就可以提升速度,这些与Web标准有没有某种关联或者因果呢。

我把这些个条目分成三类,服务端运算优化,传输优化,客户端运算优化:

第一类,服务器端优化

服务器端就是对你的网站的动态语言的执行(asp,php),数据库查询,存储等速度,总的来说就是输入/输出的运算。这些跟前端没关系,但是影响着前端。YSlow里面没有,鬼知道你网站的服务器性能如何,看不出来,就自行优化服务器性能,数据库性能,多买点服务器扩容。

yslow有一条尽早刷新 Buffer (Flush the Buffer Early),貌似是不等html完成生成就传输。

提高域名的DNS解析速度。减少DNS的解析个数。这个不好归类,暂时放到这里吧。

第二类,传输优化

这类是大头,很烦,首先是字节,字节越小越好,怎么能小下来,最有效的方式就是google的方案,把首页做的极其精简,图片,html,静态文件都很小,再就是缓存,把文件放到本地缓存区读取。还有http请求数,减少文件传输中的排队等待。

字节优化: 减少冗余html,结构化,语义化的html来实现,行为,表现,结构分离,独立的html文件将变得很小。

压缩文本文件,css,html,js去掉注释、空格、换行等。

降低图片字节,选择合适的图片类型,png-8是一个好东西,再用工具将图片进行压缩去掉,比如png-8的压缩工具。用合适的图片尺寸,不要把大图控制一下宽高就用上了。

gzip压缩一下,减小服务器端传输到客户端时候的字节。

flash文件和flash+xml的动态flash也减小字节

缓存: 服务器端配置一下,提高缓存的命中率和把不经常修改的文件缓存了。 Add Expires headers、Etags、ajax使用get方式便于缓存。

把能分离出来的css,js分离成外部文件便于缓存。 使flash和xml文件可缓存。

打通不同运营商的限制

CDN提高不同类型运营商的网络传输速度,电信,网通,铁通,教育网统统搞定。

请求数: 减少文件请求数,能合并到一起的合并一下,css,js,图片等,减小排队等待和服务器端开销。

分域提高同时加载数,优化排队等待。

避免404无效请求数。 避免重定向。

延迟加载和预载: 把暂时不用的文件等主体页面加载完了再加载,把用户稍后要看浏览的内容预先加载进来,相册浏览就是很好的例子,先用小图片放大再把大图展示出来,看本张图片时把下一张预载进来等等。

第三类:客户端优化

讨厌的IE的滤镜和CSS expressions少用,小心把浏览器搞挂,CUP 100%死机。 CSS放到前面,js能放到后面的放在代码后面。将页面尽早展示给用户。 减少iframe的使用,避免CPU扛不住。 减少DOM个数,减低浏览器解析压力。

使用 《link》 而不是@importChoose 《link》 over @import,在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。而这与第一条相违背。

提高js的执行效率,话题太大不提了

缩小 Cookie,针对 Web 组件使用域名无关性的 Cookie (Use Cookie-free Domains for Components)

还有小图片的repeat背景会提高浏览器的CPU占用。 合理的DOM排序,把重要的内容代码前置,优先加载。

再就是些没对号入座的雅虎性能优化的条目。

至此可以检验到页面工程师不是盖的,需要对代码、文件,http协议,缓存,服务器等精准的学习和控制,达到提供用户最最基本的体验——访问速度的体验。

Web标准的分离思想和结构化语义化html促成了以上很多条的实施,这是美工时代所不能比拟的。 

本文摘自:蓝色理想,原文地址:http://www.blueidea.com/tech/web/2009/7204.asp

7条评论

  • 确实很棒

  • 你的服务器是哪里的啊!介绍下啊!***:693699245

  • 网站很舒服。

  • 这个页面让人看着 很舒服,文章写的一级棒哦。

  • 所得法法师的法

  • 这些文章真的非常好!

  • jiuzhaigou123@163.com