浏览器缓存

一 http缓存 1.1缓存的分类： http中具有缓存功能的是：1、浏览器缓存、 2、缓存代理服务器。 1.2 什么是缓存： http缓存的是指:当Web请求抵达缓存时， 如果本地有“已缓存的”副本，就可以从本地存储设备而 不是从原始服务器中提取这个文档。 1.3 缓存的好处有： 1. 减少了冗余的数据传输，节省了网费。 2. 减少了服务器的负担， 大大提高了网站的性能 3. 加快了客户端加载网页的速度。优化用户体验 1.4 缓存示意图： 第一次请求： 第一次请求，无论是静态文件还是其他文件，都是从服务器那里读取的。因此没有缓存之说。等第一次请求完，浏览器就有缓存了，然后整个的加载过程就完全不一样了。看下图： 浏览器再次请求 　流程图解释： 浏览器再次请求，情况就不一样了。首先会读取缓存，然后判断缓存是否过期，如果不过期，就直接读取缓存。 否则，判断浏览器返回的头部信息是否存在Etag,如果存在，浏览器会像服务器发送带有If-None-Match的请求头，来和服务器返回的Etag做对比， 如果if-None-Match和Etag相等。说明缓存没有更新，服务器返回304，浏览器继续从缓存读取相应的内容。如果if-None-Match和Etag不等，则服务器返回200，浏览器重新需 要从服务器获取内容。 　　如果服务器的返回信息里面没有Etag，则判断浏览器的返回信息里是否有Last

浏览器输入url按回车背后经历了哪些？ 1.在PC浏览器的地址栏输入一串URL，然后按Enter键这个页面渲染出来，这个过程中都发生了什么事? 1、首先，在浏览器地址栏中输入url，先解析url，检测url地址是否合法 2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。 浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求； 操作系统缓存：如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统，获取操作系统的记录(保存最近的DNS查询缓存)； 路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存； ISP缓存：若上述均失败，继续向ISP搜索。 3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。 4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。 5、握手成功后，浏览器向服务器发送http请求，请求数据包。 6、服务器处理收到的请求，将数据返回至浏览器 7、浏览器收到HTTP响应 8、浏览器解码响应，如果响应可以缓存，则存入缓存。 9、 浏览器发送请求获取嵌入在HTML中的资源（html，css，javascript，图片，音乐······），对于未知类型，会弹出对话框。 10、 浏览器发送异步请求。 11、页面全部渲染结束。

报文 （message） 是 HTTP 通信中的基本单位，由 8 位组字节流（octet sequence， 其中 octet 为 8 个比特）组成，通过 HTTP 通信传输。 实体 （entity） 作为请求或响应的有效载荷数据（补充项）被传输，其内容由实 体首部和实体主体组成。 HTTP 报文的主体用于传输请求或响应的实体主体。 通常，报文主体等于实体主体。只有当传输中进行编码操作时，实体 主体的内容发生变化，才导致它和报文主体产生差异。 303该状态码表示由于请求对应的资源存在着另一个 URI，应使用 GET 方法定向获取请求的资源。 303 状态码和 302 Found 状态码有着相同的功能，但 303 状态码明确 表示客户端应当采用 GET 方法获取资源，这点与 302 状态码有区 别。 304 服务器端允许请求访问资源，但未满足条件的情况下。 307类似302，但是不允许从post方法变成get方法。 代理 每次通过代理服务器转发请求或响应时，会追加写入 Via 首 部信息。 使用代理服务器的理由有：利用缓存技术（稍后讲解）减少网络带宽 的流量，组织内部针对特定网站的访问控制，以获取访问日志为主要 目的。 缓存代理和透明代理 透明代理的意思是客户端根本不需要知道有代理服务器的存在，会改变你的request fields（报文），并会传送真实IP。

一 http缓存 1.1缓存的分类： http中具有缓存功能的是：1、浏览器缓存、 2、缓存代理服务器。 1.2 什么是缓存： http缓存的是指:当Web请求抵达缓存时， 如果本地有“已缓存的”副本，就可以从本地存储设备而 不是从原始服务器中提取这个文档。 1.3 缓存的好处有： 1. 减少了冗余的数据传输，节省了网费。 2. 减少了服务器的负担， 大大提高了网站的性能 3. 加快了客户端加载网页的速度。优化用户体验 1.4 缓存示意图： 第一次请求： 第一次请求，无论是静态文件还是其他文件，都是从服务器那里读取的。因此没有缓存之说。等第一次请求完，浏览器就有缓存了，然后整个的加载过程就完全不一样了。看下图： 浏览器再次请求 　流程图解释： 浏览器再次请求，情况就不一样了。首先会读取缓存，然后判断缓存是否过期，如果不过期，就直接读取缓存。 否则，判断浏览器返回的头部信息是否存在Etag,如果存在，浏览器会像服务器发送带有If-None-Match的请求头，来和服务器返回的Etag做对比， 如果if-None-Match和Etag相等。说明缓存没有更新，服务器返回304，浏览器继续从缓存读取相应的内容。如果if-None-Match和Etag不等，则服务器返回200，浏览器重新需 要从服务器获取内容。 　　如果服务器的返回信息里面没有Etag，则判断浏览器的返回信息里是否有Last

