浏览器缓存

SSR：Server side render 将组件或页面通过服务器生成html字符串，再发送到浏览器，简单理解下来，发了一个请求，服务器返回的不是接口数据，而是一整个页面的HTML结构，再结合界面之前定义的CSS把页面展示出来；VUE 服务器渲染文档 SSR优点 目前使用MV*架构的项目，大都是前后端分离，数据都是动态生成，不利于SEO优化 SSR缺点 性能全都依赖于服务器 前端界面开发可操作性不高 CSR：Client side render 通过接口请求数据，前端通过JS动态处理和生成页面需要的结构和页面展示 CSR 优点 FP最快 客户端体验较好，因为在数据没更新之前，页面框架和元素是可以在dom生成的 在CSR的FP术语之间，和FP相类似的术语还有：FCP和FMP； FP：仅有一个 div 根节点。以VUE为例，div#app 注册一个空的div FCP：包含页面的基本框架，但没有数据内容。以VUE为例，每个template中的div框架，对应VUE生命周期的mounted FMP：包含页面所有元素及数据。以VUE为例，通过接口更新到页面的数据后完整的页面展示；对应VUE的生命周期中的updated CSR的缺点 整体加载完速度慢 优化首屏加载，减少白屏时间，提升加载性能： 加速或减少HTTP请求损耗：使用CDN加载公用库，使用强缓存和协商缓存，使用域名收敛

1. 什么是缓存 缓存有很多种，从 CPU 缓存、磁盘缓存到浏览器缓存等，本文所说的缓存，主要针对后端系统的缓存。也就是将程序或系统经常要使用的对象存在内存中，以便在使用时可以快速调用，也可以避免加载数据或者创建重复的实例，以达到减少系统开销，提高系统效率的目的。 2. 为什么要用缓存 我们一般都会把数据存放在关系型数据库中，不管数据库的性能有多么好，一个简单的查询也要消耗毫秒级的时间，这样我们常说的 QPS 就会被数据库的性能所限制，我们想要提高QPS，只能选择更快的存储设备。 在日常开发有这样的一种场景：某些数据的数据量不大、不经常变动，但访问却很频繁。受限于硬盘 IO 性能或者远程网络等原因，每次都直接获取会消耗大量的资源。可能会导致我们的响应变慢甚至造成系统压力过大，这在一些业务上是不能忍的，而缓存正是解决这类问题的神器。 但是有一点需要注意，就是缓存的占用空间以及缓存的失效策略，下文也会提到。 3. 使用缓存的场景 对于缓存来说，数据不常变更且查询比较频繁是最好的场景，如果查询量不够大或者数据变动太频繁，缓存也就是失去了意义。 日常工作使用的缓存可以分为内部缓存和外部缓存。 内部缓存一般是指存放在运行实例内部并使用实例内存的缓存，这种缓存可以使用代码直接访问。 外部缓存一般是指存放在运行实例外部的缓存，通常是通过网络获取，反序列化后进行访问。

先来一张图: #### 下面简单的来描述一下HTTP Cache机制 ： 当资源资源第一次被访问的时候，http status返回200，在头部携带当前资源的描述信息，eg: 最后修改的时间:```Last-Modified``` 资源状态唯一标识:```Etag``` 资源在客户端缓存的过期时间:```Expires``` 同时浏览器会将资源缓存到cache目录，并保存文件描述信息。 当客户端第二次请求资源时，会先检查cache目录中是否含有该资源，如果有，并且还没到Expires设置的时间， 即文件还没有过期，那么此时客户端将直接从Cache目录中读取文件，而不再发送请求 如果资源已经过期，客户端会发送一次http请求到服务器，同时在header携带上次修改的时间： ```text If-Modified-Since Thu, 26 Nov 2009 13:50:19 GMT If-None-Match "8fb8b-14-4794674acdcc0" ``` 如果你对编程感兴趣或者想往编程方向发展，可以关注微信公众号【筑梦编程】，大家一起交流讨论！小编也会每天定时更新既有趣又有用的编程知识！ #### 为什么会返回上一次的信息呢？ web服务器在接收到请求时，会先解析header里面的信息，然后校验头部信息。 如果该资源文件从上次时间到现在都没有修改或者Etag信息没有变化，

