浏览器缓存

Nginx模块 ngx_http_core_module 模块 帮助文档： http://nginx.org/en/docs/http/ngx_http_core_module.html 与套接字相关的配置： 1 、server { ... } 配置一个虚拟主机 server { listen address[:PORT]|PORT; server_name SERVER_NAME; root /PATH/TO/DOCUMENT_ROOT; } 2 、listen PORT|address[:port]|unix:/PATH/TO/SOCKET_FILE listen address[:port] [default_server] [ssl] [http2 | spdy][backlog=number] [rcvbuf=size] [sndbuf=size] default_server 设定为默认虚拟主机 ssl 限制仅能够通过ssl 连接提供服务 backlog=number 超过并发连接数后，新请求进入后援队列的长度 rcvbuf=size 接收缓冲区大小 sndbuf=size 发送缓冲区大小 注意： (1) 基于port； ； listen PORT; 指令监听在不同的端口 (2) 基于ip 的虚拟主机 listen IP:PORT; IP 地址不同 (3)

为什么要使用页面缓存技术？ 系统都是逐渐演进的，一个系统在运行中必须是根据场景逐渐地提高优化性能。高并发就是对资源的节约的考验，这种考验除了更换优秀和先进的技术，优化架构，还在于从小处出发，对尽可能节约的资源进行节约。而在一个系统的数据访问中，系统的瓶颈往往是来自于数据库，因此我们要尽可能减少对数据库的访问!在不影响用户体验的情况下，对于一些静态或者变化不大的页面，我们使用缓存来减少对数据库的访问! 缓存技术的原理 在一个请求中，逻辑越复杂，调用，依赖，访问数据库的越多，耗时也就越长，响应时间也就越长，性能也就越差!因此降低逻辑复杂度，减低耦合，提高内聚，减少数据库访问，将频繁用到的变化不大的数据给缓存起来也就成为了提高性能的主要核心。 缓存雪崩-数据穿透问题 缓存穿透 缓存穿透，是指查询一个数据库一定不存在的数据。正常的使用缓存流程大致是，数据查询先进行缓存查询，如果key不存在或者key已经过期，再对数据库进行查询，并把查询到的对象，放进缓存。如果数据库查询对象为空，则不放进缓存。 想象一下这个情况，如果传入的参数为-1，会是怎么样？这个-1，就是一定不存在的对象。就会每次都去查询数据库，而每次查询都是空，每次又都不会进行缓存。假如有恶意攻击，就可以利用这个漏洞，对数据库造成压力，甚至压垮数据库。即便是采用UUID，也是很容易找到一个不存在的KEY，进行攻击。 缓存雪崩

鸡蛋不要放在一个篮子里，篮子摔了就都没了。 httpdns 浏览器访问一个域名的过程：先去操作系统的hosts文件中寻找域名对应的ip地址，存在就拿来使用，直接向该ip地址发起网络请求。如果没有就去操作系统的dns（domain name service）缓存中查找，缓存是对浏览历史记录的一种缓存，dns服务器存储的就是域名->ip的键值对，在互联网上有很多这种dns服务器，电信、网通、铁通、谷歌、114等都有dns服务器。dns服务器是层层缓存起来的，全世界有13台根域名服务器。一个域名可以绑定多个IP地址，那么该返回哪个IP地址呢？在本机IP配置中有一项DNS服务器的选项，会先去那寻找。物理的距离也会造成高延迟，将nginx部署到各地的服务器上，对域名进行分地区动态绑定，这种技术就叫CDN。nginx：放html静态页面；进行反向代理；写lua脚本等；动静分离；负载均衡等。服务器间同步数据用的是netty框架。初期购买云服务简化开发，随着业务逻辑的复杂度提升，数据私密性及安全性要求，需要自己写框架。nginx基于内存的缓存。数据中心。数据备份。异地数据备份保障数据安全。企业开在派出所旁边。地震海啸等自然灾害带来的数据丢失灾难。LRU缓存清除算法。http_proxy_cache本地磁盘缓存（文件缓存）。十几块钱是让用户装app的成本，以前是三块钱。现在只能做工具类的app。

