Thursday, December 17, 2015

Client Side Misc



http://www.brianstorti.com/working-with-http-cache/
A private cache is what the web browser (or any other HTTP agent) stores locally, in each client’s computer.
A shared cache is something that sits between the client and the origin server, and can serve multiple clients. It acts as a proxy, that intercepts requests and decides if the origin server needs to be called.

There are two aspects of a request that are analysed before asking a new version of a representation: Freshness and validity.


When a representation that is stored in the cache is considered fresh, there is no need to even perform a request to the origin server, it can be served right away.
There are two HTTP headers used to indicate if a representation is fresh or not: Expires and Cache-Control.


In HTTP 1.1, the Expires header was deprecated and Cache-Control is the alternative. If both Expires and Cache-Control headers are found, Expires will be ignored.

Cache-Control works with a bunch of directives to specify how it should behave. We will talk about three of them: max-age, private and no-cache. You can see the entire list here.

max-age: This directive specifies for how many seconds (from the request time) the representation should be considered fresh. It works like the Expires header, but without the date issues.

private: Allows just a private cache to store it, but never a shared cache. This directive is used when the response is intended for a single user, so it makes no sense to store it in a shared cache.

no-cache: As the name says, it makes the request always be sent to the origin server.


When a representation is considered stale (e.g. the max-age was exceeded), a request must be sent to the origin server. Although we need to pay the price of a network request, if we can identify that the representation is still the same, we can save some bandwidth by not sending this representation again. That’s the job of the validation process, and this is done with what is called a conditional request.

There are two headers that can be used to support conditional requests, Last-Modified and Etag.


The Last-Modified header contains a date that tells the client when this representation last changed.


When a client receives a response that includes a Last-Modified header, it takes note of that, and, when it needs to perform the same request again, it includes a If-Modified-Since in the request headers, with the date that it received before:


The origin server then checks if the representation was changed after the date received in the If-Modified-Since header, and, if it was not changed, it just sends a 304 Not Modified response:


Even thought we still had to perform a network request, we avoid sending the same representation in the body, saving some bandwidth.

This is an “entity tag” that contains a string that changes whenever the representation changes. Usually a MD5 hash is used but it can be whatever you want.
It will work in the same way Last-Modified does. The benefit is that you don’t need to keep track of the modification date of a representation, as long as you use always the same algorithm to generate the Etag value (and you should be using), it can be regenerated when you need.


The client will save this Etag value and send it back in a If-None-Match header for the next requests.


Then, if the origin server determines that the received value is still the same for the generated representation, it can just sent a 304 Not Modified, saving some bandwidth.
http://www.cnblogs.com/skynet/archive/2012/11/28/2792503.html

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since要配合Cache-Control使用。
l  Last-Modified:标示这个响应资源的最后修改时间。web服务器在响应请求时,告诉浏览器资源的最后修改时间。
l  If-Modified-Since:当资源过期时(使用Cache-Control标识的max-age),发现资源具有Last-Modified声明,则再次向web服务器请求时带上头 If-Modified-Since,表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新,说明资源又被改动过,则响应整片资源内容(写在响应消息包体内),HTTP 200;若最后修改时间较旧,说明资源无新修改,则响应HTTP 304 (无需包体,节省浏览),告知浏览器继续使用所保存的cache

Etag/If-None-Match

Etag/If-None-Match也要配合Cache-Control使用。
l  Etagweb服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器觉得)。Apache中,ETag的值,默认是对文件的索引节(INode),大小(Size)和最后修改时间(MTime)进行Hash后得到的
l  If-None-Match:当资源过期时(使用Cache-Control标识的max-age),发现资源具有Etage声明,则再次向web服务器请求时带上头If-None-Match Etag的值)web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对,决定返回200304

既生Last-Modified何生Etag

你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新,为什么还需要Etag(实体标识)呢?HTTP1.1Etag的出现主要是为了解决几个Last-Modified比较难解决的问题:
l  Last-Modified标注的最后修改只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的修改时间
l  如果某些文件会被定期生成,当有时内容并没有任何变化,但Last-Modified却改变了,导致文件没法使用缓存
l  有可能存在服务器没有准确获取文件修改时间,或者与代理服务器时间不一致等情形
Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符,能够更加准确的控制缓存。Last-ModifiedETag是可以一起使用的,服务器会优先验证ETag,一致的情况下,才会继续比对Last-Modified,最后才决定是否返回304

用户行为与缓存

浏览器缓存行为还有用户的行为有关!!!
用户操作
Expires/Cache-Control
Last-Modified/Etag
地址栏回车
有效
有效
页面链接跳转
有效
有效
新开窗口
有效
有效
前进、后退
有效
有效
F5刷新
无效
有效
Ctrl+F5刷新
无效
无效

Labels

Review (572) System Design (334) System Design - Review (198) Java (189) Coding (75) Interview-System Design (65) Interview (63) Book Notes (59) Coding - Review (59) to-do (45) Linux (43) Knowledge (39) Interview-Java (35) Knowledge - Review (32) Database (31) Design Patterns (31) Big Data (29) Product Architecture (28) MultiThread (27) Soft Skills (27) Concurrency (26) Cracking Code Interview (26) Miscs (25) Distributed (24) OOD Design (24) Google (23) Career (22) Interview - Review (21) Java - Code (21) Operating System (21) Interview Q&A (20) System Design - Practice (20) Tips (19) Algorithm (17) Company - Facebook (17) Security (17) How to Ace Interview (16) Brain Teaser (14) Linux - Shell (14) Redis (14) Testing (14) Tools (14) Code Quality (13) Search (13) Spark (13) Spring (13) Company - LinkedIn (12) How to (12) Interview-Database (12) Interview-Operating System (12) Solr (12) Architecture Principles (11) Resource (10) Amazon (9) Cache (9) Git (9) Interview - MultiThread (9) Scalability (9) Trouble Shooting (9) Web Dev (9) Architecture Model (8) Better Programmer (8) Cassandra (8) Company - Uber (8) Java67 (8) Math (8) OO Design principles (8) SOLID (8) Design (7) Interview Corner (7) JVM (7) Java Basics (7) Kafka (7) Mac (7) Machine Learning (7) NoSQL (7) C++ (6) Chrome (6) File System (6) Highscalability (6) How to Better (6) Network (6) Restful (6) CareerCup (5) Code Review (5) Hash (5) How to Interview (5) JDK Source Code (5) JavaScript (5) Leetcode (5) Must Known (5) Python (5)

Popular Posts