一次 Web 请求到底发生了什么 一、从输入一个网址开始 当我们在浏览器输入一个网址，然后按下回车，接下来浏览器显示了页面。网速好的话这之间可能就一秒，但在这一秒内到底发生了什么？ 本文主要内容是试图记录一个完整 Web 请求的详细过程，从用户在浏览器中输入 URL 地址说起，然后浏览器如何找到服务器地址的过程，并发起请求；分析请求在达反向代理服务器内部处理过程；最后到请求在服务器端处理完成后，浏览器渲染响应页面过程。 大致过程如下： Web请求的工作原理可以简单地归纳为： 浏览器通过 DNS 把域名解析成对应的IP地址； 根据这个 IP 地址在互联网上找到对应的服务器，建立 Socket 连接； 客户端向服务器发送HTTP协议请求包，请求服务器里的资源文档； 在服务器端，实际上还有复杂的业务逻辑：服务器可能有多台，到底指定哪台服务器处理请求，这需要一个负载均衡设备来平均分配所有用户的请求； 还有请求的数据是存储在分布式缓存里还是一个静态文件中，或是在数据库里； 当数据返回浏览器时，浏览器解析数据发现还有一些静态资源（如：css，js或者图片）时又会发起另外的请求，而这些请求可能会在CDN上，那么CDN服务器又会处理这个用户的请求。 客户端与服务器断开。由客户端解释HTML文档，在客户端屏幕上渲染图形结果。 一个 HTTP 事务就是这样实现的，看起来很简单，原理其实是挺负责的

这段时间对项目做了一次整体的优化，全站有了20%左右的提升（本来载入速度已经1.2S左右了，优化度很低），算一算已经做了四轮的全站性能优化了，回顾几次的优化手段，基本上几个字就能说清楚： 传输层面：减少请求数，降低请求量执行层面：减少重绘&回流 传输层面的从来都是优化的核心点，而这个层面的优化要对浏览器有一个基本的认识，比如： ① 网页自上而下的解析渲染，边解析边渲染，页面内CSS文件会阻塞渲染，异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源，新开线程下载（有并发上限），在带宽限制的条件下，无序并发会导致主资源速度下降，从而影响首屏渲染 ③ 浏览器缓存可用时会使用缓存资源，这个时候可以避免请求体的传输，对性能有极大提高 衡量性能的重要指标为首屏载入速度（指页面可以看见，不一定可交互），影响首屏的最大因素为请求，所以请求是页面真正的杀手，一般来说我们会做这些优化： 减少请求数 ① 合并样式、脚本文件 ② 合并背景图片 ③ CSS3图标、Icon Font 降低请求量 ① 开启GZip ② 优化静态资源，jQuery->Zepto、阉割IScroll、去除冗余代码 ③ 图片无损压缩 ④ 图片延迟加载 ⑤ 减少Cookie携带 很多时候，我们也会采用类似“时间换空间、空间换时间”的做法，比如： ① 缓存为王，对更新较缓慢的资源&接口做缓存（浏览器缓存

前端优化已经是一个被写烂的题材了。 虽千万人吾往矣，这里我仅分享我的一些实践经验。 欢迎一起交流 欢迎关注我的个人公众号，不定期更新自己的工作心得。 正文如下 前端性能 1. 模块化 严格来说，代码模块化并不能带来性能上的提升，但我还是将模块化提出来，因为它真的很重要，重要到几乎所有的优化都与它息息相关。 常见的模块化方案有：AMD、CMD、UMD、ES6 如何选择？ 团队习惯 个人偏好 业务需要 我靠！你怎么能把业务需要放在最后一个考虑？ 因为没有哪一块业务会因为使用了不同的模块化方案而产生不同的结果。 而且我觉得 软件开发中的以人为本 用在这里刚好合适，其他地方就只能 呵呵了。毕竟业务高于一切，这是操守。 2. 缓存 缓存一定要加！ 缓存一定要加！ 缓存一定要加！ 因为CDN真的很贵。。。 没有CDN？那就更得加缓存了！！！ 缓存有很多方式，最为常见的就是下面这两种了 浏览器304缓存 localstorage本地存储 业界，一直有关于304缓存与localstorage性能的争议，这里我们不讨论两者的差异，或性能问题。 我一向以业务导向选择方案，这里我选择的是localstorage，如果你愿意，你可以通过localstorage将缓存玩出一朵花出来。 你可以这么干： 通过localstorage存储js、css资源； 资源版本控制； 只要你愿意

