14条规则

1.减少Http请求

  • 使用图片地图
  • 使用CSS Sprites
  • 合并JS和CSS文件

这个是由于浏览器对同一个host有并行下载的限制,http请求越多,总体下载速度越慢

2.使用CDN(内容发布网络):当页面中有很多资源的时候,可以从不同的服务中去读取,同时可以提高并行下载速度

3.添加http Expires头:为图片视频之类很少改变的资源设置长的Expires时间将直接减少http请求

  • 如果资源设置了Expires头为将来的某个时间,下次访问时候浏览器发现资源还没有过期,会直接从缓存中读取,不会再次产生http请求

另外一个有点类似的概念是条件Get请求,某些资源比如JS文件,如果我们总是需要最新的JS文件,那么可以设置条件Get请求去服务端验证本地的资源是否需要更新.这种情况下浏览器会向Server发送一个http请求,如果资源没有更新,会返回一个http 304的response,如果资源跟新,则重新下载资源:

条件Get请求每次都会产生一个304的请求

4.压缩组件:在Server端对Response资源进行压缩再传给浏览器,一般使用GZIP

5.将CSS放再顶部: 能加快页面内容显示,并且能避免页面产生白屏

6.将JS放在底部

  • JS会阻塞对其后面内容的呈现
  • JS会阻塞对其后面内容的下载

7.避免CSS表达式

8.将JS,CSS放在外部文件中

9.通过使用Keep-Alive和较少的域名来减少DNS查找

10.精简JS和CSS文件

11.寻找一种避免重定向的方法

12.移除重复的脚本

13.配置Etag

14.确保Ajax请求遵守性能知道,必要时候应具备长久的expires头

我们可以使用Yahoo的Yslow firefox插件来检查网站的前端性能.

最后,我们随便打开一个淘宝宝贝页面,用Fiddler查看一下,发现淘宝至少做了如下优化:

  • 大规模使用CDN,图片,jS,css互相之间都使用了不同的域名.单是图片服务器,下面又使用了很多不同的服务器,比如img01.taobaocdn.com等等
  • 当第二次浏览同一宝贝的时候,产生大量的Http 304请求.这样既能保证获取最新的资源,又能尽量减少数据传输
  • CSS,JS文件大都精简过
  • 对于资源类的东西比如图片,设置为不受保护.也就是说不需要登录依然可以直接访问的,这样就避免设置/读取cookie,达到节省网络资源的目的

唯一一点没有优化的是图片,服务端返回的图片都是没有Gzip压缩的,或许是为了减少服务器的压力

web前端性能14条规则的更多相关文章

  1. web前端-雅虎34条规则优化

    1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是 ...

  2. 转:WEB前端性能优化规则

    14条规则摘自<High Performance Web Sites>,本文地址 1.减少Http请求 使用图片地图 使用CSS Sprites 合并JS和CSS文件 这个是由于浏览器对同 ...

  3. Web前端性能优化全攻略

    网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...

  4. 如何合理优化WEB前端 高效提升WEB前端性能

    对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...

  5. WEB前端性能优化:HTML,CSS,JS和服务器端优化

    对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...

  6. WEB前端性能优化小结

    转:http://www.gafish.net/archives/1514 对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不 ...

  7. Web前端性能优化全攻略[转载]

    1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最 ...

  8. Web前端性能优化进阶——完结篇

    前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化 ...

  9. 转 WEB前端性能分析--工具篇

    在线网站类: WebPageTest 说明: 在线的站点性能评测网站,地址http://www.webpagetest.org/ 补充: 其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点 ...

随机推荐

  1. hadoop3.0 alpha1 安装配置

    1. 官网下载 wget  http://apache.fayea.com/hadoop/common/hadoop-3.0.0-alpha1/hadoop-3.0.0-alpha1.tar.gz 2 ...

  2. CentOS 7 Mysql yum源

    CentOS 7 安装Mysqlrpm -ivh http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpmyum install m ...

  3. PHP实现微信公众平台开发 全套视频资源下载

    好久没有在博客园更新东西了,今天给大家分享一份比较不错的视频学习资源吧. 主要是关于PHP实现微信公众平台开发,  不知道大家对于微信平台的开发有多少了解,那么今天就从基础开始吧,资源目录如下(PS ...

  4. js判断qq浏览器

    if(navigator.userAgent.toLowerCase().toString().indexOf('qqbrowser') > -1){ console.log('qq');}el ...

  5. hadoop 2.6配置记录

    本地hadoop配置 1)core-site.xml <?xml version="1.0" encoding="UTF-8"?> <?xml ...

  6. 腾讯的一道JavaScript面试题

    //题目:分别弹出什么内容? <!-- function test(){ this.a = 1; alert(this); //[object Window] } test(); var t = ...

  7. config配置文件的一些东西

    /* 模板相关配置 */ 'TMPL_PARSE_STRING' => array( '__STATIC__' => __ROOT__ . '/Public/static', '__ADD ...

  8. μC/OS-Ⅲ系统中的任务就续表

    μC/OS-Ⅲ支持任意数目的不同优先级.一般情况下64级优先级就足够了. 在μC/OS-Ⅲ中所有已经就绪等待运 行的任务都被放入一个我为的“就续表”(ready list)中.就续表包括两部分:一个就 ...

  9. 394. Decode String

    [题目] Total Accepted: 10087 Total Submissions: 25510 Difficulty: Medium Contributors: Admin Given an ...

  10. Bootstrap<基础二十七> 多媒体对象(Media Object)

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...