点击这里给我发消息 点击这里给我发消息

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

添加时间:2009-12-24
    相关阅读: 技术 方案 页面 数据库 网络 程序 HTML

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

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请求数,减少文件传输中的排队等待。

字节优化

  1. 减少冗余html,结构化,语义化的html来实现,行为,表现,结构分离,独立的html文件将变得很小。
  2. 压缩文本文件,css,html,js去掉注释、空格、换行等。
  3. 降低图片字节,选择合适的图片类型,png-8是一个好东西,再用工具将图片进行压缩去掉,比如png-8的压缩工具。用合适的图片尺寸,不要把大图控制一下宽高就用上了。
  4. gzip压缩一下,减小服务器端传输到客户端时候的字节。
  5. flash文件和flash+xml的动态flash也减小字节

缓存
服务器端配置一下,提高缓存的命中率和把不经常修改的文件缓存了。
Add Expires headers、Etags、ajax使用get方式便于缓存。
把能分离出来的css,js分离成外部文件便于缓存。
使flash和xml文件可缓存。
打通不同运营商的限制
CDN提高不同类型运营商的网络传输速度,电信,网通,铁通,教育网统统搞定。

请求数
减少文件请求数,能合并到一起的合并一下,css,js,图片等,减小排队等待和服务器端开销。
分域提高同时加载数,优化排队等待。
避免404无效请求数。
避免重定向。

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

第三类:客户端优化

  1. 讨厌的IE的滤镜和CSS expressions少用,小心把浏览器搞挂,CUP 100%死机。
  2. CSS放到前面,js能放到后面的放在代码后面。将页面尽早展示给用户。
  3. 减少iframe的使用,避免CPU扛不住。
  4. 减少DOM个数,减低浏览器解析压力。
  5. 使用 <link> 而不是@importChoose <link> over @import,在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。而这与第一条相违背。
  6. 提高js的执行效率,话题太大不提了
  7. 缩小 Cookie,针对 Web 组件使用域名无关性的 Cookie (Use Cookie-free Domains for Components)
  8. 还有小图片的repeat背景会提高浏览器的CPU占用。
  9. 合理的DOM排序,把重要的内容代码前置,优先加载。

再就是些没对号入座的雅虎性能优化的条目。至此可以检验到页面工程师不是盖的,需要对代码、文件,http协议,缓存,服务器等精准的学习和控制,达到提供用户最最基本的体验——访问速度的体验。

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

有什么不对和补充的,欢迎回帖提示

本文作者:未知
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册