官方详细参数： http://wiki.nginx.org/NginxHttpProxyModule 1、传统缓存之一（404） 这个办法是把nginx的404错误定向到后端,然后用proxy_store把后端返回的页面保存。 location / { root /home/html/;#主目录 expires 1d;#网页的过期时间 error_page 404 =200 /fetch$request_uri;#404定向到/fetch目录下 } location /fetch/ {#404定向到这里 internal;#指明这个目录不能在外部直接访问到 expires 1d;#网页的过期时间 alias /home/html/;#虚拟目录文件系统地址要和locaion /一致,proxy_store会将文件保存到这目录下 proxy_pass http://xok.la/ ;#后端upstream地址,/fetch同时是一个代理 proxy_set_header Accept-Encoding '';#让后端不要返回压缩（gzip或deflate）的内容,保存压缩后的内容会引发乱子。 proxy_store on;#指定nginx将代理返回的文件保存 proxy_temp_path /home/tmp;#临时目录,这个目录要和/home/html在同一个硬盘分区内 }

1 、 如果每次进入页面的时候都查询数据库生成页面内容的话，如果访问量非常大，则网站性能会非常差。而如果只有第一次访问的时候才查询数据库生成页面内容，以后都直接输出内容，则能提高系统性能。这样无论有多少人访问都只访问一次数据库，数据库压力不变。 2 、为了保证从缓存中读取数据和数据库中数据一致，则需要在数据库中对应的数据发生变化的时候，清除缓存中相应的数据（ 缓存依赖 ）。 3 、缓存是改进网站性能的第一个手段， Asp.Net 缓存主要分为： 页面缓存 ( 中庸 ) 、 数据源缓存 ( 最不灵活的 ) 、 数据缓存 ( 灵活 ) 这三种主要类型。 页面缓存 给 aspx 页面添加 <%@ OutputCache Duration=“15” VaryByParam=“none”%> 标签就可以启用页面缓存，这样整个页面的内容都会被缓存，页面中的 ASP.Net 代码、数据源在缓存期间都不会被运行，而是直接输出缓存的页面内容。 Duration 表示缓存时间，以秒为单位，超过这个时间则缓存失效，再次生成以后会再缓存 15 秒，以此类推。 注 : 这个缓存是在服务器缓存的，不是在客户端，因为用 HttpWatch 还是能看到向服务器提交的请求，只不过服务器看到有缓存就没有再执行页面类。 页面缓存是针对所有这个页面的访问者。这样 1 个访问者和 1 万个访问者、一次访问和 100

因为因特网HTTP协议的特性，每一次来自于用户浏览器的请求（request）都是无状态的、独立的。通俗地说，就是无法保存用户状态，后台服务器根本就不知道当前请求和以前及以后请求是否来自同一用户。对于静态网站，这可能不是个问题，而对于动态网站，尤其是京东、天猫、银行等购物或金融网站，无法识别用户并保持用户状态是致命的，根本就无法提供服务。可以尝试将浏览器的cookie功能关闭，会发现将无法在京东登录和购物。 为了保持连接状态，网站会通过用户的浏览器在用户机器内被限定的硬盘位置中写入一些数据，也就是所谓的Cookie。通过Cookie可以保存一些诸如用户名、浏览记录、表单记录、登录和注销等各种数据。但是这种方式非常不安全，因为Cookie保存在用户的机器上，如果Cookie被伪造、篡改或删除，就会造成极大的安全威胁，因此，现代网站设计通常将Cookie用来保存一些不重要的内容，实际的用户数据和状态还是以Session会话的方式保存在服务器端。 Session就是在服务器端的‘Cookie’，将用户数据保存在服务器端，远比保存在用户端要安全、方便和快捷得多。 Session依赖Cookie！但与Cookie不同的地方在于Session将所有的数据都放在服务器端，用户浏览器的Cookie中只会保存一个非明文的识别信息，比如哈希值。 Session是大多数网站都需要具备的功能