下面的代码内容是关于asp.net OutputCache 详解的代码。 <%@ OutputCache Duration = "120" VaryByParam = "none" %> 上述代码使用@OutputCatch指令声明了页面缓存，该页面将被缓存120秒。@OutputCatch指令包括10个属性，通过这些属性能够分别为页面的不同情况进行缓存设置，常用的属性如下所示：qCacheProfile：获取或设置OutputCacheProfile名称。qDuration：获取或设置缓存项需要保留在缓存中的时间。qVaryByHeader：获取或设置用于改变缓存项的一组都好分隔的HTTP标头名称。qLocation：获取或设置一个值，该值确定缓存项的位置，包括Any、Clint、Downstream、None、Server和ServerAndClient。默认值为Any。qVaryByControl：获取或设置一簇分好分隔的控件标识符，这些标识符包含在当前页或用户控件内，用于改变当前的缓存项。qNoStore：获取或设置一个值，该值确定是否设置了“HttpCache-Control：no-store”指令。qVaryByCustom：获取输出缓存用来改变缓存项的自定义字符串列表。qEnabled：获取或设置一个值，该值指示是否对当前内容启用了输出缓存。qVaryByParam

本文转载于: 猿2048 网站➱ https://www.mk2048.com/blog/blog.php?id=ha00i0j20j 网站性能监测与优化策略 0.引言 作为互联网项目，最重要的便是用户体验。在举国“互联网+”的热潮中，用户至上也已经被大多数企业所接收，特别是在如今移动端快速发展的时代，我们的网页不仅只是呈现在用户的PC浏览器里，更多的时候，用户是通过移动产品浏览我们的网页。加之有越来越多的开发者投入到Web APP和Hybrid APP的开发队伍中，性能，又再一次成为了被程序员们重点关注的话题。我曾经看到过这样一句话：一个网站的体验，决定了用户是否愿意去了解网站的功能；而网站的功能，决定了用户是否会一票否决网站的体验。这是改版自网络上的一句流行语，但却把网站性能这件事说的十分透彻，特别是在网站这样的项目中，如果一个用户需要超过5s才能看见页面，他会毫不犹豫地关闭它。 性能优化，作为工程师界的“上乘武功”，是我们在开发中老生常谈的话题，也是一名开发者从入门向资深进阶的必经阶段，虽然我们看到过很多的标准、军规，但在真正实践中，却常常力不从心，不知道落下了什么，不知道性能是否还有进一步优化的空间。 对于网站的性能，在行业内有很多既定的指标，但就以我们Front-Enders而言，应该更加关注以下指标：白屏时间、首屏时间、整页时间、DNS时间、CPU占用率

什么是HTTP协议 　　协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器 　　目前我们使用的是HTTP/1.1 版本 　　Web服务器，浏览器，代理服务器 　　当我们打开浏览器，在地址栏中输入URL，然后我们就看到了网页。 原理是怎样的呢？ 　　实际上我们输入URL后，我们的浏览器给Web服务器发送了一个Request, Web服务器接到Request后进行处理，生成相应的Response，然后发送给浏览器， 浏览器解析Response中的HTML,这样我们就看到了网页，过程如下图所示 　　我们的Request 有可能是经过了代理服务器，最后才到达Web服务器的。 　　过程如下图所示 　　代理服务器就是网络信息的中转站，有什么功能呢？ 　　1. 提高访问速度， 大多数的代理服务器都有缓存功能。 　　2. 突破限制， 也就是翻墙了 　　3. 隐藏身份。 　　URL详解 　　URL(Uniform Resource Locator) 地址用于描述一个网络上的资源， 基本格式如下 schema://host[:port#]/path/.../[;url-params][?query-string][#anchor] 　　scheme

1.讲讲输入完网址按下回车，到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服务器端响应http请求，浏览器得到html代码 e. 浏览器解析html代码，并请求html代码中的资源 f. 浏览器对页面进行渲染呈现给用户 2.谈谈你对前端性能优化的理解 a. 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域 b. 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体 c. 缓存利用：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存 d. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出 e. 代码校验：避免CSS表达式，避免重定向 3.前端 MV*框架的意义 早期前端都是比较简单，基本以页面为工作单元，内容以浏览型为主，也偶尔有简单的表单操作，基本不太需要框架。 随着 AJAX 的出现，Web2.0的兴起，人们可以在页面上可以做比较复杂的事情了，然后前端框架才真正出现了。 如果是页面型产品，多数确实不太需要它，因为页面中的 JavaScript代码，处理交互的绝对远远超过处理模型的，但是如果是应用软件类产品，这就太需要了。 长期做某个行业软件的公司

