论坛风格切换
正版合作和侵权请联系 sd173@foxmail.com
 
  • 帖子
  • 日志
  • 用户
  • 版块
  • 群组
帖子
购买邀请后未收到邀请联系sdbeta@qq.com
  • 1556阅读
  • 0回复

[求助-系统问题]遵循web标准 网页前端的3类优化 [复制链接]

上一主题 下一主题
离线风晨
 

发帖
2652
今日发帖
最后登录
2018-03-03
只看楼主 倒序阅读 使用道具 楼主  发表于: 2009-11-21 09:37:32


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

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

  前端性能优化和web标准有什么关系,接着第一篇 悟道web标准——统一思想,遵循标准 ,这是对你遵循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个数,减低浏览器解析压力。

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

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

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

  还有小图片的repeat背景会提高浏览器的CPU占用。

  合理的DOM排序,把重要的内容代码前置,优先加载。

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

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

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

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