HTTP cache

[dlrandy]

https://www.mnot.net/cache_docs/ 200 200(cache) 304的不同： 200指的是一个请求成功的到服务器取得了数据； 200(cache)是因为上一次的成功请求之后，server的response里设置了（Expires或者Cache-control：maxage=12312；Etag：‘ox’123f）的header，使得浏览器知道在下次要请求该资源的时候，检查一下Cache的控制，可以的话就直接读取缓存。 304是在200cache的时候cache过期的情况，请求里会带着"If-Modified-Since来和server进行确认。

[dlrandy]

https://www.mnot.net/cache_docs/ 200 200(cache) 304的不同： 200指的是一个请求成功的到服务器取得了数据； 200(cache)是因为上一次的成功请求之后，server的response里设置了（Expires或者Cache-control：maxage=12312；Etag：‘ox’123f）的header，使得浏览器知道在下次要请求该资源的时候，检查一下Cache的控制，可以的话就直接读取缓存。 304是在200cache的时候cache过期的情况，请求里会带着"If-Modified-Since If-none-match(etag)来和server进行，验证缓存的资源是否过期。请求不带有其它数据

[dlrandy]

刷新网页的四种方式： F5： F5 的话 发送请求之前 就会先找http cache，找到为过期的就是200（cache），过期的就会带上（if-none-match/if-Modified-since，这两个主要是response的Etag）来询问这个过期的cache还能用不，能用则返回 （304）；不能用则返回200 的新资源。 Command/ctrl+ r： 这个就是强制清除cache，重新请求所有的结果 Enter key：== F5
click Fresh button：== F5

http://podlipensky.com/2012/03/behind-refresh-button/ Http请求分为有条件的请求和无条件的请求

[dlrandy]

https://www.mnot.net/cache_docs/

[dlrandy]

使用缓存的原因是： 减少延迟，加速响应； 减小网络交通，节省流量；

回忆一下web的经典架构：网站 ---〉 proxy server--〉application server --> db server

缓存有三种类型： 浏览器缓存：缓存在页面后退的时候，特别有用。个人缓存； 代理缓存：这个是共享缓存； 网关缓存：CDN；

server的response header里的ETag or Last-Modified 来指示是否缓存。

html的meta里可以设置 document的缓存时间缓步缓存等。易用但是不高效，只有少数的浏览器支持， 但是proxy server不会支持。Http Hader控制缓存会有更多控制。

http Header里的 Pragma：no-cache不起作用的 Expires：http Date；这里换成任何值都会被认为不缓存； Cache-control：max-age, s-maxage(只用于共享缓存)，public（共享的缓存） ，private（一般带有Authentication的自动带有这个，其它的手动设置， 特定用户的缓存）， no-cache （cache要到server上验证 ，在有Authentication的情况特别重要 ），no-store（指示不缓存）， must-revalidate（验证cache的各个条件）， proxy-validate（和must-revalidate相似，但是只用于代理缓存）

https://www.keycdn.com/blog/http-cache-headers/

[dlrandy]

https://code.tutsplus.com/tutorials/http-the-protocol-every-web-developer-must-know-part-1--net-31177

https://leohxj.gitbooks.io/front-end-database/javascript-modules/modules-tools-compare.html

https://www.telerik.com/blogs/understanding-http-304-responses

[dlrandy]

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching Httpcache就是复用 已经请求的资源。 所有的浏览器都实现了HTTP cache。需要开发者做的就是 确保server的response提供正确的HTTP header指令，来指示浏览器什么时候缓存资源 缓存多久。 webview开启缓存的话需要一些额外的 配置。

[dlrandy]

http://www.symkat.com/understanding-http-caching http://www.brianstorti.com/working-with-http-cache/

[dlrandy]

https://www.digitalocean.com/community/tutorials/web-caching-basics-terminology-http-headers-and-caching-strategies

[dlrandy]

https://css-tricks.com/scroll-fix-content/ 思路就是： 首先判断出有哪几种状态； 然后使用一个类来划分两种状态；

[dlrandy]

Http的head请求一般用于确认资源是否可用。也可以用来发送一些记录信息

[dlrandy]

301是永久移走，response里可能有新的URI； Expressjs默认的重定向是302 found，URI临时改变，返回新的URi，后续的同样请求，直接请求新的URI。 307临时重定向：和302 一样只不过是后续的请求的method必须和一开始的一样。 308永久重定向 ：和307 差不多

[dlrandy]

http://svgdiscovery.com/ https://codepen.io/Zaku/pen/ALChE https://codepen.io/tmrDevelops/pen/yyprGq http://bashooka.com/coding/20-cool-svg-text-effects/

[dlrandy]

transform 的元素会包含住position为fixed的后代元素。是因为 transform创建了新图层。z-index改变的同一个图层的z轴距离，使用其它改变stacking context的属性也可以的 也就是 创建新图层的。比如will-change transform等他们都会创建影响position的包含块。

[dlrandy]

记住 使用navigator.userAgent检查app的运行环境

[dlrandy]

正常flow里transformed的元素、浮动的元素不会为绝对定位固定定位的后代元素创建包含块。正常flow里的transformed的元素创建包含块就加 relative定位。