第1章 课程介绍 欢迎大家来到PHP相关缓存技术的课堂，一起来研究这个知识体系分散，却又是解决大数据高压力的金钥匙的课程。本章先来给大家介绍一个整门课程的结构，再来研究：缓存是什么玩意？他适合存放哪些东西？有哪些主流的缓存技术可以被使用？可以用来解决什么现实的问题？使用它要注意哪些事项？... 第2章 文件类缓存 咱们需要一个搭建LNMP环境，学习CDN原理、数据缓存、页面静态化，以及Facebook的BigPipe技术。并配置ThinkPHP的最新框架来开发商城首页的焦点图、栏目模块来掌握这些知识点 第3章 内存数据库之Memcached Memcached已经是天下谁人不识君了，但你真的了解它么，咱们这节课主要讲的就是Memcached原理和它的内存管理机制，实际配置、封装缓存类并使用它实现商城登录数据的存储。之后，咱们讲到两种分布式算法以及一种集中式缓存的应用案例。... 第4章 内存数据库之Redis Redis是后浪拍前浪，功能更大更牛掰，咱们除了重构上节内容，还会详细解析Redis五种字段类型并实现会员资料、秒杀、商品对比、排行榜这五个模块，之后会讲到持久化方案，并用六个虚拟机真实搭建一个Redis分布式集群。 第5章 浏览器缓存 流量的大洪水要从源头控制，减少服务器的压力的首先，就是减少客户发起的请求，浏览器的缓存有什么机制，它是怎么进行控制的

http://blog.csdn.net/hai_qing_xu_kong/article/details/52262182 本文出自： 【顾林海的博客】 前言 上一篇讲述了 Cookie管理 对比Cookie，Session会话文件中保存的数据在PHP脚本中是以变量的形式创建的，创建的会话变量在生命周期中可以被跨页的请求所引用。另外，Session会话是存储在服务器端的，相对安全，并且不像Cookie那样有存储长度的限制。 Session使用前的准备 在进行Session使用前，我们需要知道什么是Session、原理以及它的功能。 什么是Session 在计算机专业术语中，Session是指一个终端用户与交互系统进行通信的时间间隔，通常指从注册进入系统到注销退出系统所经过的时间。因此，Session实际上是一个特定的时间概念。 工作原理 当启动一个Session会话时，会生成一个随机且唯一的session_id，也就是Session的文件名，此时session_id存储在服务器的内存中，当关闭页面时此id会自动注销，重新登录此页面，会再次生成一个随机且唯一的id。 Session的功能 另外，Session会话适用于存储信息量比较少的情况。如果用户需要存储的信息量相对较少，并且对存储内容不需要长期存储，那么使用Session把信息存储到服务器端比较合适。 Session的使用

本篇介绍的是一次完成的http请求都经过了那些步骤,这些步骤相应的作用又是什么 1.在浏览器端输入网站的url地址 只有知道了一个网站的url地址才能访问到这个网站 2.浏览器查找缓存 浏览器会查找浏览器缓存,系统缓存,路由缓存,如果没有的话 继续下一步,如果有的话,直接显示 注意:浏览器会把访问过得web网站资源(html 图片)缓存起来,而判断是否使用缓存的条件有以下几种: 是否有这个网站的缓存 这个网站的缓存是否过期,具体看 Cache-Control 中缓存的有效时间 跟服务器进行协商是否使用缓存,如果上次缓存的时候有Last-modified 和 Etag 字段,本次请求就会加上If-Modified-Since(上次请求资源的时间)和If-None-Match(上次资源的修改时间) 3.通过DNS获取url对应的ip地址 现在本机的host文件中查找是否有这个url对应的ip,如果没有的话,就请求DNS进行ip地址的获取 4.建立TCP链接 http在工作之前,需要客户端和服务端建立链接,这个链接的建立是通过tcp(三次握手)来完成的,因为http是比tcp更高层的协议,在网络协议的建立中,不谈底层谈高层都是在耍流氓,所以想要让http进行工作,需要tcp首先建立链接 5.浏览器向web服务器发送请求 一旦链接已经建立,浏览器就可以给web服务器发送请求命令,比如 :