浏览器缓存

一、缓存系统 1、静态web页面： （1）在静态Web程序中，客户端使用Web浏览器（IE、FireFox等）经过网络(Network)连接到服务器上，使用HTTP协议发起一个请求（Request），告诉服务器我现在需要得到哪个页面，所有的请求交给Web服务器，之后WEB服务器根据用户的需要，从文件系统（存放了所有静态页面的磁盘）取出内容。之后通过Web服务器返回给客户端，客户端接收到内容之后经过浏览器渲染解析，得到显示的效果。 （2）为了让静态web页面显示更加好看，使用javascript／VBScript／ajax（AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。）但是这些特效都是在客户端上借助于浏览器展现给用户的，所以在服务器上本身并没有任何的变化。 （3）静态web无法连接数据库； （4）静态web资源开发技术：HTML； （5）由于现在的web页面中，大量使用JS，导致浏览器打开页面，就会占用大量的内存，服务端的压力是减轻了，但压力转移到了客户端。 2、动态web页面： （1）动态WEB中，程序依然使用客户端和服务端，客户端依然使用浏览器（IE、FireFox等），通过网络(Network)连接到服务器上，使用HTTP协议发起请求（Request）

一【BUG描述】 最近开发一个Web系统的过程中遇到了一个诡异的BUG，花了2天时间解决，感觉如释重负。 这个BUG的现象是这样的：一个很普通的JSP网页，本来显示很正常，后来我在这个html页面上加了一些控件元素，并修改了下CSS, JavaScript代码，并加入了些中文字符。本来是觉得没什么问题，可是在服务器上跑起来就发现浏览器上这个页面显示一片空白，同时其他页面却显示正常。另外，我用的Tomcat版本是8.0.17。 那么我第一反应就是这个页面代码哪里改错了，可是我仔细看了下觉得又没什么问题，然后页面字符编码和Content-type都是显示设置UTF-8编码。看来前端好像没什么问题，然后我就在浏览器上查看页面源码，结果发现浏览器上显示的HTML源码居然不完整，html页面尾部的4~5行代码全部不见了。这就是导致页面无法正常显示的直接原因。 这个无非就两种可能：浏览器数据没有全部接收，或者服务器数据没有全部发送。这时，我就用WireShark抓包观察，结果显示tomcat服务器在发送数据时最后几行数据根本就没有发送过来。而且这儿非常巧合，因为html数据以chunked的方式发送，最后那几行数据恰好应该全部在最后的一个chunked包里面，换句话说，就是最后一个chunked包丢了。 为啥偏偏这个页面的最后一个chunked包丢了，而其他页面好好的呢？ 这时没别的办法啦

之前的项目中，用到过redis，主要是使用redis做缓存，redis在web开发中使用的场景很多，其中缓存是其中一个很重要的使用场景，之所以用作缓存，得益于redis的读写数据，尤其是在读取数据的时候是直接走内存的，这样在高并发访问数据的时候，和查询数据库相比，redis读取数据的高效性、快速性的优势可见一斑，据说新浪单是每天的所有内容的统计的总的访问数量可以达到上百亿次，这种场景下，如果没有redis做数据缓存，根本无法支撑这么大的数据访问量，redis使用的时候可以单独利用客户端引入jar包操作即可，实际项目中都是和框架进行整合的比较多，此处演示利用springboot整合redis做缓存的简单过程。 1、搭建redis服务器，为简化搭建过程，这里是在windows下使用redis3.2进行模拟，redis的下载可到github上, 下载压缩包，解压到本地的目录，解压完毕，直接在目录下启动服务端和客户端即可， 看到这个图说明启动成功，整个搭建过程比较简单，不做过对说明， 2、安装mysql，由于本次要模拟缓存的效果，需要查询数据库数据，访问mysql, 为简化linux下安装mysql的过程，本次将直接在docker上通过启动一个mysql的镜像安装mysql，比单纯安装mysql要省事不少，关于docker的使用，此处不做详细介绍，大家可参考相关资料自己搭建试试

