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都各自推出了自己的性能分析的工具：yslow和pagespeed，它们都提供了firefox扩展，以firebug标签展示，它们分别按照自己的最佳实践给你当前访问网页的评级和优化建议，让我们直接清楚的得知自己的站点还能有些什么优化的空间。

 

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

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

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

 

分类:  网站