网站技术高速发展的今天，缓存技术已经成为大型网站的一个关键技术，缓存设计好坏直接关系的一个网站访问的速度，以及购置服务器的数量，甚至影响到用户的体验。 　　网站缓存按照存放的地点不同，可以分为客户端缓存、服务端缓存。 客户端缓存 　　客户端缓存又可分为：浏览器缓存、网关或代理服务器缓存 　　网关或代理服务器缓存是将网页缓存中网关服务器上，多用户访问同一个页面时，将直接从网关服务器把页面传送给用户。 　　浏览器缓存是最靠近用户的缓存，如果启用缓存，用户在访问同一个页面时，将不再从服务器下载页面，而是从本机的缓存目录中读取页面，然后再浏览器中展现这个页面。 　　浏览器缓存的控制，可以设置meta标签，可以设置数字，也可以设置时间，如下： <Meta http-equiv="Expires" Content="3600"> <Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT"> 　　HTTP头信息如下： HTTP/1.1 200 OK Date: Fri, 30 Oct 1998 13:19:41 GMT Server: Apache/1.3.3 (Unix) Cache-Control: max-age=3600, must-revalidate Expires: Fri, 30 Oct 1998 14

在HTTP协议的请求和响应报文中必定包含HTTP首部。 学习HTTP首部的结构和首部中各字段的用法。 1. HTTP报文首部 客户端和服务器分别处理请求和响应提供所需要的信息。 HTTP请求报文首部（方法、URI、HTTP版本、HTTP首部字段） HTTP响应报文首部（HTTP版本、状态码、HTTP首部字段） 2. HTTP首部字段 使用首部字段是为了给浏览器和服务器提供报文主体大小、所使用的语言、认证信息等内容。 结构： 首部字段名:字段值 exp: Content-Type:text/html 4种首部字段类型 通用首部字段 ：请求报文和响应报文都会使用的首部。 请求首部字段 ：客户端到服务器发送请求报文使用的首部。包含附加内容、客户端信息、响应内容优先级。 响应首部字段 ：服务器到客户端返回响应报文使用的首部。 实体首部字段 ：针对请求报文和响应报文的实体部分使用的首部。 HTTP首部字段一览表 下面对部分重要字段进行介绍： Cache-Control 操作缓存的工作机制 Private/public 其他用户是否可以利用缓存 no-cache 防止从缓存中返回过期的资源 no-store 暗示请求或响应中包含机密信息，就是不能缓存该信息 s-maxage 指定缓存期限和认证 min-fresh 缓存服务器返回至少还未超过指定时间的缓存资源 Max-stale

本文转载自公众号 前端迷 总体概览 大体上，可以分为六步，当然每一步都可以详细展开来说，这里先放一张总览图: DNS域名解析 在网络世界，你肯定记得住网站的名称，但是很难记住网站的 IP 地址，因而也需要一个地址簿，就是 DNS 服务器。DNS 服务器是高可用、高并发和分布式的，它是树状结构，如图： 根 DNS 服务器 ：返回顶级域 DNS 服务器的 IP 地址 顶级域 DNS 服务器：返回权威 DNS 服务器的 IP 地址 权威 DNS 服务器 ：返回相应主机的 IP 地址 DNS的域名查找，在客户端和浏览器，本地DNS之间的查询方式是递归查询；在本地DNS服务器与根域及其子域之间的查询方式是迭代查询； 递归过程： 在客户端输入 URL 后，会有一个递归查找的过程，从浏览器缓存中查找->本地的hosts文件查找->找本地DNS解析器缓存查找->本地DNS服务器查找，这个过程中任何一步找到了都会结束查找流程。 如果本地DNS服务器无法查询到，则根据本地DNS服务器设置的转发器进行查询。若未用转发模式，则迭代查找过程如下图： 结合起来的过程，可以用一个图表示： 在查找过程中，有以下优化点： DNS存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。 在域名和 IP