一、什么是架构 我想这个问题，十个人回答得有十一个答案，因为另外的那一个是大家妥协的结果。哈哈，我理解，架构就是 骨架 ，如下图所示： 人类的身体的支撑是主要由骨架来承担的，然后是其上的肌肉、神经、皮肤。架构对于软件的重要性不亚于骨架对人类身体的重要性。 二、. 什么是设计模式 这个问题我问过的面试者不下于数十次，回答五花八门，在我看来，模式就是经验，设计模式就是 设计经验 ，有了这些经验，我们就能在特定情况下使用特定的设计、组合设计，这样可以大大节省我们的设计时间，提高工作效率。 作为一个工作10年以上的老码农，经历的系统架构设计也算不少，接下来，我会把工作中用到的一些架构方面的设计模式分享给大家，望大家少走弯路。总体而言，共有八种，分别是： 单库单应用模式 ：最简单的，可能大家都见过 内容分发模式 ：目前用的比较多 查询分离模式 ：对于大并发的查询、业务 微服务模式 ：适用于复杂的业务模式的拆解 多级缓存模式 ：可以把缓存玩的很好 分库分表模式 ：解决单机数据库瓶颈 弹性伸缩模式 ：解决波峰波谷业务流量不均匀的方法之一 多机房模式 ：解决高可用、高性能的一种方法 三、单库单应用模式 这是最简单的一种设计模式，我们的大部分本科毕业设计、一些小的应用，基本上都是这种模式，这种模式的一般设计见下图： 如上图所示，这种模式一般只有一个数据库，一个业务应用层，一个后台管理系统

浏览器的缓存可分为HTTP缓存和离线缓存，下面将分别介绍 HTTP缓存 只有GET请求能被缓存，POST不能被缓存。 Modified Time/ETag/Expires/Cache都是HTTP协议的缓存策略 先来一个例子 当我们第二次访问百度首页，在Chrome的Network面板中打开一个静态文件时会发现响应的status是： 200 OK (from disk cache) ，不是应该返回304 Not Modified吗？如果你知道答案，那就可以忽略本文了。 Cache-Control 简介 w3.org 的定义是：“The Cache-Control general-header field is used to specify directives which MUST be obeyed by all caching mechanisms along the request/response chain.” 这是一个通用首部字段（就是请求报文和响应报文都能用上的字段），用来控制HTTP缓存的行为。 例如： Cache-Control: max-age=3600, public public 意味着这个响应可以被任何人缓存 max-age 则表明了该缓存有效的秒数，允许你的网站被缓存将大大减少下载时间和带宽，同时也提高浏览器的载入速度。 也可以通过设置 no-cache

一、URL到页面 准备阶段： 输入URL，Enter进入查找 浏览器在本地查找host文件，匹配对应的IP； 找到返回浏览器并缓存 没有，则进入路由查找； 找到返回浏览器并缓存 再没有，再进入公网DNS根目录 ； 找到返回浏览器并缓存 进入，等待发送请求，建立tcp/ip 传输连接， 若没有等候的请求 ，则直接发送 服务器阶段： 根据请求，查找数据，返回数据 渲染阶段： 逐行解析HTML， 遇到同步的请求代码，则发送数据请求，cssLink， js， 图片，视频等； 构建htmlDOM-tree， CSSDOM ， render-tree 2、html页面渲染: 发送请求，服务器返回HTML，浏览器解析HTML，发出相应css的和js请求 html 不是缓存的 css下载完成 ，构建dom树， 构建cssDOM完成后 ，结合DOM生成Rendering Tree， css是由单独的下载线程异步下载的 css加载不会阻塞DOM树的解析 css加载会阻塞DOM树的渲染 css加载会阻塞后面js语句的执行 js下载完成，操作DOM，更新DOM；在html解析过程中或是DOM和CSSDOM结构构建中，同步请求加载JS，解析js都会阻塞浏览器的构和渲染 解析到js会, js引擎会使html解析线程暂停，html页面停止解析 js请求加载完毕， js执行完毕， js引擎停止，

原文: net core WebApi——缓存神器Redis 目录 前言 Redis 使用 RedisUtil 测试 小结 前言 中秋过完不知不觉都已经快两周没动这个工程了，最近业务需要总算开始搞后台云服务了，果断直接net core搞起，在做的中间遇到了不少问题，这个后续会一点点列出来包括解决方法，今天就先把之前挖的坑填一个。 Redis 之前在缓存那篇提到过， Cookie ， Session ， Cache 这几个不同的缓存方式，Cookie是存在客户端浏览器的，Session实质上也是客户端的存储，至于Cache是服务端的，但是如果是分布式的话，这几个方式可能除了Cookie其他两个都要有点儿问题，毕竟一台服务只存储自身一台，如果多台的话，需要涉及到多服务的交互，比如一台服务做了Cache存储，需要给其他服务发送内部信号或是http请求，其他服务根据请求执行对应操作。 当然这是在没有用到 Redis 的前提下，Redis是解决分布式缓存的神器，相当于是自身一台服务器专门处理数据的读写，可以理解为数据服务器（个人感觉。。。），至于自己业务的分布式只是为了业务需要去执行，需要用到数据缓存即可直接调用Redis的读写操作（当然，各个服务的Redis配置要保持一致）。 Redis的安装和配置在 Linux配置部署_新手向（四）——Redis安装与配置 已经说过

