etag

规则1-减少HTTP请求 1.图片合并 1)将多个图片合并为一个图片, 2)CSS Sprites。使用CSS的background-positon属性，配合width/height显示指定位置的图片局部内容。 <div style="background-image:url('xxxxx.gif');background-position:-260px -90px; width:26px;height:24px;"></div> 3)合并后的图片，不但减少了下载次数，而且降低了总体大小，因为它减少了颜色表、格式信息等图片格式开销。 2.内嵌图片 1)使用data:URL模式 data:[<mediatype>][;base64],<data> data:URL形式无法直接被浏览器缓存，可以将其放在css样式表中，从而实现缓存，base64转换后的图片会变大。 .home{background-image:url(data:image/gif;base64,XXXXXXXXX);} 3.合并js和css文件 规则2-使用内容分发网络 规则3-使用Max-Age 1.使用Expires/Max-Age/mod_expires设定缓存时间 可以通过设置文件版本号等方法，使文件及时刷新。 规则4-压缩组件 1.gzip压缩 1)浏览器发送Accept-Encoding:gzip

给静态资源(HTML文件，图片文件等）的Repsone加上 Expires/Cache-Control Header是很有效的一招。如果HTTP Response中有Expires这样的Header的话，浏览器会Cache这个资源，理想状况下（注意，只是理想状况），在Expire Date之前，不会再发HTTP请求给Server要这个资源，不过Expires的值只能是一个固定日期，比如“Thu 27 Nov 2008 07:00:00 GMT”，不能是一个类似“从现在开始之后10年”这样一个随机浮动的值，如果要这样的效果，可以用Cache-Control这样的Header，如果HTTP Resposne中有这样的Header:“Cache-Control: max-age = 100”，表示这个资源在cache中的最大寿命是100秒。一般说来这种静态文件永远不应该过期，如果真的要给这个Cache加上一个期限，那我希望是——一万年，“Cache-Control: max-age = 315360000000”; 其实就应该给Expires设一个永远不会过期的时间，比如你现在有一个文件叫logo.gif，需要用一个新的logo的时候，你不要去覆盖原来的文件，而把新的logo存成logo_v2.gif，让相关网页引用新的logo_v2.gif，这样可以让新老网页同时工作

HTTP所有概念 上一篇文章我们大致讲解了一下 HTTP 的基本特征和使用，大家反响很不错，那么本篇文章我们就来深究一下 HTTP 的特性。我们接着上篇文章没有说完的 HTTP 标头继续来介绍（此篇文章会介绍所有标头的概念，但没有深入底层） HTTP 标头 先来回顾一下 HTTP1.1 标头都有哪几种 HTTP 1.1 的标头主要分为四种， 通用标头 、 实体标头 、 请求标头 、 响应标头 ，现在我们来对这几种标头进行介绍 通用标头 HTTP 通用标头之所以这样命名，是因为与其他三个类别不同，它们不是限定于特定种类的消息或者消息组件（请求，响应或消息实体）的。HTTP 通用标头主要用于传达有关消息本身的信息，而不是它所携带的内容。它们提供一般信息并控制如何处理和处理消息。 尽管通用标头不会限定于是请求还是响应报文，但是某些通用标头大部分或全部用于一种特定类型的请求中。也就是说，如果某个通用标头出现在请求报文中，那么大部分通用标头都会显示在该请求报文中。响应报文也是一样的。 先列出来一个清单，讲明我们都需要介绍哪些通用标头 Cache-Control Connection Date Pragma Trailer Transfer-Encoding Upgrade Via Warning Cache-Control 缓存（Cache） 是计算机领域里的一个重要概念

绪言A：前端性能的重要性 性能黄金法则：只有10%~20%的最终用户响应时间花在了下载HTML文档上，其余80%~90%时间花在了下载页面中的所有组件上。 规则1：减少HTTP请求 图片地图 图片地图允许在一个图片上关联多个URL，目标URL的选择取决于用户点击了图片上的哪个位置。 图片地图有两种类型 服务器端图片地图：将用户点击提交到服务端，并向其传递用户点击的x、y坐标。Web应用程序将x、y映射为适当的操作。 客户端图片地图：通过HTML的MAP标签实现。 CSS Sprites 任何支持背景图片的HTML元素都能CSS Sprites，通过background-image和background-position来实现。 内联图片 通过使用data:URL模式可以在Web页面中包含图片但无需任何额外的HTTP请求。 data:[<mediatype>][;base64],<data> 由于data:URL是内联在页面中的，在跨越不同页面时不会被缓存 合并脚本和样式表 规则2：使用内容发布网络（CDN） 如果应用程序Web服务器离用户更近，则一个HTTP请求响应时间将缩短。另一方面，如果组件Web服务器离用户更近，则多个HTTP请求的响应时间将缩短。 内容发布网络 内容发布网络是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。 优点： 缩短响应时间

Cache-control 1.public： 所有内容都将被缓存（客户端和代理服务器都可缓存） 。具体来说响应可被任何中间节点缓存，如 Browser <-- proxy1 <-- proxy2 <-- Server，中间的proxy可以缓存资源，比如下次再请求同一资源proxy1直接把自己缓存的东西给 Browser 而不再向proxy2要。 private：所有内容**只有客户端可以缓存，Cache-Control的默认取值。**具体来说，表示中间节点不允许缓存，对于Browser <-- proxy1 <-- proxy2 <-- Server，proxy 会老老实实把Server 返回的数据发送给proxy1,自己不缓存任何数据。当下次Browser再次请求时proxy会做好请求转发而不是自作主张给自己缓存的数据。 no-cache：客户端缓存内容**，是否使用缓存则需要经过协商缓存来验证决定。表**示不使用 Cache-Control的缓存控制方式做前置验证， 而是使用 Etag 或者Last-Modified字段来控制缓存 。需要注意的是，no-cache这个名字有一点误导。设置了no-cache之后， 并不是说浏览器就不再缓存数据，只是浏览器在使用缓存数据时，需要先确认一下数据是否还跟服务器保持一致。 no-store：所有内容都不会被缓存，即不使用强制缓存

HTTP缓存是个大公司面试几乎必考的问题，写篇随笔说一下HTTP缓存。 1. HTTP报文首部中有关缓存的字段 在HTTP报文中，与缓存相关的信息都存在首部里，简单说一下首部。 首部 HTTP首部字段向请求报文和相应报文中添加了一些附加信息。本质上来说，它们只是一些键值对的列表。比如，下面的首部行会向Content-Length首部字段赋值19: Content-Length: 19 HTTP规范定义了几中首部字段。应用程序也可以随意发明自己所用的首部。HTTP首部可以分为以下几类： 通用首部 既可以出现在请求报文中，也可以出现在响应报文中。 请求首部 提供更多有关请求的信息。 响应首部 提供更多有关响应的信息。 实体首部 描述主体的长度和内容，或资源本身。 扩展首部 规范中没有定义的新首部。 想了解更多有关HTTP首部或报文的信息，个人推荐《HTTP权威指南》。 首部中与缓存有关的字段 通用首部字段 请求首部字段 响应首部字段 实体首部字段 2. 缓存的处理步骤 除了一些微小的细节，Web缓存的工作原理基本很简单，对一条HTTP GET报文的基本缓存处理过程包括7个步骤。 接收——缓存从网络中读取抵达的请求报文。 解析——缓存对报文解析，提取出URL和各种首部。 查询——缓存查看是否有本地副本可用，如果没有就向服务器获取一份副本，并将其保存在本地。 新鲜度检测—

Yahoo! 的 Exceptional Performance 团队为改善 Web 性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。 原文地址： http://developer.yahoo.com/performance/rules.html Excetional Performance 团队总结出了一系列可以提高网站速度的方法。可以分为 7 大类 34 条。 包括 内容 、 服务器 、 CSS 、 JavaScript 、 Cookie 、 图片 、 移动应用 ，七部分。 其中内容部分一共十条建议： 一、内容部分 尽量减少 HTTP 请求 减少 DNS 查找 避免跳转 缓存 Ajxa 推迟加载 提前加载 减少 DOM 元素数量 用域名划分页面内容 使 frame 数量最少 避免 404 错误 1 、尽量减少 HTTP 请求次数 终端用户响应的时间中，有 80% 用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、 Flash 等。通过减少页面中的元素可以减少 HTTP 请求的次数。这是提高网页速度的关键步骤。 减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少 HTTP

强缓存 强缓存是利用Expires或者Cache-Control这两个http response header实现的，它们都用来表示资源在客户端缓存的有效期。 Expires是http1.0提出的一个表示资源过期时间的header，它描述的是一个绝对时间，由服务器返回，用GMT格式的字符串表示，如：Expires:Thu, 31 Dec 2037 23:55:55 GMT，它的缓存原理是： 1）浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Expires的header 2）浏览器在接收到这个资源后，会把这个资源连同所有response header一起缓存下来（所以缓存命中的请求返回的header并不是来自服务器，而是来自之前缓存的header）； 3）浏览器再请求这个资源时，先从缓存中寻找，找到这个资源后，拿出它的Expires跟当前的请求时间比较，如果请求时间在Expires指定的时间之前，就能命中缓存，否则就不行。 4）如果缓存没有命中，浏览器直接从服务器加载资源时，Expires Header在重新加载的时候会被更新。 Expires是较老的强缓存管理header，由于它是服务器返回的一个绝对时间，在服务器时间与客户端时间相差较大时，缓存管理容易出现问题，比如随意修改下客户端时间，就能影响缓存命中的结果。 所以在http1

缓存是一种将数据保存在本地，在下一次需要使用它时，无需从数据的源头而是直接本地读取的一种技术。在http中，缓存是非常重要的组成部分。 意义 http 是一种 请求->响应 的半双工通讯协议，网页的 html 文档以及内部的每一张图片、javascript 脚本文本、css 样式文件等资源都需要向服务器发出请求，然后得到所需资源的响应。 如果没有浏览器缓存 从向服务器发起 TCP 连接请求，到服务器磁盘 IO，计算到响应传输整个过程，对网络带宽，服务器性能都是不小的考验。而一个页面往往会有少则十几，多则几十上百的请求，如果每一个资源都从服务端获取，在并发的情况下会给服务器带来很大的压力。 加入缓存后，如果客户端没有资源，会从服务端获取，取得资源后同时存在本地。下一次请求时如果有有效缓存则取缓存，由于不会向服务器发起请求，可以减少服务器的压力，同时从本地读取，不会占用网络带宽，速度也是极快的。 那么 HTTP 协议是怎么控制缓存的呢？ 缓存前提 资源标志 浏览器会把请求的类型 Method （通常来说我们只缓存 get 的请求）和 URI 完整地址作为一个资源的标志。 例如下面这些浏览器都会认为是不同资源，后者并不会匹配前者的缓存。 https://xxxx/a.js 和 http://xxxx/a.js http://xxxx/a.js 和 http://yyyy/a.js

这个是从网上摘抄下来的，原文链接在最底下，原文写的比较详细，我这里只取了一部分自己想要的 什么是HTTP协议 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器 目前我们使用的是HTTP/1.1 版本 HTTP协议是无状态的 　 http协议是无状态的，同一个客户端的这次请求和上次请求是没有对应关系，对http服务器来说，它并不知道这两个请求来自同一个客户端。 为了解决这个问题， Web程序引入了Cookie机制来维护状态. Get和Post方法的区别 　　Http协议定义了很多与服务器交互的方法，最基本的有4种，分别是GET,POST,PUT,DELETE. 一个URL地址用于描述一个网络上的资源，而HTTP中的GET, POST, PUT, DELETE就对应着对这个资源的查，改，增，删4个操作。 我们最常见的就是GET和POST了。GET一般用于获取/查询资源信息，而POST一般用于更新资源信息. 我们看看GET和POST的区别 1. GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditPosts.aspx?name=test1&id=123456. POST方法是把提交的数据放在HTTP包的Body中.