IndexedDB就是前端数据库，在浏览器中采用key-value键值方式存储数据。 我们经常用的缓存API localStorage 和 sessionStorage ，能满足我们开发时的绝大多数需求，简单的键值存储，但是它们有它们的限制： * 存储空间限制，只有5M * 只能存储字符串 * 存储的字段一多就很难管理，存储的字段也无法产生关联 IndexedDB的存储空间原则上没有限制，它本质上还是一个数据库，可以存储大量结构化数据（包括文件/blobs）,同时IndexedDB API通过索引的方式实现了数据的高性能搜索。使用比localStorage、sessionStorage复杂得多。 应用场景，不需要网络连接的纯离线应用，比如Todolist这类的用来记录待办任务类型的应用。 资料： 初探IndexedDB localStorage的使用 来源： CSDN 作者： zhexiaode 链接： https://blog.csdn.net/zhexiaode/article/details/104167638

内容部分 1.尽量减少HTTP请求数 　　80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。 　　减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时加快响应时间呢？嗯，确实有鱼和熊掌兼得的办法。 　　合并文件 是通过把所有脚本放在一个文件中的方式来减少请求数的，当然，也可以合并所有的CSS。如果各个页面的脚本和样式不一样的话，合并文件就是一项比较麻烦的工作了，但把这个作为站点发布过程的一部分确实可以提高响应时间。 　　CSS Sprites 是减少图片请求数量的首选方式。把背景图片都整合到一张图片中，然后用CSS的 background-image 和 background-position 属性来定位要显示的部分。 　　图像映射 可以把多张图片合并成单张图片，总大小是一样的，但减少了请求数并加速了页面加载。图片映射只有在图像在页面中连续的时候才有用，比如导航条。给image map设置坐标的过程既无聊又容易出错，用image map来做导航也不容易，所以不推荐用这种方式。 　　行内图片（Base64编码） 用 data: URL模式 来把图片嵌入页面。这样会增加HTML文件的大小，把行内图片放在（缓存的

1.PWA简介： Progressive Web App 是由谷歌提出推广的，在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验。 2.PWA到底有哪些过人之处（特性）？ 1、Installability（可安装性）：添加到主屏 2、App Shell：第一次渲染渲个壳、等异步数据来了再填充 3、Offline Web App （离线能力） 4、Re-engageable：推送通知的能力。推送通知依赖Service Worker与HTTP Push，不过默认的支持是GCM（Google提供的云服务） 将Web和App的技术相结合： 不需要安装 快速加载 推送消息 桌面图标 全屏体验 3.PWA核心技术： Web App Manifest App shell Service worker push Notifion 4.manifest.json 配置文件 添加主屏配置 <link rel="manifest" href="/manifest.json"> 5.Service worker 用来实现页面的缓存和离线, 后台通知等功能 Service Worker 是什么？ service worker 是独立于当前页面的一段运行在浏览器后台进程里的脚本。 要求：需要HTTPS本地调试localhost 浏览器支持（目前andorid的chrome部分支持）

一、五层协议 1. OSI(Open System Interconnection 开放式系统互联)七层协议 1）应用层 2）表示层 3）会话层 4）传输层 5）网络层 6）数据链接层 7）物理层 2. TCP/IP四层网络协议 (Transmission Control Protocol 传输控制协议) 1）应用层 2）运输层 3）网络层 4）网络接口层 3. 折中后的五层协议 1）应用层(dns,http) DNS解析成IP并发送http请求 2）传输层(tcp,udp) 建立tcp连接（三次握手） 3）网络层(IP,ARP) IP寻址 4）数据链路层(PPP) 封装成帧 5）物理层(利用物理介质传输比特流) 物理传输（然后传输的时候通过双绞线，电磁波等各种介质） 简括： 从应用层的发送http请求，到传输层通过三次握手建立tcp/ip连接，再到网络层的ip寻址，再到数据链路层的封装成帧，最后到物理层的利用物理介质传输。 二、HTTP状态码 1XX 用于指定客户端相应的某些动作 2XX 用于表示成功 3XX 用于已经移动的文件并且被包含在定位头信息中指定心的地址信息(重定向，为了完成请求，必须进一步执行的动作) 4XX 用于指出客户端错误 5XX 用于支持服务器错误 100 继续；101 分组交换协议 200 ok；201 被创建；202 被采纳；203 非授权信息；204