缓存已经成了项目中是必不可少的一部分，它是提高性能最好的方式，例如减少网络I/O、减少磁盘I/O 等，使项目加载速度变的更快。 缓存可以是CPU缓存、内存缓存、硬盘缓存，不同的缓存查询速度也不一样（CPU缓存 优于 内存缓存 优于 硬盘缓存）。 接下来，给大家逐一进行介绍。 浏览器缓存 浏览器将请求过的页面存储在客户端缓存中，当访问者再次访问这个页面时，浏览器就可以直接从客户端缓存中读取数据，减少了对服务器的访问，加快了网页的加载速度。 强缓存 用户发送的请求，直接从客户端缓存中获取，不请求服务器。 根据 Expires 和 Cache-Control 判断是否命中强缓存。 代码如下： header('Expires: '. gmdate('D, d M Y H:i:s', time() + 3600). ' GMT'); header("Cache-Control: max-age=3600"); //有效期3600秒 Cache-Control 还可以设置以下参数： public：可以被所有的用户缓存（终端用户的浏览器/CDN服务器） private：只能被终端用户的浏览器缓存 no-cache：不使用本地缓存 no-store：禁止缓存数据 协商缓存 用户发送的请求，发送给服务器，由服务器判定是否使用客户端缓存。 代码如下： $last_modify = strtotime(

减少HTTP请求次数和请求大小 尽量合并CSS和JS文件（把需要引入的CSS合并为一个，JS也是合并为一个），原理是在减少HTTP请求次数，尽可能的把合并后的代码进行压缩，减小HTTP请求资源的大小 A:webpack这种自动化构建工具，可以帮我们实现代码的合并和压缩（工程化开发） B:在移动开发(或者追求高性能的PC端开发[例如百度首页])，如果CSS或者JS不是需要很多，我们可以选择把css和js编程内嵌式（也就是代码直接写在HTML中） 采用图片的“懒加载”（延迟加载） 目的是为了减少页面“第一次加载”过程中HTTP的请求次数，让页面打开速度变快 步骤：开始加载页面的时候，所有的真实图片都不去发送HTTP请求加载，而是给一张占位的背景图，当页面加载完，并且图片在可视区域内我们再去做图片加载 利用浏览器和服务器端的缓存技术(304缓存)，把一些不经常更新的静态资源文件做缓存处理（例如：JS、CSS、静态图片等都可以做缓存） 原理是为了减少HTTP请求大小，让获取速度更快 CSS雪碧图技术(css sprite / css 图片精灵) 把所有相对较小资源图片汇总到一张大图上，后期我们只需要把大图加载下来，用背景定位的方式展示对应的小图即可 .bg{ background:url('xxx.png'); } .box1{ background-position:xx xx; }

浏览器的缓存可分为HTTP缓存和离线缓存，下面将分别介绍 HTTP缓存 只有GET请求能被缓存，POST不能被缓存。 Modified Time/ETag/Expires/Cache都是HTTP协议的缓存策略 先来一个例子 当我们第二次访问百度首页，在Chrome的Network面板中打开一个静态文件时会发现响应的status是： 200 OK (from disk cache) ，不是应该返回304 Not Modified吗？如果你知道答案，那就可以忽略本文了。 Cache-Control 简介 w3.org 的定义是：“The Cache-Control general-header field is used to specify directives which MUST be obeyed by all caching mechanisms along the request/response chain.” 这是一个通用首部字段（就是请求报文和响应报文都能用上的字段），用来控制HTTP缓存的行为。 例如： Cache-Control: max-age=3600, public public 意味着这个响应可以被任何人缓存 max-age 则表明了该缓存有效的秒数，允许你的网站被缓存将大大减少下载时间和带宽，同时也提高浏览器的载入速度。 也可以通过设置 no-cache