speeding up your web site 前端性能优化

 

     关注网站前端性能不得不提到一篇文章,Best Practices for Speeding Up Your Web Site,他来自yahoo性能研究团队,文章列出了7类35条网站提速的最佳实践。

Yahoo的最佳实践

1,内容

减少HTTP请求、减少DNS查找、避免重定向、缓存Ajax、按需加载组件、预加载组件、减少DOM元素的数量、分离组件到不同的域名、尽量不使用iframe、避免404

2,服务器

使用CDN、启用浏览器缓存(添加Expires或Cache-Control、配置ETags)、启用Gzip压缩、尽早刷新缓冲区、Ajax使用GET请求方式、避免Image标签src属性为空

3,Cookie

减小Cookie大小、为一些组件使用一个无cookie的域名

4,Css

Css文件引用放在顶部、避免使用Css表达式、避免使用@import、避免使用滤镜

5,JavaScript

js文件引用放在底部、将js的css代码放到单独的文件而不是页面内、尽量缩小js和css文件、移除重复脚本、减少DOM的操作、灵活的处理事件

6,图片

优化图片、优化图片的合并、不要在html中缩放图片、要一个favicon.ico并且要小和可缓存

7,手机(移动互联网)

组件保持在25K以下、组件打包

Google的最佳实践

     而同样的在互联网叱咤风云的google也有一个类似的项目叫Make the Web Faster,口号相当响亮,格调很高,他们从另一个角度给出了相似的网站性能的最佳实践。

1,优化缓存

浏览器的缓存和代理服务器缓存

2,减少往返时间

减少DNS查找、减少重写向、避免坏的请求、合并外部js、合并外部css、使用css背景定位来合并图片、优化样式脚本的加载顺序、避免使用document.write、避免CSS的@import、优先采用异步的方式请求资源、使用多个域名以实现并行下载

3,减轻请求的负担

尽量减少请求携带的数据、为静态文件的使用一个无cookie的域名

4,减小输出的大小

启用压缩、移除无用的样式、最小化js、最小化css、最小化html、推迟脚本的加载、优化图片、衡量图片的缩放、从一个统一的URL中请求资源

4,优化浏览器的呈现

使用有效的CSS选择器、避免使用CSS表达式、CSS文件放到页面的head里、指定图片的尺寸、指定一个字符集

5,针对移动设备的优化

推迟js的解析、使登录页的重写向可缓存

试验

      再深入讨论这些规则之前,我们还是用实例来验证下这些规则最好。14 Rules for Faster-Loading Web Sites ,这个网站就从实验对这些规则进行验证。例如对于  Put Scripts at the Bottom 脚本放于页面底部  这一规则:就分别把脚本置于页面不同的位置进行试验,并且试图用其它的方法来解决位置不正确时带来的性能问题,最终得出结论。

辅助工具

     更让我们庆幸的是,yahoo和google都各自推出了自己的性能分析的工具:yslowpagespeed,它们都提供了firefox扩展,以firebug标签展示,它们分别按照自己的最佳实践给你当前访问网页的评级和优化建议,让我们直接清楚的得知自己的站点还能有些什么优化的空间。

 

接下来会分别深入讨论这些规则。

-----------------------------------------------

推荐个之前的文章:构建高性能站点概要,http://www.cnblogs.com/forcertain/archive/2012/08/07/2626847.html

posted @ 2012-11-10 19:02  for certain  阅读(1444)  评论(1编辑  收藏  举报